1. CheckboxListTile
const CheckboxListTile({
Key? key,
required this.value,
required this.onChanged,
this.activeColor,
this.checkColor,
this.tileColor,
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.secondary,
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform,
this.autofocus = false,
this.contentPadding,
this.tristate = false,
this.shape,
this.selectedTileColor,
this.side,
this.visualDensity,
this.focusNode,
this.enableFeedback,
})
| CheckboxListTile 属性 | 介绍 |
|---|---|
| value | 是否选中此复选框 |
| activeColor | 选中时颜色 |
| checkColor | 选中时中间✔️颜色 |
| tileColor | Tile 未选中时 颜色 |
| title | Title 组件 |
| subtitle | Subtitle 组件 |
| isThreeLine | 是否准备显示3行，默认false |
| dense | 是否使用缩小布局 |
| secondary | 辅助组件 |
| selected | Tile是否选中 |
| autofocus | 自动聚焦，默认为 false |
| controlAffinity | checkBox组件 布局位置platform、leading、trailing |
| contentPadding | 内边距 |
| tristate | 三态复选框，默认 false |
| shape | 形状 |
| selectedTileColor | Tile选中颜色 |
| visualDensity | 紧凑程度，VisualDensity -4～4 |
| focusNode | 焦点控制 Flutter 之 FocusNode （七十三） |
| enableFeedback | 是否给予按压反馈 |
| side | CheckBox 边框 |
| onChanged | 点击事件回调 |
示例
_buildCheckBoxListTile(BuildContext context) {
return CheckboxListTile(
value: _checkBoxValue1, // 是否选中此复选框
activeColor: Colors.red, // 选中时颜色
checkColor: Colors.amber, // 选中时中间✔️颜色
tileColor: Colors.cyan[50], // Tile 未选中时 颜色
title: Text("CheckboxListTile - Title",
style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
subtitle: Text("CheckboxListTile - Subtitle",
style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
isThreeLine: false, // 是否准备显示3行，默认false
dense: true, // 是否使用缩小布局
secondary: Icon(Icons.pets), // 辅助组件
selected: _checkBoxValue1 == true, // Tile是否选中
autofocus: false, // 自动聚焦，默认为 false
controlAffinity: ListTileControlAffinity.platform, // checkBox组件 布局位置,platform 根据平台来决定布局位置，leading在左侧布局，trailing在右侧布局
contentPadding: EdgeInsets.all(8), // 内边距
tristate: false, // 三态复选框，默认 false
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
selectedTileColor: Colors.cyan[200], // Tile选中颜色
visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
focusNode: FocusNode(skipTraversal: true), // 焦点控制
enableFeedback: true, // 是否给予按压反馈
side: BorderSide(color: Colors.teal, width: 2.0), // CheckBox 边框
// 点击事件回调
onChanged: (value) {
_checkBoxValue1 = value;
// 重新Build
(context as Element).markNeedsBuild();
},
);
}
2. SwitchListTile
const SwitchListTile({
Key? key,
required this.value,
required this.onChanged,
this.tileColor,
this.activeColor,
this.activeTrackColor,
this.inactiveThumbColor,
this.inactiveTrackColor,
this.activeThumbImage,
this.inactiveThumbImage,
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.contentPadding,
this.secondary,
this.selected = false,
this.autofocus = false,
this.controlAffinity = ListTileControlAffinity.platform,
this.shape,
this.selectedTileColor,
this.visualDensity,
this.focusNode,
this.enableFeedback,
this.hoverColor,
})
| SwitchListTile 属性 | 介绍 |
|---|---|
| value | value = true 时为打开状态，false 关闭 |
| tileColor | Tile未选中颜色 |
| activeColor | 打开状态下颜色 |
| activeTrackColor | 打开状态下轨道颜色 |
| activeThumbImage | 打开状态下滑块图片 |
| inactiveThumbColor | 关闭状态下滑块颜色 |
| inactiveTrackColor | 关闭状态下轨道颜色 |
| inactiveThumbImage | 关闭状态下滑块图片 |
| title | Title 组件 |
| subtitle | Subtitle 组件 |
| isThreeLine | 是否准备显示3行，默认false |
| dense | 是否使用缩小布局 |
| contentPadding | 内边距 |
| secondary | 辅助组件 |
| selected | Tile是否选中 |
| autofocus | 自动聚焦，默认为 false |
| controlAffinity | switch组件 布局位置 |
| shape | 形状 |
| selectedTileColor | Tile选中颜色 |
| visualDensity | 紧凑程度，VisualDensity -4～4 |
| focusNode | 焦点控制 Flutter 之 FocusNode （七十三） |
| enableFeedback | 是否给予按压反馈 |
| hoverColor | 悬停颜色 暂未使用 |
| onChanged | 点击事件 回调 |
示例
_buildSwitchListTile(BuildContext context) {
return SwitchListTile(
value: _switchValue1, // value = true 时为打开状态，false 关闭
tileColor: Colors.cyan[50], // Tile未选中颜色
activeColor: Colors.red, // 打开状态下颜色
activeTrackColor: Colors.amber, // 打开状态下轨道颜色
activeThumbImage: AssetImage("assets/images/tx1.jpeg"), // 打开状态下滑块图片
inactiveThumbColor: Colors.grey, // 关闭状态下滑块颜色
inactiveTrackColor: Colors.red[200], // 关闭状态下轨道颜色
inactiveThumbImage: AssetImage("assets/images/tx2.jpeg"), // 关闭状态下滑块图片
title: Text("SwitchListTile - Title",
style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
subtitle: Text("SwitchListTile - Subtitle",
style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
isThreeLine: false, // 是否准备显示3行，默认false
dense: true, // 是否使用缩小布局
contentPadding: EdgeInsets.all(8), // 内边距
secondary: Icon(Icons.pets), // 辅助组件
selected: _switchValue1, // Tile是否选中
autofocus: false, // 自动聚焦，默认为 false
controlAffinity: ListTileControlAffinity.platform, // switch组件 布局位置
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
selectedTileColor: Colors.cyan[200], // Tile选中颜色
visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
focusNode: FocusNode(skipTraversal: true), // 焦点控制
enableFeedback: true, // 是否给予按压反馈
hoverColor: Colors.red, // 悬停颜色 暂未使用
// 点击事件 回调
onChanged: (value) {
_switchValue1 = value;
// 重新Build
(context as Element).markNeedsBuild();
},
);
}
3. RadioListTile
const RadioListTile({
Key? key,
required this.value,
required this.groupValue,
required this.onChanged,
this.toggleable = false,
this.activeColor,
this.title,
this.subtitle,
this.isThreeLine = false,
this.dense,
this.secondary,
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform,
this.autofocus = false,
this.contentPadding,
this.shape,
this.tileColor,
this.selectedTileColor,
this.visualDensity,
this.focusNode,
this.enableFeedback,
})
| RadioListTile 属性 | 介绍 |
|---|---|
| value | 单选的值 |
| groupValue | 选择组的值 |
| toggleable | 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null |
| activeColor | 选中时填充颜色 |
| title | Title 组件 |
| subtitle | Subtitle 组件 |
| dense | 是否使用缩小布局 |
| isThreeLine | 是否准备显示3行，默认false |
| secondary | 辅助组件 |
| selected | Tile 是否选中 |
| controlAffinity | radio组件布局位置 |
| contentPadding | 内边距 |
| shape | 形状 |
| tileColor | Tile未选中颜色 |
| selectedTileColor | Tile选中颜色 |
| visualDensity | 紧凑程度，VisualDensity -4～4 |
| focusNode | 焦点控制 Flutter 之 FocusNode （七十三） |
| enableFeedback | 是否给予按压反馈 |
| onChanged | 点击事件回调 |
示例
_buildRadioListTile(int initValue, BuildContext context) {
return RadioListTile(
value: initValue, // 单选的值
groupValue: _radioGroupValue, // 选择组的值
toggleable: true, // 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null
activeColor: Colors.red[500], // 选中时填充颜色
title: Text("RadioListTile - Title",
style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
subtitle: Text("RadioListTile - Subtitle",
style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
dense: true, // 是否使用缩小布局
isThreeLine: false, // 是否准备显示3行，默认false
secondary: Icon(Icons.pets), // 辅助组件
selected: _radioGroupValue == initValue, // Tile 是否选中
controlAffinity: ListTileControlAffinity.platform, // radio组件布局位置
contentPadding: EdgeInsets.all(8), // 内边距
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
tileColor: Colors.cyan[50], // Tile未选中颜色
selectedTileColor: Colors.cyan[200], // Tile选中颜色
visualDensity: VisualDensity(
horizontal: -4, vertical: -4), // 紧凑程度，VisualDensity -4～4
focusNode: FocusNode(skipTraversal: true), // 焦点控制
enableFeedback: true, // 是否给予按压反馈
// 点击事件回调
onChanged: (int? value) {
_radioGroupValue = value;
// 重新Build
(context as Element).markNeedsBuild();
},
);
}
4. Demo
class MSListTileRoute extends StatelessWidget {
MSListTileRoute({Key? key}) : super(key: key);
bool? _checkBoxValue1 = false;
bool _switchValue1 = false;
int? _radioGroupValue = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("MSListTileRoute")),
body: ListView(
children: [
Builder(builder: (context) {
return _buildCheckBoxListTile(context);
}),
Builder(builder: (context) {
return _buildSwitchListTile(context);
}),
Builder(builder: (context) {
return Column(
children: [
_buildRadioListTile(1, context),
_buildRadioListTile(2, context),
_buildRadioListTile(3, context),
],
);
}),
],
),
);
}
_buildRadioListTile(int initValue, BuildContext context) {
return RadioListTile(
value: initValue, // 单选的值
groupValue: _radioGroupValue, // 选择组的值
toggleable: true, // 是否可返回不确定状态，默认false，为true时，再次选中时onChanged返回null
activeColor: Colors.red[500], // 选中时填充颜色
title: Text("RadioListTile - Title",
style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
subtitle: Text("RadioListTile - Subtitle",
style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
dense: true, // 是否使用缩小布局
isThreeLine: false, // 是否准备显示3行，默认false
secondary: Icon(Icons.pets), // 辅助组件
selected: _radioGroupValue == initValue, // Tile 是否选中
controlAffinity: ListTileControlAffinity.platform, // radio组件布局位置
contentPadding: EdgeInsets.all(8), // 内边距
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
tileColor: Colors.cyan[50], // Tile未选中颜色
selectedTileColor: Colors.cyan[200], // Tile选中颜色
visualDensity: VisualDensity(
horizontal: -4, vertical: -4), // 紧凑程度，VisualDensity -4～4
focusNode: FocusNode(skipTraversal: true), // 焦点控制
enableFeedback: true, // 是否给予按压反馈
// 点击事件回调
onChanged: (int? value) {
_radioGroupValue = value;
// 重新Build
(context as Element).markNeedsBuild();
},
);
}
_buildSwitchListTile(BuildContext context) {
return SwitchListTile(
value: _switchValue1, // value = true 时为打开状态，false 关闭
tileColor: Colors.cyan[50], // Tile未选中颜色
activeColor: Colors.red, // 打开状态下颜色
activeTrackColor: Colors.amber, // 打开状态下轨道颜色
activeThumbImage: AssetImage("assets/images/tx1.jpeg"), // 打开状态下滑块图片
inactiveThumbColor: Colors.grey, // 关闭状态下滑块颜色
inactiveTrackColor: Colors.red[200], // 关闭状态下轨道颜色
inactiveThumbImage: AssetImage("assets/images/tx2.jpeg"), // 关闭状态下滑块图片
title: Text("SwitchListTile - Title",
style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
subtitle: Text("SwitchListTile - Subtitle",
style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
isThreeLine: false, // 是否准备显示3行，默认false
dense: true, // 是否使用缩小布局
contentPadding: EdgeInsets.all(8), // 内边距
secondary: Icon(Icons.pets), // 辅助组件
selected: _switchValue1, // Tile是否选中
autofocus: false, // 自动聚焦，默认为 false
controlAffinity: ListTileControlAffinity.platform, // switch组件 布局位置
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
selectedTileColor: Colors.cyan[200], // Tile选中颜色
visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
focusNode: FocusNode(skipTraversal: true), // 焦点控制
enableFeedback: true, // 是否给予按压反馈
hoverColor: Colors.red, // 悬停颜色 暂未使用
// 点击事件 回调
onChanged: (value) {
_switchValue1 = value;
// 重新Build
(context as Element).markNeedsBuild();
},
);
}
_buildCheckBoxListTile(BuildContext context) {
return CheckboxListTile(
value: _checkBoxValue1, // 是否选中此复选框
activeColor: Colors.red, // 选中时颜色
checkColor: Colors.amber, // 选中时中间✔️颜色
tileColor: Colors.cyan[50], // Tile 未选中时 颜色
title: Text("CheckboxListTile - Title",
style: TextStyle(color: Colors.black87, fontSize: 16)), // Title 组件
subtitle: Text("CheckboxListTile - Subtitle",
style: TextStyle(color: Colors.black38, fontSize: 14)), // Subtitle 组件
isThreeLine: false, // 是否准备显示3行，默认false
dense: true, // 是否使用缩小布局
secondary: Icon(Icons.pets), // 辅助组件
selected: _checkBoxValue1 == true, // Tile是否选中
autofocus: false, // 自动聚焦，默认为 false
controlAffinity: ListTileControlAffinity.platform, // checkBox组件 布局位置
contentPadding: EdgeInsets.all(8), // 内边距
tristate: false, // 三态复选框，默认 false
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), // 形状
selectedTileColor: Colors.cyan[200], // Tile选中颜色
visualDensity: VisualDensity(vertical: -4), // 紧凑程度，VisualDensity -4～4
focusNode: FocusNode(skipTraversal: true), // 焦点控制
enableFeedback: true, // 是否给予按压反馈
side: BorderSide(color: Colors.teal, width: 2.0), // CheckBox 边框
// 点击事件回调
onChanged: (value) {
_checkBoxValue1 = value;
// 重新Build
(context as Element).markNeedsBuild();
},
);
}
}
133.gif
Flutter 之 单选开关和复选框 （五十七）
Flutter 之 Radio （六十）
Flutter 之 ListTite (九十)
Flutter 之 FocusNode （七十三）
