5、Flutter Widget(IOS Style) - CupertinoSegmentedControl;

iOS风格分段控件详解
本文详细介绍了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),
  }) 
复制代码

Map<T, Widget> children分段控件中的标识键和相应的窗口小部件值,其中的T为onValueChanged的回掉的值。

T groupValue当前选定的窗口小部件的标识符。如果此属性为null,则最初不会选择任何窗口小部件。

ValueChanged<T> onValueChanged选中的回掉。

typedef ValueChanged = void Function(T value);

unselectedColor未选中的背景色。selectedColor选中的背景色。borderColor颜色框的颜色。pressedColor按压时的颜色。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值