Flutter 表单介绍
Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、SwitchCheckboxListTile、RadioListTile、SwitchListTile、Slide。
TextField文本框组件
TextField表单的基本用法
TextField表单常见属性：
| 属性 | 描述 |
|---|---|
| maxLines | 设置此参数可以把文本框改为多行文本框 |
| onChanged | 文本框改变的时候触发的事件 |
| onChanged | hintText 类似html中的placeholder border 配置文本框边框OutlineInputBorder配合使用 labelText lable的名称 labelStyle 配置lable的样式 |
| obscureText | 把文本框框改为密码框 |
| controller | controller 结合TextEditingController()可以配置表单默认显示的内容 |
import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({super.key, required this.arguments,});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
@override
void initState() {
// TODO: implement initState
super.initState();
print(widget.arguments);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.arguments['title']),
),
body: ListView(
padding: const EdgeInsets.all(10.0),
children: const [
TextField(),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder()
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入用户名',
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入用户名',
labelText: '用户名',
),
),
SizedBox(height: 10.0),
TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入密码',
labelText: '密码',
),
),
SizedBox(height: 10.0),
TextField(
maxLines: 4,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '多行文本框',
labelText: '多行文本框',
),
),
SizedBox(height: 10.0),
// 带清空按钮的文本框
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入用户名',
labelText: '用户名',
suffixIcon: Icon(Icons.close),
),
),
SizedBox(height: 10.0),
// 在文本框前面添加图标
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入用户名',
labelText: '用户名',
prefixIcon: Icon(Icons.people),
),
),
SizedBox(height: 10.0),
// 在文本框外面添加图标
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入用户名',
labelText: '用户名',
icon: Icon(Icons.people),
),
),
SizedBox(height: 10.0),
// 请输入网址
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '请输入网址',
labelText: '网址',
prefixText: 'https://',
prefixIcon: Icon(Icons.web),
icon: Icon(Icons.web),
),
),
],
),
);
}
}
获取TextField表单输入的内容
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
String username = '';
String password = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('登录'),),
body: ListView(
padding: const EdgeInsets.all(10.0),
children: [
TextField(
onChanged: (value) {
setState(() {
username = value;
});
},
decoration: const InputDecoration(
labelText: '用户名',
hintText: '请输入用户名',
prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
),
),
const SizedBox(height: 10.0),
TextField(
onChanged: (value) {
setState(() {
password = value;
});
},
obscureText: true,
decoration: const InputDecoration(
labelText: '密码',
hintText: '请输入密码',
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(),
),
),
const SizedBox(height: 10.0),
ElevatedButton(
onPressed: () {
print('用户名：$username');
print('密码：$password');
Navigator.pushNamed(context, '/');
},
child: const Text('登录'),
),
],
),
);
}
}
TextEditingController 配置初始化值
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
late TextEditingController _usernameController;
late TextEditingController _passwordController;
String username = '';
String password = '';
@override
void initState() {
super.initState();
// 初始化给表单赋值
_usernameController = TextEditingController.fromValue(
TextEditingValue(
text: 'admin',
selection: TextSelection.fromPosition(
const TextPosition(
affinity: TextAffinity.downstream,
offset: 'admin'.length,
),
),
)
);
_passwordController = TextEditingController(text: password);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('登录'),),
body: ListView(
padding: const EdgeInsets.all(10.0),
children: [
TextField(
controller: _usernameController,
onChanged: (value) {
setState(() {
username = value;
});
},
decoration: const InputDecoration(
labelText: '用户名',
hintText: '请输入用户名',
prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
),
),
const SizedBox(height: 10.0),
TextField(
controller: _passwordController,
onChanged: (value) {
setState(() {
password = value;
});
},
obscureText: true,
decoration: const InputDecoration(
labelText: '密码',
hintText: '请输入密码',
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(),
),
),
const SizedBox(height: 10.0),
ElevatedButton(
onPressed: () {
print('用户名：$username');
print('密码：$password');
Navigator.pushNamed(context, '/');
},
child: const Text('登录'),
),
],
),
);
}
}
Radio单选按钮组
import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({
super.key,
required this.arguments,
});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
int sex = 1;
_radioChange(value) {
setState(() {
this.sex = value;
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
print(widget.arguments);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.arguments['title']),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('男'),
Radio(
value: 1,
groupValue: sex,
onChanged: _radioChange,
),
const Text('女'),
Radio(
value: 2,
groupValue: sex,
onChanged: _radioChange,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text("$sex"), Text(sex == 1 ? "男" : "女")],
),
],
));
}
}
RadioListTile单选按钮组
import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({
super.key,
required this.arguments,
});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
int sex = 1;
int flag = 1;
_radioChange(value) {
setState(() {
this.sex = value;
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
print(widget.arguments);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.arguments['title']),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RadioListTile(
title: const Text('已完成'),
value: 1,
groupValue: flag,
onChanged: (value) {
setState(() {
flag = value as int;
});
},
),
RadioListTile(
title: const Text('未完成'),
value: 0,
groupValue: flag,
onChanged: (value) {
setState(() {
flag = value as int;
});
},
),
],
));
}
}
CheckBox
import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({
super.key,
required this.arguments,
});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
int sex = 1;
bool flag = true;
final List _hobby = [
{'checked': true, 'title': '吃饭'},
{'checked': false, 'title': '睡觉'},
{'checked': true, 'title': '写代码'},
];
List<Widget> _initHobby(){
List<Widget> tempList = [];
for(var i = 0; i < _hobby.length; i++){
tempList.add(
Row(
children: [
Text(_hobby[i]['title']),
Checkbox(
value: _hobby[i]['checked'],
onChanged: (value){
setState(() {
_hobby[i]['checked'] = value!;
});
})
],
)
);
}
return tempList;
}
_radioChange(value) {
setState(() {
this.sex = value;
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
print(widget.arguments);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.arguments['title']),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _initHobby(),
));
}
}
CheckboxListTile
import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({
super.key,
required this.arguments,
});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
int sex = 1;
bool flag = true;
final List _hobby = [
{'checked': true, 'title': '吃饭'},
{'checked': false, 'title': '睡觉'},
{'checked': true, 'title': '写代码'},
];
List<Widget> _getHobby() {
List<Widget> tempList = [];
for (var i = 0; i < _hobby.length; i++) {
tempList.add(
CheckboxListTile(
title: Text(_hobby[i]["title"]),
value: _hobby[i]["checked"],
onChanged: (value) {
setState(() {
_hobby[i]["checked"] = value;
});
}),
);
}
return tempList;
}
_radioChange(value) {
setState(() {
this.sex = value;
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
print(widget.arguments);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.arguments['title']),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _getHobby(),
));
}
}
Switch
import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({
super.key,
required this.arguments,
});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
bool flag = true;
@override
void initState() {
// TODO: implement initState
super.initState();
print(widget.arguments);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.arguments['title']),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Switch(value: flag, onChanged: (value){
setState(() {
flag = value;
});
}),
],
));
}
}