【Flutter】八、Flutter之表单开关——Switch、SwitchListTile

Flutter中开关控件有：Switch、SwitchListTile。Switch仅仅可以定义一个开关，SwitchListTile是一个有标题的开关。

一、Switch

1.1 Switch构造器

const Switch({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.materialTapTargetSize,
    this.dragStartBehavior = DragStartBehavior.start,
  }) : _switchType = _SwitchType.material,
       assert(dragStartBehavior != null),
       super(key: key);

1.2 Switch属性说明

属性	说明
bool value	开关的值
ValueChanged onChanged	开关状态改变回调
Color activeColor	激活状态的滑块颜色
Color activeTrackColor	激活状态的轨道颜色
Color inactiveThumbColor	关闭状态的滑块颜色
Color inactiveTrackColor	关闭状态的轨道颜色
ImageProvider activeThumbImage	激活状态滑块显示的图片
ImageProvider inactiveThumbImage	关闭状态滑块显示的图片
MaterialTapTargetSize materialTapTargetSize	该值与CheckBox与Radio中的作用一致
DragStartBehavior dragStartBehavior	设置确定当用户启动拖动时，拖动何时正式启动

1.3 Switch示例

二、SwitchListTile

2.1 SwitchListTile构造器

const SwitchListTile({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.secondary,
    this.selected = false,
  }) : _switchListTileType = _SwitchListTileType.material,
       assert(value != null),
       assert(isThreeLine != null),
       assert(!isThreeLine || subtitle != null),
       assert(selected != null),
       super(key: key);

2.2 SwitchListTile属性说明

属性	说明
Widget title	开关标题
Widget subtitle	开关副标题
Widget secondary	一个小部件，显示在与开关相对的另一侧
bool isThreeLine	是否显示三行
bool dense	垂直密集排列
bool selected	是否将activeColor应用于title、subtitle、secondary

2.3 SwitchListTile示例

bool _switchListTitleValue = false;

Row(
	children: <Widget>[
		Flexible(
			child: SwitchListTile(
				value: _switchListTitleValue,
				title: Text('SwitchListTile'),
				subtitle: Text('subtitle'),
				secondary: Icon(Icons.close),
				isThreeLine: false,
				dense: false,
				selected: true,
				activeColor: Colors.deepPurpleAccent,
				onChanged: (data){
					setState(() {
						this._switchListTitleValue = data;
					});
				},
			),
		)
	],
)