Flutter CupertinoSegmentedControl 分段组件

「爱情、让人受尽委屈。」 2023-10-07 16:52 120阅读 0赞

如果你有兴趣你可以关注一下公众号 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),
    );
  }