Flutter CupertinoSegmentedControl 分段组件

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

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

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

本文实现的效果：

![在这里插入图片描述][d154ddb2226945dca8139925c7b5690e.gif_pic_center]  
在 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),
        );
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[d154ddb2226945dca8139925c7b5690e.gif_pic_center]: https://img-blog.csdnimg.cn/d154ddb2226945dca8139925c7b5690e.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/6b2d13b9d3fa4352ab65b8f956f66b71.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70