5、Flutter Widget(IOS Style) - CupertinoSegmentedControl;

iOS风格分段控件详解

最新推荐文章于 2025-02-14 10:00:21 发布

转载最新推荐文章于 2025-02-14 10:00:21 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c88650d5188257e566ee82a

文章标签：

#移动开发

本文详细介绍了iOS风格的CupertinoSegmentedControl组件，它用于在多个互斥选项间选择，展示了如何通过Map结构存储不同选项的Widget，并在状态改变时触发onValueChanged回调。

iOS风格的分段控件。显示水平列表中子项映射中提供的小组件。用于在多个互斥选项之间进行选择。当选择分段控件中的一个选项时，将不再选择分段控件中的其他选项。

分段控件可以将任何Widget作为其Map of Child中的值之一。类型T是用于标识每个小部件并确定选择哪个小部件的键的类型。根据Map类的要求，键必须是一致的类型，并且必须具有可比性。键的排序将确定分段控件中小部件的顺序。

当分段控件的状态发生更改时，窗口小部件将调用onValueChanged回调。在onValueChanged回调中返回与新选择的窗口小部件关联的Map的Key。通常，使用分段控件的窗口小部件将侦听onValueChanged回调并使用新的groupValue重建分段控件以更新当前选择的选项。

class CupertinoSegmentedControlApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) => CupertinoApp(
    home: _HomePage(),
  );
}

class _HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) => CupertinoPageScaffold(
      child: Center(child:
      CupertinoSegmentedControl<int>(children: {
        1:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 1"),),
        2:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 2"),),
        3:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 3"),),
        4:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 4"),),
      },
        onValueChanged: (value){
          print("the value changed ! $value");
        },
      ),)
  ) ;
}
复制代码

其构造函数如下:

 CupertinoSegmentedControl({
    Key key,
    @required this.children,
    @required this.onValueChanged,
    this.groupValue,
    this.unselectedColor = CupertinoColors.white,
    this.selectedColor = CupertinoColors.activeBlue,
    this.borderColor = CupertinoColors.activeBlue,
    this.pressedColor = const Color(0x33007AFF),
  }) 
复制代码