Flutter中的表单组件
Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide.
一、TextField文本框组件
TextField表单常见属性：
| 属性 | 描述 |
|---|---|
| maxLines | 设置此参数可以把文本框改为多行文本框 |
| onChanged | 文本框改变的时候触发的事件 |
| decoration | hintText 类似html中的placeholderborder 配置文本框边框 OutlineInputBorder配合使用labelText lable的名称labelStyle 配置lable的样式 |
| obscureText | 把文本框框改为密码框 |
| controller | controller 结合TextEditingController()可以配置表单默认显示的内容 |
TextField(
maxLines: 10,
// obscureText: true,
decoration: InputDecoration(
hintText: "密码框",
border: OutlineInputBorder()
)
)
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、CheckboxListTile多选框组件
Checkbox常见属性：
| 属性 | 描述 |
|---|---|
| value | true或者false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| checkColor | 选中的颜色、Checkbox里面对号的颜色 |
CheckboxListTile常见属性：
| 属性 | 描述 |
|---|---|
| value | true或者false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| selected | 选中的时候文字颜色是否跟着改变 |
Checkbox(
value: _isSelected,
onChanged: (v) {
// print(v);
setState(() {
this._isSelected=v;
});
},
activeColor: Colors.red,
checkColor:Colors.blue
)
CheckboxListTile(
value: _isSelected,
title: Text("nodejs视频教程"),
subtitle: Text("egg.js视频教程"),
onChanged: (v){
setState(() {
this._isSelected=v;
});
},
activeColor: Colors.red,
secondary: Image.network("https://www.itying.com/images/flutter/1.png"),
selected:_isSelected
)
三、Radio、RadioListTile单选按钮组件
Radio 常用属性：
| 属性 | 描述 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
| groupValue | 选择组的值 |
RadioListTile 常用属性：
| 属性 | 描述 |
|---|---|
| value | true或者false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| 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 ,
)
int _groupValue=1;
_handelChange(v){
setState(() {
_groupValue=v;
});
}
RadioListTile(
value: 1,
title: Text("nodejs视频教程"),
subtitle: Text("egg.js视频教程"),
secondary: Image.network("https://www.itying.com/images/flutter/1.png"),
groupValue:_groupValue ,
onChanged: _handelChange,
),
Divider(),
RadioListTile(
value: 0,
title: Container(
height: 60,
child: Text('这是文本'),
color: Colors.red,
),
// subtitle: Text("egg.js视频教程"),
secondary: Image.network("https://www.itying.com/images/flutter/1.png"),
groupValue:_groupValue ,
onChanged: _handelChange,
)
四、开关Switch
| 属性 | 描述 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
Switch(
value: this.flag,
onChanged: (v) {
setState(() {
print(v);
this.flag = v;
});
},
)
Flutter中的表单组件完整demo
import 'package:flutter/material.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key? key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
late String username;
int sex=1;
String info='';
List hobby=[
{
"checked":true,
"title":"吃饭"
},
{
"checked":false,
"title":"睡觉"
},
{
"checked":true,
"title":"写代码"
}
];
List<Widget> _getHobby(){
List<Widget> tempList=[];
for(var i=0;i<this.hobby.length;i++){
tempList.add(
Row(
children: <Widget>[
Text(this.hobby[i]["title"]+":"),
Checkbox(
value: this.hobby[i]["checked"],
onChanged: (value){
setState(() {
this.hobby[i]["checked"]=value;
});
}
)
],
)
);
}
return tempList;
}
void _sexChanged(value){
setState(() {
this.sex=value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("学员信息登记系统"),
),
body: Padding(
padding: EdgeInsets.all(20),
child: ListView(
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "输入用户信息"
),
onChanged: (value){
setState(() {
this.username=value;
});
},
),
SizedBox(height:10),
Row(
children: <Widget>[
Text("男"),
Radio(
value: 1,
onChanged: this._sexChanged,
groupValue: this.sex
),
SizedBox(width: 20),
Text("女"),
Radio(
value: 2,
onChanged:this._sexChanged,
groupValue: this.sex
)
],
),
//爱好
SizedBox(height:40),
Column(
children: this._getHobby(),
),
TextField(
maxLines: 4,
decoration: InputDecoration(
hintText: "描述信息",
border: OutlineInputBorder()
),
onChanged: (value){
setState(() {
this.info=value;
});
},
),
SizedBox(height:40),
Container(
width: double.infinity,
height: 40,
child: ElevatedButton(
child: Text("提交信息"),
onPressed: (){
print(this.sex);
print(this.username);
print(this.hobby);
},
),
)
],
),
),
);
}
}
