微信交流群

老孟公众号

# 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

image-20200526181817167

groupValue表示当前选中的值,

String _value = '语文';


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

image-20200526182812968

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

CupertinoSegmentedControl(
  selectedColor: Colors.red,
  ...
)
1
2
3
4

image-20200526182915710

pressedColor表示按住时的颜色:

CupertinoSegmentedControl(
  pressedColor: Colors.red,
  ...
) 
1
2
3
4

image-20200526183107025

borderColor表示边框颜色:

CupertinoSegmentedControl(
  borderColor: Colors.red,
  ...
) 
1
2
3
4

image-20200526183157813