老规矩,看图
(一)效果图
以下代码复制进main.dart文件即可运行
(二)代码实现
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: FormDemoPage()//入口函数
);
}
}
class FormDemoPage extends StatefulWidget {
@override
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
String username;
int sex;
String info;
List hobby = [
{
"checked": true,
"title": '吃饭',
},
{
"checked": true,
"title": 'master',
},
];
List<Widget> _getHobby() {
List<Widget> tempList = [];
for (var i = 0; i < this.hobby.length; i++) {
tempList.add(Row(children: [
Text(
this.hobby[i]["title"] + ":",
),
Checkbox(
value: this.hobby[i]["checked"],
onChanged: (v) {
setState(() {
this.hobby[i]["checked"] = v;
});
},
)
]));
return tempList;
}
}
void _sexChange(v) {
setState(() {
this.sex = v;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'学员信息登记表',
),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: "请输入用户名",
),
),
Row(
children: [
Text("男"),
Radio(
value: 1,
groupValue: this.sex,
onChanged: this._sexChange,
),
SizedBox(
height: 10,
),
Text("女"),
Radio(
value: 2,
groupValue: this.sex,
onChanged: this._sexChange,
),
],
),
SizedBox(
height: 10,
),
Wrap(
children: _getHobby(),
),
TextField(
maxLines: 4,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "描述信息",
),
onChanged: (v) {
setState(() {
this.info = v;
});
},
),
SizedBox(
height: 10,
),
Container(
width: double.infinity,
height: 40,
child: RaisedButton(
child: Text("提交信息"),
onPressed: () {
setState(() {
print(this.username);
print(this.sex);
print(this.hobby);
});
},
),
),
],
),
),
);
}
}
看不懂的来问我,嘿嘿