Flutter CupertinoSlidingSegmentedControl 分段组件使用解析

浅浅的花香味﹌ 2023-10-07 16:52 6阅读 0赞

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

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

本文实现的效果：  
![在这里插入图片描述][f13905712a0743a2993af56b7745eb92.gif_pic_center]  
在 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;
              });
            },
          ),
        );
      }

![在这里插入图片描述][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
[f13905712a0743a2993af56b7745eb92.gif_pic_center]: https://img-blog.csdnimg.cn/f13905712a0743a2993af56b7745eb92.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/5d02e8237be04a41b10f909204f2f96c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70