Flutter（21）：Material组件之Switch/SwitchListTile

Flutter教学目录持续更新中

Github源代码持续更新中

1.Switch/SwitchListTile介绍

2.Switch属性

• value：true：开 false：关
• onChanged：变化时回调
• activeColor：打开状态下颜色
• activeTrackColor：打开状态下track颜色
• inactiveThumbColor：关闭状态thumb颜色
• inactiveTrackColor：关闭状态track颜色
• activeThumbImage：打开状态下thumb图片
• onActiveThumbImageError：打开状态下thumb图片错误回调
• inactiveThumbImage：关闭状态thumb图片
• onInactiveThumbImageError：关闭状态thumb图片错误回调
• autofocus = false：

3.SwitchListTile属性

• value：true：开 false：关
• onChanged：变化时回调
• activeColor：打开状态下颜色
• activeTrackColor：打开状态下track颜色
• inactiveThumbColor：关闭状态thumb颜色
• inactiveTrackColor：关闭状态track颜色
• activeThumbImage：打开状态下thumb图片
• inactiveThumbImage：关闭状态thumb图片
• title：主标题
• subtitle：副标题
• dense：是否是listView子节点
• contentPadding：内边距
• secondary：图标
• selected = false：是否选中
• autofocus = false：
• controlAffinity = ListTileControlAffinity.platform： 排列顺序

4.Switch

track：轨道
thumb：圆球
Image属性会替代对应的Color属性，只有在设置Image属性的情况下才可以设置ImageError属性

1601262958501.jpg

1601262971258.jpg

1601262999653.jpg

1601263013332.jpg

var _onOff = true;

 _mySwitch() {
    return Switch(
      value: _onOff,
      activeColor: Colors.red,
      activeTrackColor: Colors.green,
      inactiveThumbColor: Colors.deepPurple,
      inactiveTrackColor: Colors.amber,
      // activeThumbImage: AssetImage('images/scan.png'),
      // inactiveThumbImage: NetworkImage(widget._imageUrl),
      // onActiveThumbImageError: (e, s) {
      //   ToastUtil.showToast('onActiveThumbImageError');
      // },
      // onInactiveThumbImageError: (e, s) {
      //   ToastUtil.showToast('onActiveThumbImageError');
      // },
      onChanged: (value) {
        setState(() {
          _onOff = value;
        });
      },
    );
  }

5.SwitchListTile

1601263088483.jpg

1601263103164.jpg

 _mySwitchListTile() {
    return SwitchListTile(
        value: _onOff,
        activeColor: Colors.red,
        activeTrackColor: Colors.green,
        inactiveThumbColor: Colors.deepPurple,
        inactiveTrackColor: Colors.amber,
        // activeThumbImage: AssetImage('images/scan.png'),
        // inactiveThumbImage: NetworkImage(widget._imageUrl),
        title: Text('开启灯光'),
        subtitle: Text('卧室灯'),
        dense: true,
        // contentPadding: EdgeInsets.all(10),
        selected: _onOff,
        secondary: Icon(Icons.people),
        controlAffinity: ListTileControlAffinity.platform,
        onChanged: (value) {
          setState(() {
            _onOff = value;
          });
        });
  }

下一节：Material组件之Slider

Flutter（22）：Material组件之Slider

Flutter教学目录持续更新中

Github源代码持续更新中