表单
表单介绍：
常见的表单有 TextField 单行文本框，TextField 多行文本框、CheckBox 、Radio、Switch、CheckboxListTile、RadioListTile、SwitchListTile、Slide。
TextField文本框组件
TextField表单的基本用法
TextField表单常见属性：
| 属性 | 描述 |
|---|---|
| maxLines | 设置此参数可以把文本框改为多行文本框 |
| onChanged | 文本框改变的时候触发的事件 |
| decoration | hintText 类似 html 中的 placeholder border 配置文本框边框 OutlineInputBorder 配合使用 labelText lable 的名称 labelStyle 配置 lable 的样式 |
| obscureText | 把文本框框改为密码框 |
| controller | controller 结合 TextEditingController() 可以配置表单默认显示的内容 |
import 'package:flutter/material.dart';
class TextFieldPage extends StatefulWidget {
const TextFieldPage({super.key});
@override
State<TextFieldPage> createState() => _TextFieldPageState();
}
class _TextFieldPageState extends State<TextFieldPage> {
@overrideWidget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TextField'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(10),
child: ListView(
children: [
const TextField(),
const SizedBox(
height: 20,
),
const TextField(
decoration: InputDecoration(
hintText: "用户名"
)
),
const SizedBox(
height: 20,
),
const TextField(
decoration: InputDecoration(
hintText: "用户名", border: OutlineInputBorder())),
const SizedBox(
height: 10,
),
const TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "密码",
border: OutlineInputBorder(),
suffixIcon:Icon(Icons.visibility)
)
),
const SizedBox(height:40),
TextField(
decoration: InputDecoration(
hintText: "搜索",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: const BorderSide(
width: 5,
color:Colors.yellow
) // BorderSide
),
suffixIcon:const Icon(Icons.close)
)
), // TextField
const SizedBox(height:40),
const TextField(
decoration: InputDecoration(
icon: Icon(Icons.add),
prefixIcon: Icon(Icons.lock),
prefixText: "http://"
) // InputDecoration
), // TextField
const TextField(
decoration: InputDecoration(
icon: Icon(Icons.add),
prefixIcon: Icon(Icons.lock),
prefixText: "http://")
),
],
),
),
),
);
}
}
获取TextField表单输入的内容
import 'package:flutter/material.dart';
class TextFieldPage extends StatefulWidget {
const TextFieldPage({super.key});
@override
State<TextFieldPage> createState() => _TextFieldPageState();
}
class _TextFieldPageState extends State<TextFieldPage> {
late String username;
late String password;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TextField'),
), // AppBar
body: Center(
child: Padding(
padding: const EdgeInsets.all(10),
child: ListView(
children: [
TextField(
decoration: const InputDecoration(
hintText: "用户名",
border: OutlineInputBorder()
),
onChanged: (value) => setState(() {
username = value;
}
),
), // TextField
const SizedBox(
height: 10,
), // SizedBox
TextField(
obscureText: true,
decoration: const InputDecoration(
hintText: "密码",
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.visibility)
),
onChanged: (value) {
password=value;
},
),
const SizedBox(height: 40),
ElevatedButton(
onPressed: (){
print(username);
print(password);
},
child: const Text("获取信息")
) // ElevatedButton
],
), // ListView
), // Padding
), // Center
);
}
}
TextEditingController 配置初始化值
核心代码
late TextEditingController _usernameController;
String username = "zhangsan";
@override
void initState() {
super.initState();
_usernameController = TextEditingController.fromValue(
TextEditingValue(
text: username,
selection: TextSelection.fromPosition(
TextPosition(
affinity: TextAffinity.downstream,
offset: username.length
) // TextPosition
)
) // TextEditingValue
);
}
完整代码
import 'package:flutter/material.dart';
class TextFieldPage extends StatefulWidget {
const TextFieldPage({super.key});
@override
State<TextFieldPage> createState() => _TextFieldPageState();
}
class _TextFieldPageState extends State<TextFieldPage> {
late TextEditingController _usernameController;
String username = "zhangsan";
String password = "";
@override
void initState() {
super.initState();
_usernameController = TextEditingController.fromValue(
TextEditingValue(
text: username,
selection: TextSelection.fromPosition(
TextPosition(
affinity: TextAffinity.downstream, offset: username.length
)
)
)
);
}
@override
void dispose() {
_usernameController.dispose();super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TextField'),
), // AppBar
body: Center(
child: Padding(
padding: const EdgeInsets.all(10),
child: ListView(
children: [
TextField(
controller: _usernameController,
decoration: const InputDecoration(
hintText: "用户名", border: OutlineInputBorder()
),
onChanged: (value) => setState(() {
username = value;
}),
),
const SizedBox(
height: 10,
),
TextField(
obscureText: true,
decoration: const InputDecoration(
hintText: "密码",
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.visibility)
),
onChanged: (value) {
password = value;
},
), // TextField
const SizedBox(height: 40),
ElevatedButton(
onPressed: () {
print(username);
print(password);
},
child: const Text("登录")
) // ElevatedButton
],
), // ListView
), // Padding
), // Center
); // Scaffold
}
}
Radio单选按钮组
import 'package:flutter/material.dart';
import 'package:flutter36/main.dart';
class RadioPage extends StatefulWidget {
const RadioPage({super.key});
@override
State<RadioPage> createState() => _RadioPageState();
}
class _RadioPageState extends State<RadioPage> {
int sex = 1;
_radioChange(value) {
setState(() {
sex = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Radio"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text("男:"),
Radio(
value: 1,
onChanged: _radioChange,
groupValue: sex,
),
const SizedBox(width: 20),
const Text("女:"),
Radio(
value: 2,
onChanged: _radioChange,
groupValue: sex,
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("$sex"),
Text(sex == 1 ? "男" : "女")
],
),
],
),
);
}
}
RadioListTile单选按钮组
RadioListTile(
title: Text("男"),
value: 1,
groupValue: sex,
onChanged: _radioChange
),
RadioListTile(
title: Text("女"),
value: 2,
groupValue: sex,
onChanged: _radioChange
)
CheckBox
多选按钮
import 'package:flutter/material.dart';
class CheckboxPage extends StatefulWidget {
const CheckboxPage({super.key});
@override
State<CheckboxPage> createState() => _CheckboxPageState();
}
class _CheckboxPageState extends State<CheckboxPage> {
bool _flag=true;
_onChanged(value){
setState(() {
_flag=!_flag;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Checkbox'),
), // AppBar
body: Center(
child: Column(
children: [
Checkbox(value: _flag, onChanged: _onChanged)
],
),
), // Center
); // Scaffold
}
}
多选按钮组
import 'package:flutter/material.dart';
class CheckboxPage extends StatefulWidget {
const CheckboxPage({super.key});
@override
State<CheckboxPage> createState() => _CheckboxPageState();
}
class _CheckboxPageState extends State<CheckboxPage> {
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(
Row(
children: <Widget>[
Text(_hobby[i]["title"] + ":"),
Checkbox(
value: _hobby[i]["checked"],
onChanged: (value) {
setState(() {
_hobby[i]["checked"] = value;
});
}
)
],
)
);
}
return tempList;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Checkbox'),
),
body: Center(
child: ListView(
padding: const EdgeInsets.all(5),
children: [
const SizedBox(height: 40),
Column(
children: _getHobby(),
),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
print(_hobby);
},
child: Text("获取爱好")
)
],
),
),
);
}
}
CheckboxListTile
import 'package:flutter/material.dart';
class CheckboxPage extends StatefulWidget {
const CheckboxPage({super.key});
@override
State<CheckboxPage> createState() => _CheckboxPageState();
}
class _CheckboxPageState extends State<CheckboxPage> {
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;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Checkbox'),
),
body: Center(
child: ListView(
padding: const EdgeInsets.all(5),children: [
const SizedBox(height: 40),
Column(
children: _getHobby(),
),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: ElevatedButton(
onPressed: () {
print(_hobby);
},
child: const Text("获取爱好")
),
),
const SizedBox(),
],
),
),
);
}
}
Switch
import 'package:flutter/material.dart';
class SwitchPage extends StatefulWidget {
const SwitchPage({super.key});
@override
State<SwitchPage> createState() => _SwitchPageState();
}
class _SwitchPageState extends State<SwitchPage> {
late bool flag=true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SwitchPage'),
),
body: Center(
child: Column(
children: [
Switch(
value: flag,
onChanged: (v) {
setState(() {
flag = v;
});
},
)
],
),
),
);
}
}