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

最新推荐文章于 2025-09-11 09:10:10 发布

原创最新推荐文章于 2025-09-11 09:10:10 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #表单 #Switch #SwitchListTile

【Flutter】学习记录专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了Flutter中用于表单的两种开关控件：Switch和SwitchListTile。Switch用于简单的开关操作，而SwitchListTile则提供了一个带有标题的开关选项。文章深入解析了这两种控件的构造器参数、属性说明及示例代码，帮助开发者更好地理解和使用这些控件。

部署运行你感兴趣的模型镜像

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

一、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;
					});
				},
			),
		)
	],
)