微信交流群

老孟公众号

# Switch

Switch为material风格的开关组件,基本用法如下:

var _switchValue = false;
_buildSwitch(){
  return Switch(
    value: _switchValue,
    onChanged: (value){
      setState(() {
        _switchValue = value;
      });
    },
  );
}
1
2
3
4
5
6
7
8
9
10
11

效果如下:

设置激活状态下thumb及track颜色,用法如下:

Switch(
      activeColor: Colors.red,
      activeTrackColor: Colors.blue,
      ...
1
2
3
4
5

效果如下:

注意红色区域为thumb,蓝色区域为track。

thumb区域也可以设置图片,用法如下:

Switch(
  activeThumbImage: AssetImage('images/bird.png',),
  ...
)
1
2
3
4

效果如下:

有激活状态样式的设置,也有未激活样式的设置,用法如下:

Switch(
  inactiveThumbColor: Colors.black54,
  inactiveThumbImage: AssetImage('images/bird.png',),
  inactiveTrackColor: Colors.blue,
  ...
)
1
2
3
4
5
6

# SwitchListTile

SwitchListTile是Switch和ListTile组合控件,基本用法如下:

var _switchValue = false;
_buildSwitch(){
  return SwitchListTile(
    title:Text('是否允许4G下载'),
    value: _switchValue,
    onChanged: (value){
      setState(() {
        _switchValue = value;
      });
    },
  );
}
1
2
3
4
5
6
7
8
9
10
11
12

效果如下:

所有的属性都是Switch和ListTile属性的组合,可到具体控件查看其属性。

# CupertinoSwitch

CupertinoSwitch是ios风格控件,用法和Switch一样,用法如下:

var _switchValue = false;
_buildSwitch(){
  return CupertinoSwitch(
    value: _switchValue,
    onChanged: (value){
      setState(() {
        _switchValue = value;
      });
    },
  );
}
1
2
3
4
5
6
7
8
9
10
11

效果如下: