Flutter CupertinoSlidingSegmentedControl 分段组件使用解析

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

本文实现的效果:
Flutter CupertinoSlidingSegmentedControl 分段组件使用解析_第1张图片
在 Flutter 中,是通过 CupertinoSlidingSegmentedControl 来实现

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

Flutter CupertinoSlidingSegmentedControl 分段组件使用解析_第2张图片

你可能感兴趣的:(flutterandroid)