【Flutter】表单 - Switch

image

设置一个可用的 switch

bool _value = false;
@override
Widget build(BuildContext context) {
    return Switch(
      value: _value,
      activeColor: Colors.red,
      onChanged: (newValue) {
        setState(() {
          _value = newValue;
        });
      }
    );
}

image

class _SwitchWidget extends State<SwitchWidget> {
  bool _value = false;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      children: <Widget>[
        Text('关'),
        Switch(
            value: _value,
            activeColor: Colors.red,
            activeTrackColor: Colors.blue,
            activeThumbImage: AssetImage(('assets/images/title.png')),
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            onChanged: (newValue) {
              setState(() {
                _value = newValue;
              });
            }
        ),
        Text('开'),
      ],
    );
  }
}

点击切换状态

RaisedButton(
  child: Text('点击切换'),
  onPressed: () => {
    setState(() {
      _value = !_value;
    })
  },
),

属性

• value bool 型(必传) true 开 false 关。
• onChanged 变化时候的回调，参数的新的值。如果不传，switch 是禁用状态。
• activeColor 打开状态下的颜色。
• activeTrackColor 打开状态下 track 的颜色
• activeThumbImage 打开状态下 thumb 的图片
• inactiveColor 打开状态下的颜色。
• inactiveTrackColor 关闭状态下 track 的颜色
• inactiveThumbImage 关闭状态下 thumb 的图片
• materialTapTargetSize 点击区域大小。枚举值 padded 较大。shrinkWrap 较小