Flutter Form表單控件超全總結(jié)

注意：無特殊說明，F(xiàn)lutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

Form、FormField、TextFormField是表單相關(guān)控件，類似于H5中form。

FormField

FormField是一個表單控件，此控件包含表單的狀態(tài)，方便更新UI，通常情況下，我們不會直接使用FormField，而是使用TextFormField。

TextFormField

TextFormField繼承自FormField，是一個輸入框表單，因此TextFormField中有很多關(guān)于TextField的屬性，TextFormField的基本用法：

TextFormField(
  onSaved: (value){
    print('$value');
  },
  autovalidate: false,
  validator: (String value){
    return value.length>=6?null:'賬號最少6個字符';
  },
)

TextFormField效果如下：

onSaved是一個可選參數(shù)，當(dāng)Form調(diào)用FormState.save時才會回調(diào)此方法。

autovalidate參數(shù)為是否自動驗(yàn)證，設(shè)置為true時，TextField發(fā)生變化就會調(diào)用validator，設(shè)置false時，F(xiàn)ormFieldState.validate調(diào)用時才會回調(diào)validator，如果Form的 autovalidate設(shè)置為true，TextFormField忽略此參數(shù)。

validator驗(yàn)證函數(shù)，輸入的值不匹配的時候返回的字符串顯示在TextField的errorText屬性位置，返回null，表示沒有錯誤。

Form

Form組件是一個容器類控件，可以包含多個FormField表單控件，這樣的好處是統(tǒng)一管理。

在使用Form的時候需要設(shè)置其key，通過key獲取當(dāng)前的FormState，然后可以調(diào)用FormState的 save、 validate、 reset等方法，一般通過如下方法設(shè)置：

final _formKey = GlobalKey<FormState>();
Form(
    key: _formKey,
    ...
)

獲取FormState并調(diào)用相關(guān)方法：

var _state = _formKey.currentState;
if(_state.validate()){
  _state.save();
}

validate方法為驗(yàn)證表單數(shù)據(jù)的合法性，此方法會調(diào)用每一個FormField的 validator回調(diào)，此回調(diào)需要字符串表示數(shù)據(jù)驗(yàn)證不通過，將會在改表單下顯示返回的字符串，具體可查看下TextFormField介紹。

save方法回調(diào)每一個FormField的save方法，通常情況下保存表單數(shù)據(jù)。

用Form寫一個簡單的登錄功能，代碼如下：

var _account = '';
var _pwd = '';
final _formKey = GlobalKey<FormState>();
Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(hintText: '輸入賬號'),
        onSaved: (value) {
          _name = value;
        },
        validator: (String value) {
          return value.length >= 6 ? null : '賬號最少6個字符';
        },
      ),
      TextFormField(
        decoration: InputDecoration(hintText: '輸入密碼'),
        obscureText: true,
        onSaved: (value) {
          _pwd = value;
        },
        validator: (String value) {
          return value.length >= 6 ? null : '賬號最少6個字符';
        },
      ),
      RaisedButton(
        child: Text('登錄'),
        onPressed: () {
          var _state = Form.of(context);
          if(_state.validate()){
            _state.save();
            login(_name,_pwd);
          }
        },
      )
    ],
  ),
)

我們希望用戶在輸入表單時點(diǎn)擊返回按鈕提示用戶”確認(rèn)退出嗎？”，用法如下：

Form(
  key: _formKey,
  onWillPop: () async {
    return await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('提示'),
            content: Text('確認(rèn)退出嗎？'),
            actions: <Widget>[
              FlatButton(
                child: Text('取消'),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
              FlatButton(
                child: Text('確認(rèn)'),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
            ],
          );
        });
  },
  ...
)

效果如下：

onWillPop回調(diào)決定 Form所在的路由是否可以直接返回，該回調(diào)需要返回 Future<bool>，返回 false表示當(dāng)前路由不會返回；為 true，則會返回到上一個路由。此屬性通常用于攔截返回按鈕。

onChanged：當(dāng)子表單控件發(fā)生變化時回調(diào)。

歡迎加入Flutter的微信交流群( mqd_zzy)，讓我們一起學(xué)習(xí)，一起進(jìn)步，開始我們的故事，生活不止眼前的茍且，還有詩和《遠(yuǎn)方》。

當(dāng)然我也非常希望您關(guān)注我個人的公眾號，里面有各種福利等著大家哦。