本文详细介绍了Flutter中的Material组件，包括Radio、RadioListTile、Switch、SwitchListTile、CheckBox和CheckboxListTile的属性、用法及示例代码。这些组件用于创建具有Material设计风格的单选按钮、开关和复选框，并展示了如何在状态管理中使用它们。
文章目录
Material widgets库中提供了Material风格的单选按钮Radio、开关Switch和复选框Checkbox都继承自StatefulWidget。它们本身不会维护任何state状态，般都是在父widget中管理选中状态。当state状态改变时，他们会触发onChanged回调。
1 Radio
1.1 Radio组件的常用属性
| 属性 | 作用 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
| groupValue | 选择组的值 |
1.2 代码示例
import 'package:flutter/material.dart';
/// create at
/// by laohe(老贺)
/// describe：Radio组件
class RadioButtonWidget extends StatefulWidget {
@override
_RadioButtonWidgetState createState() => _RadioButtonWidgetState();
}
class _RadioButtonWidgetState extends State<RadioButtonWidget> {
int sex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("RadioButtonWidget")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("男："),
Radio(
value: 1,
groupValue: this.sex,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
),
SizedBox(width: 20),
Text("女："),
Radio(
value: 2,
groupValue: this.sex,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("你选择的是${this.sex == 1 ? "男" : "女"}")
],
)
],
),
);
}
}
1.3运行结果
2 RadioListTile组件
RadioListTile是Flutter提供的一种针对ListView的单选组件，同样也是继承自StatefulWidget。
2.1RadioListTile属性
| 属性 | 作用 |
|---|---|
| value | rue 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| groupValue | 选择组的值 |
2.2 示例代码
import 'package:flutter/material.dart';
/// create at
/// by laohe(老贺)
/// describe：RadioListTileWidget
class RadioListTileWidget extends StatefulWidget {
RadioListTileWidget({Key key}) : super(key: key);
@override
_RadioListTileWidgetState createState() => _RadioListTileWidgetState();
}
class _RadioListTileWidgetState extends State<RadioListTileWidget> {
int sex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("RadioListTile")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
RadioListTile(
value: 1,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
groupValue: this.sex,
title: Text("一级标题"),
subtitle: Text("二级标题"),
secondary: Icon(Icons.camera),
selected: this.sex == 1,
),
RadioListTile(
value: 2,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
groupValue: this.sex,
title: Text("一级标题"),
subtitle: Text("二级标题"),
secondary: Icon(Icons.palette),
selected: this.sex == 2,
),
],
),
);
}
}
2.3 运行效果
3 Switch组件
- 本身也是没有存储状态的 Widget 。需要通过有状态的父 Widget 来控制状态。
- 当 Switch 状态发生变化的时候 onChanged 会被调用 ， 回调的参数是 bool ，true 表示 选中。 false 表示未选中
- 如果onChange回调为空null，Switch被禁止使用。
- value 属性 表示 是否打开，通过控制这个来控制 Switch 的状态
- 能点击。能滑动
3.1 Switch组件属性
| 属性 | 作用 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
3.2 代码示例
import 'package:flutter/material.dart';
/// create at
/// by laohe(老贺)
/// describe：SwitchWidget
class SwitchWidget extends StatefulWidget {
SwitchWidget({Key key}) : super(key: key);
@override
_SwitchWidgetState createState() => _SwitchWidgetState();
}
class _SwitchWidgetState extends State<SwitchWidget> {
bool flag = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("SwitchWidget")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Switch(
value: this.flag,
activeColor: Colors.blue,
onChanged: (value) {
setState(() {
this.flag = value;
});
},
),
Text("此时的状态是${this.flag == true ? "已选中" : "未选中"}")
],
)
);
}
}
3.3 运行效果
4 SwitchListTile
SwitchListTile继承StatelessWidget，配合ListView使用的 “带标题的开关”组件。
4.1SwitchListTile属
| 属性 | 作用 |
|---|---|
| value | 是否选中 是否打开 |
| onChanged | 当打开关闭的时候的回调 |
| activeColor | 选中时 滑块的颜色 |
| activeTrackColor | 选中时 滑道的颜色 |
| inactiveThumbColor | 未选中时 滑块的颜色 |
| inactiveTrackColor | 未选中时 滑道的颜色 |
| activeThumbImage | 选中时 滑块的图片 |
| inactiveThumbImage | 未选中时 滑块的图片 |
| title | 标题 典型的是 Text |
| subtitle | 副标题 在标题下面的 典型的是 Text |
| isThreeLine = false | 是不是三行， true 时： subtitle 不能为null， false时可以为 null |
| dense | 是否垂直密集居中 |
| secondary | 左边的一个东西 |
| selected = false | 如果为 true ，则 text 和 icon 都用 activeColor 时的color |
4.2 SwitchListTile示例代码
import 'package:flutter/material.dart';
/// create at
/// by laohe(老贺)
/// describe：SwitchListTileWidget
class SwitchListTileWidget extends StatefulWidget {
SwitchListTileWidget({Key key}) : super(key: key);
@override
_SwitchListTileWidgetState createState() => _SwitchListTileWidgetState();
}
class _SwitchListTileWidgetState extends State<SwitchListTileWidget> {
bool _isCheck = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("SwitchListTileWidget")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SwitchListTile(
// 是否选中 是否打开
value: _isCheck,
// 当打开关闭的时候的回调
onChanged: (value){
setState(() {
_isCheck = value;
});
},
// 选中时 滑块的颜色
activeColor: Colors.red,
// 选中时 滑道的颜色
activeTrackColor: Colors.black,
// 选中时 滑块的图片
// activeThumbImage: AssetImage("images/hashiqi.jpg"),
// 未选中时 滑块的颜色
inactiveThumbColor: Colors.green,
// 未选中时 滑道的颜色
inactiveTrackColor: Colors.amberAccent,
// 未选中时 滑块的颜色
inactiveThumbImage: AssetImage("images/test.png"),
// 标题
title: Text("标题"),
// 副标题 在标题下面的
// subtitle: Text("副标题"),
// 是不是三行， true 时： subtitle 不能为null， false时可以为 null
// isThreeLine: true,
// 如果为 true ，则 text 和 icon 都用 activeColor 时的color
// selected: true,
// 是否垂直密集居中
dense: true,
// 左边的一个东西
secondary: Icon(Icons.access_time),
),
],
),
);
}
}
4.3 运行效果
5 CheckBox组件
CheckBox 勾选框，继承于 StatefulWidget, 所以本身他是没有状态的 Widget ，一般都是在 父 控件中加入有状态的控件来给他设置。
5.1 CheckBox组件属性
| 属性 | 作用 |
|---|---|
| value | 这个值不能是null(除非上面 tristate 是true) ， 用来设置 此 checkbox 是否选中 |
| onChanged | 是否选中发生变化时的回调， 回调的 bool 值 就是是否选中 ，true 就是选中 |
| activeColor | 勾选后 勾选框填充的颜色 默认是 ThemeData.toggleableActiveColor |
| checkColor | 对勾的颜色 默认的是白色 |
| materialTapTargetSize | 配置tap目标的最小大小 |
| tristate | 默认这个是false，此时 value 必定不能是null， 可以设置 为 true，此时 value 可以是任意值 |
5.2 示例代码
import 'package:flutter/material.dart';
/// create at
/// by laohe(老贺)
/// describe：CheckBoxWidget
class CheckBoxWidget extends StatefulWidget {
CheckBoxWidget({Key key}) : super(key: key);
@override
_CheckBoxWidgetState createState() => _CheckBoxWidgetState();
}
class _CheckBoxWidgetState extends State<CheckBoxWidget> {
bool _isCheck;
bool _isMale;
bool _isFemale;
@override
void initState() {
super.initState();
_isCheck = false;
_isMale = true;
_isFemale = false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("CheckBoxWidget")),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("1：普通Checkbox isCheck:$_isCheck",
style: TextStyle(fontWeight: FontWeight.bold)),
Checkbox(
// tristate: true,
/// 这个值不能是null(除非上面 tristate 是true)用来设置此checkbox 是否选中
value: _isCheck,
/// 勾选后 勾选框填充的颜色 默认是 ThemeData.toggleableActiveColor
activeColor: Colors.red,
/// 对勾的颜色 默认的是白色
checkColor: Colors.blue,
/// 是否选中发生变化时的回调， 回调的 bool 值 就是是否选中
/// true 就是选中
onChanged: (isCheck) {
_isCheck = isCheck;
//改变_CheckBoxState
setState(() {});
},
),
Text("2: 用checkbox实现单选 选中:"+getSelected(),
style: TextStyle(fontWeight: FontWeight.bold)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Text("男"),
Checkbox(
value: _isMale,
onChanged: (isMan) {
setState(() {
if (isMan) {
_isMale = true;
_isFemale = false;
}
});
},
)
],
),
SizedBox(
width: 20,
),
Row(
children: <Widget>[
Text("女"),
Checkbox(
value: _isFemale,
onChanged: (isFemale) {
setState(() {
if (isFemale) {
_isFemale = true;
_isMale = false;
}
});
},
)
],
)
],
),
],
),
);
}
String getSelected(){
return _isMale==true?"男":"女";
}
}
5.3 运行效果
6 CheckboxListTile组件
自带标题和副标题CheckboxListTile选择框，继承自
6.1 CheckboxListTile组件属性
| 属性 | 作用 |
|---|---|
| value | 是否选中此复选框 |
| onChanged | 监听 当复选框的值应该更改时调用 |
| activeColor | 选中此复选框时要使用的颜色 |
| title | 列表主标题 |
| subtitle | 列表副标题 |
| isThreeLine | 默认false |
| dense | 此列表平铺是否是垂直密集列表的一部分。 |
| secondary | 显示在复选框前面的小部件 |
| selected | 选中后文字高亮，默认false |
| controlAffinity | 控件相对于文本的位置，默认 ListTileControlAffinity.platform |
6.2 CheckboxListTile组件示例代码
import 'package:flutter/material.dart';
/// create at
/// by laohe(老贺)
/// describe：CheckboxListTileWidget
class CheckboxListTileWidget extends StatefulWidget {
CheckboxListTileWidget({Key key}) : super(key: key);
@override
_CheckboxListTileState createState() => _CheckboxListTileState();
}
class _CheckboxListTileState extends State<CheckboxListTileWidget> {
bool _value01 = false;
bool _value02 = false;
@override
Widget build(BuildContext context) {
String result01 = _value01?"是":"否";
String result02 = _value02?"是":"否";
return Scaffold(
appBar: AppBar(title: Text("CheckboxListTileWidget")),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CheckboxListTile(
secondary: const Icon(Icons.alarm_on),
title: Text('每天6：10 响铃:'+result01),
subtitle: Text('12小时58分钟后响铃'),
value: _value01,
onChanged: (bool value) {
setState(() {
_value01 = value;
});
},
),
CheckboxListTile(
secondary: const Icon(Icons.alarm_on),
title: Text('每天8：00 上课:'+result02),
subtitle: Text('10小时48分钟后响铃'),
value: _value02,
onChanged: (bool value) {
setState(() {
_value02 = value;
});
},
),
],
)
);
}
}
6.3 运行效果
小结
通过上面的选择组件我们可以看到，虽然它们本身是与状态（是否选中）相关联的，但它们却不是自己来维护状态，而是通过父Widget来管理状态。然后当用户点击时，再通过事件将选择状态通知给父Widget。这样是合理的，因为是否选中本就和用户数据相关联，而这些用户数据也不可能是它们的私有状态，所以我们在自定义Widget时也要思考一下哪种状态的管理方式最为合理。
github源码地址
如果感觉总结还可以，辛苦star！！！
扫一扫
1443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
