Flutter 中常见的表单有 TextField 单行文本框，TextField 多行文本框、CheckBox、Radio、Switch CheckboxListTile、RadioListTile、SwitchListTile、Slide.
扩展小知识点：占据整行
width: double.infinity
1 TextField
import 'package:flutter/material.dart';
class TextFieldDemoPage extends StatefulWidget {
TextFieldDemoPage({Key key}) : super(key: key);
_TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}
class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
var _username = new TextEditingController(); //初始化的时候给表单赋值
var _password = new TextEditingController();
@override
void initState() {
// TODO: implement initState
super.initState();
_username.text = '初始值';
_password.text = '初始值';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('表单演示页面'),
),
body: Padding(
padding: EdgeInsets.all(20),
child: TextDemo(),
// child: Column(
// children: <Widget>[
// TextField(
// decoration: InputDecoration(hintText: "请输入用户名"),
// controller: _username,
// onChanged: (value) {
// setState(() {
// _username.text = value;
// });
// },
// ),
// SizedBox(height: 10),
// TextField(
// obscureText: true,
// decoration: InputDecoration(hintText: "密码"),
// controller: _password,
// onChanged: (value) {
// setState(() {
// this._password.text = value;
// });
// },
// ),
// SizedBox(height: 40),
// Container(
// width: double.infinity,
// height: 40,
// child: RaisedButton(
// child: Text("登录"),
// onPressed: () {
// print(this._username.text);
// print(this._password.text);
// },
// color: Colors.blue,
// textColor: Colors.white,
// ),
// )
// ],
// ),
));
}
}
class TextDemo extends StatelessWidget {
const TextDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
TextField(),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
hintText: "请输入搜索的内容", border: OutlineInputBorder()),
),
SizedBox(height: 20),
TextField(
maxLines: 4,
maxLength: 200,
decoration: InputDecoration(
hintText: "多行文本框", border: OutlineInputBorder()),
),
SizedBox(height: 20),
TextField(
obscureText: true,
decoration:
InputDecoration(hintText: "密码框", border: OutlineInputBorder()),
),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: "用户名")),
SizedBox(height: 20),
TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "密码",
// labelStyle: TextStyle()
)),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
icon: Icon(Icons.people), hintText: "请输入用户名")),
],
),
);
}
}
效果
2 Checkbox、CheckboxListTile
import 'package:flutter/material.dart';
class TextFieldDemoPage extends StatefulWidget {
TextFieldDemoPage({Key key}) : super(key: key);
_TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}
class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
var _username = new TextEditingController(); //初始化的时候给表单赋值
var _password = new TextEditingController();
var check = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_username.text = '初始值';
_password.text = '初始值';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('表单演示页面'),
),
body: Padding(
padding: EdgeInsets.all(20),
// child: TextDemo(),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: "请输入用户名"),
controller: _username,
onChanged: (value) {
setState(() {
_username.text = value;
});
},
),
SizedBox(height: 10),
TextField(
obscureText: true,
decoration: InputDecoration(hintText: "密码"),
controller: _password,
onChanged: (value) {
setState(() {
this._password.text = value;
});
},
),
SizedBox(height: 40),
Checkbox(
onChanged: (v) {
setState(() {
this.check = v;
});
},
value: this.check,
activeColor: Colors.orange,
),
CheckboxListTile(
value: this.check,
onChanged: (v) {
setState(() {
this.check = v;
});
},
title: Text('标题'),
subtitle: Text('副标题'),
secondary: Image.asset("images/a.jpeg", fit: BoxFit.cover),
selected: this.check,
),
Divider(),
CheckboxListTile(
value: this.check,
onChanged: (v) {
setState(() {
this.check = v;
});
},
title: Text('标题'),
subtitle: Text('副标题'),
),
Divider(),
SizedBox(height: 40),
Container(
width: double.infinity,
height: 40,
child: RaisedButton(
child: Text("登录"),
onPressed: () {
print(this._username.text);
print(this._password.text);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
));
}
}
3 Radio、RadioListTile
import 'package:flutter/material.dart';
class TextFieldDemoPage extends StatefulWidget {
TextFieldDemoPage({Key key}) : super(key: key);
_TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}
class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
var _username = new TextEditingController(); //初始化的时候给表单赋值
var _password = new TextEditingController();
var radioVal = 1;
@override
void initState() {
// TODO: implement initState
super.initState();
_username.text = '初始值';
_password.text = '初始值';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('表单演示页面'),
),
body: Padding(
padding: EdgeInsets.all(20),
// child: TextDemo(),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: "请输入用户名"),
controller: _username,
onChanged: (value) {
setState(() {
_username.text = value;
});
},
),
SizedBox(height: 10),
TextField(
obscureText: true,
decoration: InputDecoration(hintText: "密码"),
controller: _password,
onChanged: (value) {
setState(() {
this._password.text = value;
});
},
),
SizedBox(height: 40),
Radio(
onChanged: (v) {
setState(() {
this.radioVal = v;
});
},
value: 1,
activeColor: Colors.orange,
groupValue: this.radioVal,
),
Radio(
onChanged: (v) {
setState(() {
this.radioVal = v;
});
},
value: 2,
activeColor: Colors.orange,
groupValue: this.radioVal,
),
RadioListTile(
value: 1,
onChanged: (v) {
setState(() {
this.radioVal = v;
});
},
title: Text('标题'),
subtitle: Text('副标题'),
secondary: Image.asset("images/a.jpeg", fit: BoxFit.cover),
selected: this.radioVal == 1,
groupValue: this.radioVal,
),
Divider(),
RadioListTile(
value: 2,
onChanged: (v) {
setState(() {
this.radioVal = v;
});
},
title: Text('标题'),
subtitle: Text('副标题'),
selected: this.radioVal == 2,
groupValue: this.radioVal,
),
Divider(),
SizedBox(height: 40),
Container(
width: double.infinity,
height: 40,
child: RaisedButton(
child: Text("登录"),
onPressed: () {
print(this._username.text);
print(this._password.text);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
));
}
}
效果
4 Switch
Switch(
onChanged: (v) {},
value: true,
),
5 综合实例
import 'package:flutter/material.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
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(10),
child: Column(
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,
child: Wrap(
alignment: WrapAlignment.start,
children: <Widget>[
Container(
width: 120,
color: Colors.pink,
child: Row(
children: <Widget>[
Text('shuijiao'),
Checkbox(
value: this.hobby[1]['checked'],
onChanged: (v) {
setState(() {
this.setState(() {
this.hobby[1]['checked'] = v;
});
});
}),
],
),
),
Container(
width: 120,
child: Row(
children: <Widget>[
Text('shuijiao'),
Checkbox(
value: this.hobby[1]['checked'],
onChanged: (v) {
setState(() {
this.setState(() {
this.hobby[1]['checked'] = v;
});
});
}),
],
),
),
],
),
),
SizedBox(height: 40),
Container(
width: double.infinity,
height: 40,
child: RaisedButton(
child: Text("提交信息"),
onPressed: () {
print(this.sex);
print(this.username);
print(this.hobby);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
),
);
}
}
效果
网友评论