【Flutter学习】基本组件之基本表单组件

一，概述

　　　表单时一个包含表单元素的区域。表单元素允许用户输入内容，比如文本域，下拉列表，单选框，复选框等。常见的应用场景有：登录，注册，输入信息等。

表单里有两个重要的组件：

Form：用来做整个表单提交使用　　
TextFormField：用来做用户输入。

　　　正式向服务器提交数据前，都会对各个输入框数据进行合法性校验。但对每个TextField都分别校验很麻烦。

如果想清除一组TextfFiled的内容，一个个清除也很麻烦。所以，Flutter提供了一个Form widget，可以对输入框进行分组，然后进行一些统一的操作。

二，构造函数

Form:

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

构造函数：

const Form({

    Key key,

    @required this.child,

    this.autovalidate = false,

    this.onWillPop,

    this.onChanged,

  }) : assert(child != null),

       super(key: key);

参数含义

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

onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个 Future 对象，如果Future的最终结果是false，则当前路由不会返回；如果为 true ，则会返回到上一个路由。此属性通常用于拦截返回按钮。

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

FormField:

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

构造函数：

const FormField({

    Key key,

    @required this.builder,

    this.onSaved,

    this.validator,

    this.initialValue,

    this.autovalidate = false,

    this.enabled = true,

  }) : assert(builder != null),

       super(key: key);

参数含义：

FormFieldSetter<T> onSaved, //保存回调

FormFieldValidator<T> validator, //验证回调

T initialValue, //初始值

bool autovalidate = false, //是否自动校验。

补充：Flutter提供了一个TextFormField widget，它继承自FormField类，也是 TextField的一个包装类，所以除了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的内容清空。

三，TextField, FormField

从最基础的讲起，对于TextField就是android中的edittext，就是一个输入框（ TextField class），这个输入框常用的属性如下：

child: new TextField(

autocorrect: false, // 是否自动校正

autofocus: false, //自动获取焦点

enabled: true, // 是否启用

inputFormatters: [], //对输入的文字进行限制和校验

keyboardType: TextInputType.text, //获取焦点时,启用的键盘类型

maxLines: , // 输入框最大的显示行数

maxLength: , //允许输入的字符长度/

maxLengthEnforced: false, //是否允许输入的字符长度超过限定的字符长度

obscureText: true, // 是否隐藏输入的内容

onChanged: (newValue) {

// print(newValue); // 当输入内容变更时,如何处理

},

onSubmitted: (value) {

// print("whar"); // 当用户确定已经完成编辑时触发

},

style: new TextStyle(

color: new Color(Colors.amberAccent.green)), // 设置字体样式

textAlign: TextAlign.center, //输入的内容在水平方向如何显示

decoration: new InputDecoration(

labelText: "城市",

icon: new Icon(Icons.location_city),

border: new OutlineInputBorder(), // 边框样式

helperText: 'required',

hintText: '请选择你要投保的城市',

prefixIcon: new Icon(Icons.android),

prefixText: 'Hello'),

),

输入处理

其实对于一个输入框，我们最关心的无非就是监听输入的内容，然后输入完成后，输入框中的内容是什么，文档中写的很清楚，textfiled控件有三个回调函数

在这里我们只需要关注onChanged和onSubmitted即可。
```
child: new TextField(

 controller: _controller,

 decoration: new InputDecoration(labelText: 'Your Name'),
```
```
 onChanged: (val) {

　　print(val);

 },
```
```
 onSubmitted: (String v) {

　　print(v);

 },

),
```
顾名思义:
　　onChanged事件,在输入内容发生变化的时候触发，onSubmitted事件,则是在输入结束,点击完成的时候触发。然而在TextFormField中没有这两个事件,取而代之的是validator,onSaved,onFieldSubmitted 他们都接受三个函数,并且将其值作为参数传递到函数里面validator,如果开启autovalidate: true,那么将会自动检验输入的值,如果没有则会在表单提交的时候检验该函数只允许返回验证失败的错误信息以及验证通过时返回null。onSaved, 当调用FormState.save方法的时候调用。onFieldSubmitted, 与onSubmitted一样,则是在输入结束,点击完成的时候触发。

编辑控制

　　无论是在TextField还是TextFormField中,都有一个重要的属性controller,该属性可用来对输入框内容进行控制。先创建一个控制对象：

TextEditingController _controller = new TextEditingController();

TextEditingController _formFieldController = new TextEditingController();

为输入框初始化值以及注册一个监听事件：

@override

void initState() {

// TODO: implement initState

super.initState();

  _controller.value = new TextEditingValue(text: 'Hello');

  _formFieldController.addListener(() {

  print('listener');

  });

}

触发一个监听事件：

void _textFieldAction() {

  // print(_formFieldController.selection);

  // print(_formFieldController.text); //获取输入内容

  print(_formFieldController.hasListeners); //判断是否注册监听事件

  _formFieldController.notifyListeners(); //触发监听事件

}

四，示例代码　　

import 'package:flutter/material.dart';

void main() => runApp(new HomePage());

class HomePage extends StatefulWidget {

  @override

  _HomePageState createState() => new _HomePageState();

}

class _HomePageState extends State<HomePage> {

  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

  String _name;

  String _password;

  void _forSubmitted() {

    var _form = _formKey.currentState;

    if (_form.validate()) {

      _form.save();

      print(_name);

      print(_password);

    }

  }

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return new MaterialApp(

      title: 'Flutter data',

      home: new Scaffold(

        appBar: new AppBar(

          title: new Text('Flutter Form'),

        ),

        floatingActionButton: new FloatingActionButton(

          onPressed: _forSubmitted,

          child: new Text('提交'),

        ),

        body: new Container(

          padding: const EdgeInsets.all(16.0),

          child: new Form(

            key: _formKey,

            child: new Column(

              children: <Widget>[

                new TextFormField(

                  decoration: new InputDecoration(

                    labelText: 'Your Name',

                  ),

                  onSaved: (val) {

                    _name = val;

                  },

                ),

                new TextFormField(

                  decoration: new InputDecoration(

                    labelText: 'Password',

                  ),

                  obscureText: true,

                  validator: (val) {

                    return val.length <  ? "密码长度错误" : null;

                  },

                  onSaved: (val) {

                    _password = val;

                  },

                ),

              ],

            ),

          ),

        ),

      ),

    );

  }

}

五，官方文档
表单 Widgets

巴特西

【Flutter学习】基本组件之基本表单组件

一，概述

二，构造函数

三，TextField, FormField

四，示例代码

最新文章

热门文章