前面介绍了Flutter的各个表单组件的运用，现将这些组件用来实现一个综合练习。
实现的效果图如下：
以下是代码实现，供大家参考：
代码语言：javascript复制import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
FormPage({Key key}) : super(key: key);
@override
_FormPageState createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
String username ;
int sex=1;
// 用户的爱好集合
List hobby = [
{
"checked":true,
"title":"玩游戏"
},
{
"checked":true,
"title":"写代码"
},
{
"checked":true,
"title":"打豆豆"
}
];
String info = "";
// 姓别选择的回调方法
void _sexChange(value){
setState(() {
this.sex = value;
});
}
List<Widget> _getHobby(){
List <Widget> tempList=[];
for(int 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;
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("信息录入系统"),
),
body:Padding(padding:
EdgeInsets.all(20),
child: Column(
children: <Widget>[
// 单行文本输入框
TextField(
decoration: InputDecoration(
hintText: "请输入用户信息"
),
onChanged: (value){
setState(() {
this.username = value;
});
},
),
SizedBox(height:20),
// 单选按钮
Row(
children:<Widget>[
Text('男'),
Radio(
value:1,
onChanged: this._sexChange,
groupValue: this.sex,
),
SizedBox(width:20),
Text("女"),
Radio(
value:2,
onChanged:this._sexChange,
groupValue:this.sex,
)
]
),
SizedBox(height:20),
// 多选框
Column(
children:this._getHobby(),
),
SizedBox(height:20),
// 多行文本域
TextField(
maxLines: 4,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "请输入备注信息"
),
onChanged:(value){
setState(() {
this.info = value;
});
},
),
SizedBox(height:20),
// 登录按钮
Container(
width:double.infinity,
height:40,
child:RaisedButton(
child: Text("登录"),
onPressed:(){
print(this.sex);
print(this.username);
print(this.hobby);
print(this.info);
},
color:Colors.blue,
textColor:Colors.white
)
)
],
)
)
),
);
}
}
