Flutter CupertinoSlidingSegmentedControl 分段组件使用解析

Posted 2021-08-27 早起的年轻人

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里

本文实现的效果：

在 Flutter 中，是通过 CupertinoSlidingSegmentedControl 来实现

  //当前选中的索引
  int _currentIndex = 0;
  
  buildSlidSegment() {
    return Container(
      margin: EdgeInsets.only(top: 80),
      width: 300,
      child: CupertinoSlidingSegmentedControl(
        //子标签
        children: <int, Widget>{
          0: Text("全部"),
          1: Text("收入"),
          2: Text("支出 "),
        },
        //当前选中的索引
        groupValue: _currentIndex,
        //点击回调
        onValueChanged: (int index) {
          print("当前选中 $index");
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }