Flutter CupertinoSegmentedControl 分段组件

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

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

本文实现的效果：

在 Flutter 中，是通过 CupertinoSegmentedControl 来实现

  //当前选中的索引
  int _currentIndex = 0;

  buildSegment() {
    return CupertinoSegmentedControl(
      //子标签
      children: <int, Widget>{
        0: Text("全部"),
        1: Text("收入"),
        2: Text("支出 "),
      },
      //当前选中的索引
      groupValue: _currentIndex,
      //点击回调
      onValueChanged: (int index) {
        print("当前选中 $index");
        setState(() {
          _currentIndex = index;
        });
      },
      //选中的背景颜色
      selectedColor: Colors.blue,
      //未选中的背景颜色
      unselectedColor: Colors.white,
      //边框颜色
      borderColor: Colors.blue,
      //按下的颜色
      pressedColor: Colors.blue.withOpacity(0.4),
    );
  }