1 TextField

TextField用于接收用户的文本输入

  • keyboardType键盘的类型，
  • style设置样式，
  • textAlign文本对齐方式，
  • maxLength最大显示行数等等；
  • decoration：用于设置输入框相关的样式
  • icon：设置左边显示的图标
  • labelText：在输入框上面显示一个提示的文本
  • hintText：显示提示的占位文字
  • border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
  • filled：是否填充输入框，默认为false
  • fillColor：输入框填充的颜色
  • onChanged：监听输入框内容的改变，传入一个回调函数
  • onSubmitted：点击键盘中右下角的down时，会回调的一个函数

    (1) 样式, 监听函数

    image.png ```dart class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Container(
    1. padding: EdgeInsets.all(20),
    2. child: Column(
    3.   mainAxisAlignment: MainAxisAlignment.center,
    4.   children: [
    5.     TextFieldDemo()
    6.   ],
    7. ),
    ); } }

class TextFieldDemo extends StatefulWidget { @override _TextFieldDemoState createState() => _TextFieldDemoState(); }

class _TextFieldDemoState extends State { @override Widget build(BuildContext context) { return TextField( decoration: InputDecoration( icon: Icon(Icons.people), labelText: “username”, hintText: “请输入用户名”, border: InputBorder.none, filled: true, fillColor: Colors.lightGreen ), onChanged: (value) { print(“onChanged:$value”); }, onSubmitted: (value) { print(“onSubmitted:$value”); }, ); } }

  1. <a name="JANeG"></a>
  2. ## (2) controller
  3. 我们可以给TextField添加一个控制器（Controller），可以使用它设置文本的初始值，也可以使用它来监听文本的改变；<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/1114755/1643794022689-a34cefbd-7dd5-498b-8192-f70444581a71.png#clientId=uf1f80ede-409e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=181&id=u4f087247&margin=%5Bobject%20Object%5D&name=image.png&originHeight=181&originWidth=561&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26097&status=done&style=none&taskId=ub187a783-8528-4dff-bbdf-45384d5dcca&title=&width=561)
  4. ```dart
  5. class TextFieldDemo extends StatefulWidget {
  6.   @override
  7.   _TextFieldDemoState createState() => _TextFieldDemoState();
  8. }
  10. class _TextFieldDemoState extends State<TextFieldDemo> {
  11.   final textEditingController = TextEditingController();
  13.   @override
  14.   void initState() {
  15.     super.initState();
  17.     // 1.设置默认值
  18.     textEditingController.text = "Hello World";
  20.     // 2.监听文本框
  21.     textEditingController.addListener(() {
  22.       print("textEditingController:${textEditingController.text}");
  23.     });
  24.   }
  26.   @override
  27.   Widget build(BuildContext context) {
  28.     return TextField(
  29.       controller: textEditingController,  // 设置controller
  30.       decoration: InputDecoration(
  31.           icon: Icon(Icons.people),
  32.           labelText: "username",
  33.           hintText: "请输入用户名",
  34.           border: InputBorder.none,
  35.           filled: true,
  36.           fillColor: Colors.lightGreen
  37.       ),
  39.     );
  40.   }
  41. }

2 FormField

(1) 基本使用

  1. class FormDemo extends StatefulWidget {
  2.   @override
  3.   _FormDemoState createState() => _FormDemoState();
  4. }
  6. class _FormDemoState extends State<FormDemo> {
  7.   final registerFormKey = GlobalKey<FormState>();
  8.   String? username, password;
  10.   void registerForm() {
  11.     registerFormKey.currentState?.save();
  12.     print("username:$username password:$password");
  13.   }
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return Form(
  18.       key: registerFormKey,
  19.       child: Column(
  20.         mainAxisAlignment: MainAxisAlignment.center,
  21.         children: <Widget>[
  22.           TextFormField(
  23.             decoration: InputDecoration(
  24.                 icon: Icon(Icons.people),
  25.                 labelText: "用户名或手机号"
  26.             ),
  27.             onSaved: (value) {
  28.               username = value;
  29.             },
  30.           ),
  31.           TextFormField(
  32.             obscureText: true,
  33.             decoration: InputDecoration(
  34.                 icon: Icon(Icons.lock),
  35.                 labelText: "密码"
  36.             ),
  37.             onSaved: (value) {
  38.               password = value;
  39.             },
  40.           ),
  41.           SizedBox(height: 16,),
  42.           Container(
  43.             width: double.infinity,
  44.             height: 44,
  45.             child: RaisedButton(
  46.               color: Colors.lightGreen,
  47.               child: Text("注 册", style: TextStyle(fontSize: 20, color: Colors.white),),
  48.               onPressed: registerForm
  49.             ),
  50.           )
  51.         ],
  52.       ),
  53.     );
  54.   }
  55. }

(2) 验证表单数据

  • 点击按钮时验证

image.png

  • 失去焦点时自动验证

image.png