一、常用表单介绍
Flutter 中常见的表单有
- TextField 单行文本框，
- TextField 多行文本框
- CheckBox
- Radio
- Switch CheckboxListTile
- RadioListTile
- SwitchListTile
- Slide
二、TextField 文本框组件
常见属性
| 属性 | 描述 |
|---|---|
| maxLines | 设置此参数可以把文本框改为多行文本框 |
| onChanged | 文本框改变的时候触发的事件 |
| decoration | hintText border labelText labelStyle 类似 html 中的 placeholder 配置文本框边框 OutlineInputBorder 配合使用 lable 的名称 配置 lable 的样式 |
| obscureText | 把文本框框改为密码框 |
| controller | controller 结合 TextEditingController()可以配置表单默认显示的内容 |
示例1
TextField(
maxLines: 10,
// obscureText: true,
decoration: InputDecoration(
hintText: "密码框",
border: OutlineInputBorder()
)
)
示例2
String _username = TextEditingController();
void initState() {
// TODO: implement initState
super.initState();
_username.text = '这是文本框初始值';
}
TextField(
controller: _username,
onChanged: (value){
// print(value);
setState(() {
this._username.text=value;
});
},
decoration: InputDecoration(
hintText: "请输入您的内容",
),
)
三、Checkbox 单选框组件
常见属性
| 属性 | 描述 |
|---|---|
| value | true 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| checkColor | 选中的颜色、Checkbox 里面对号的颜色 |
示例1
Checkbox(
value: _isSelected,
onChanged: (v) {
// print(v);
setState(() {
this._isSelected = v;
});
},
activeColor: Colors.red,
checkColor:Colors.blue
)
四、CheckboxListTile 多选框组件
常见属性
| 属性 | 描述 |
|---|---|
| value | true 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| selected | 选中的时候文字颜色是否跟着改变 |
示例
CheckboxListTile(
value: _isSelected,
title: Text("Flutter开发指南"),
subtitle: Text("CheckboxListTile 多选框组件"),
onChanged: (v){
setState(() {
this._isSelected = v;
});
},
activeColor: Colors.red,
secondary: Image.network("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png"),
selected: _isSelected
)
五、Radio 单选按钮组件
常用属性
| 属性 | 描述 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
| groupValue | 选择组的值 |
示例
int _groupValue = 1;
Radio(
value: 0,
onChanged: (v) {
setState(() {
this._groupValue = v;
});
},
activeColor: Colors.red,
groupValue: _groupValue
),
Radio(
value: 1,
onChanged: (v) {
setState(() {
this._groupValue = v;
});
},
activeColor: Colors.red,
groupValue:_groupValue
)
六、RadioListTile 多选按钮组件
常用属性
| 属性 | 描述 |
|---|---|
| value | true 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| groupValue | 选择组的值 |
示例
int _groupValue = 1;
_handelChange(v) {
setState(() {
_groupValue=v;
});
}
RadioListTile(
value: 1,
title: Text("Flutter开发指南"),
subtitle: Text("RadioListTile 多选按钮组件"),
secondary: Image.network("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png"),
groupValue: _groupValue,
onChanged: _handelChange
),
Divider(),
RadioListTile(
value: 0,
title: Container(
height: 60,
child: Text('这是文本'),
color: Colors.red
),
// subtitle: Text("RadioListTile 多选按钮组件"),
secondary: Image.network("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png"),
groupValue: _groupValue,
onChanged: _handelChange
）
六、Switch 开关组件
常用属性
| 属性 | 描述 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
