微信交流群

# CupertinoSegmentedControl

iOS样式的分段控制组件，用法如下：

CupertinoSegmentedControl(
  children: {
    '语文':Container(child: Text('语文'), padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),),
    '数学':Container(child: Text('数学'), padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),),
    '体育':Container(child: Text('体育'), padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),)
  },
  onValueChanged: (value){
    print(value);
  },
)

1
2
3
4
5
6
7
8
9
10

groupValue表示当前选中的值，

String _value = '语文';

@override
Widget build(BuildContext context) {
  return Center(
    child: CupertinoSegmentedControl(
      children: {
        '语文':Container(child: Text('语文'), padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),),
        '数学':Container(child: Text('数学'), padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),),
        '体育':Container(child: Text('体育'), padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),)
      },
      groupValue: _value,
      onValueChanged: (value){
        setState(() {
          _value = value;
        });
      },
    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

CupertinoSegmentedControl

unselectedColor表示未选中的背景颜色和选中的字体颜色：

CupertinoSegmentedControl(
  unselectedColor: Colors.yellow,
  ...
)

1
2
3
4

selectedColor表示选中的背景颜色和未选中的字体颜色：

CupertinoSegmentedControl(
  selectedColor: Colors.red,
  ...
)

1
2
3
4

pressedColor表示按住时的颜色：

CupertinoSegmentedControl(
  pressedColor: Colors.red,
  ...
)

1
2
3
4

borderColor表示边框颜色：

CupertinoSegmentedControl(
  borderColor: Colors.red,
  ...
)

1
2
3
4

CupertinoScrollbar CupertinoSlider