Flutter基础组件TextField和Form

TextField输入框

TextField用于文本输入，它提供了很多属性。如下:

controller：

编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。

focusNode：

用于控制TextField是否占有当前键盘的输入焦点。

InputDecoration：

用于控制TextField的外观显示，如提示文本、背景颜色、边框等

keyboardType：

用于设置该输入框默认的键盘输入类型

text 	文本输入键盘
multiline 	多行文本，需和maxLines配合使用(设为null或大于1)
number 	数字；会弹出数字键盘
phone 	电话号码输入键盘；会弹出数字键盘并显示“* #”
datetime 	日期输入键盘；Android上会显示“: -”
emailAddress 	电子邮件地址；会显示“@ .”
url 	url输入键盘； 会显示“/ .”

textInputAction：

键盘动作按钮图标(即回车键位图标)，

style：

正在编辑的文本样式。

textAlign:

输入框内编辑文本在水平方向的对齐方式。

autofocus:

是否自动获取焦点。

obscureText：

是否隐藏正在编辑的文本，如用于输入密码的场景。

maxLines：

输入框的最大行数，默认为1；如果为null，则无行数限制。

maxLength和maxLengthEnforced ：

maxLength代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数。
maxLengthEnforced决定当文本长度超过maxLength时是否继续输入，为true时会无法输入，为false时不会停止输入但框会变红。

onChange：

输入框内容改变时的回调函数；

onEditingComplete和onSubmitted：

这两个回调都是在输入框输入完成时触发，onSubmitted回调是ValueChanged类型，它接收当前输入内容做为参数，而onEditingComplete不接收参数。

inputFormatters：

用于指定输入格式

enable：

如果为false，则输入框会被禁用，

cursorWidth:

自定义输入框光标宽度。

cursorRadius:

自定义输入框圆角。

cursorColor：

自定义输入框颜色。

class StudyTextField extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("输入框TextField及表单From"),
      ),
      body: Container(
        child: Column(
          //测试Row对齐方式，排除Column默认居中对齐的干扰
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              autofocus: true,//获取焦点
              decoration: InputDecoration(
                labelText: "用户名",
                hintText: "用户名或邮箱",
                prefixIcon: Icon(Icons.person,color: Colors.blue,),
              ),
              keyboardType: TextInputType.phone,//输入类型限制
              textAlign: TextAlign.start,//输入框内文本对齐方式
              maxLines: 1,//最大行数
              onChanged: (userName){
                print(userName);
              },
              maxLength: 20,//最大字数
              maxLengthEnforced: true,//超过最大字数不显示  为false则超过的字数继续显示并报红

            ),
            TextField(
              decoration: InputDecoration(
                labelText: "密码",
                hintText: "登录密码",
                prefixIcon: Icon(Icons.lock,color: Colors.blue,),
              ),
              obscureText: true,//隐藏输入的内容
            ),

          ],
        ),
      ),
    );
  }

}

效果：

表单Form

Form继承自StatefulWidget对象，它对应的状态类为FormState

autovalidate:

是否自动校验输入内容；当为true时，每一个子FormField内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验。

onWillPop：

决定Form所在的路由是否可以直接返回,false 则不会返回， true则返回

onChanged：

Form的任意一个子FormField内容发生变化时会触发此回调

FormField

Form的子孙元素必须是FormField类型，FormField是一个抽象类，定义几个属性，FormState内部通过它们来完成操作

const FormField({
  FormFieldSetter<T> onSaved, //保存回调
  FormFieldValidator<T>  validator, //验证回调
  T initialValue, //初始值
  bool autovalidate = false, //是否自动校验。
})

TextFormField继承自FormField类，也是TextField包装类。

FormState

FormState为Form的State类，可以通过Form.of()或GlobalKey获得。
可以通过它来对Form的子孙FormField进行统一操作。

FormState.validate()：调用此方法后，会调用Form子孙FormField的validate回调，如果有一个校验失败，则返回false，所有校验失败项都会返回用户返回的错误提示。
FormState.save()：调用此方法后，会调用Form子孙FormField的save回调，用于保存表单内容
FormState.reset()：调用此方法后，会将子孙FormField的内容清空。

登录示例

class StudyForm extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return StudyFormState();
  }

}
class StudyFormState extends State<StudyForm>{
  GlobalKey formKey = GlobalKey<FormState>();
  TextEditingController nameTextEditingController = TextEditingController();
  TextEditingController pwdTextEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("输入框TextField及表单From"),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16,horizontal: 24),
        child: Form(
          key: formKey,//设置globalKey
          autovalidate: true,//开启自动校验
          child: Column(
            children: <Widget>[
              TextFormField(
                autofocus: true,//获取焦点
                controller: nameTextEditingController,
                decoration: InputDecoration(
                  labelText: "用户名",
                  hintText: "用户名或邮箱",
                  prefixIcon: Icon(Icons.person),
                ),
                //校验用户名
                validator: (name){
                  return name!.trim().length > 0 ? null:"用户名不能为空";
                },
              ),

              TextFormField(
                controller: pwdTextEditingController,
                decoration: InputDecoration(
                  labelText: "密码",
                  hintText: "输入密码",
                  prefixIcon: Icon(Icons.lock),
                ),
                obscureText: true,
                //校验用户名
                validator: (pwd){
                  return pwd!.trim().length > 5 ? null:"密码不能少于6位";
                },
              ),
              
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Builder(
                        builder: (context){
                          return RaisedButton(
                            child: Text("登录"),
                            padding: const EdgeInsets.all(15),
                            color: Theme.of(context).primaryColor,
                            textColor: Colors.white,
                            onPressed: () {
                              // 调用validate()方法校验用户名密码是否合法，校验
                              // 通过后再提交数据。
                              if(Form.of(context)!.validate()){
                                //校验通过则提交数据
                                print("校验通过，可以提交。");
                              }
                            },
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

}

效果