老規矩,看圖
(一)效果圖


以下代碼復制進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);
});
},
),
),
],
),
),
);
}
}
看不懂的來問我,嘿嘿
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/242435.html
標籤:區塊鏈
上一篇:int切片和string切片為什么不能轉為interface型別的切片
下一篇:創建vue專案
