![](https://upload-images.jianshu.io/upload_images/20353030-b44756130f10017c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

Form、FormField、TextFormField是表單相關控制元件，類似於H5中form。

## FormField

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

## TextFormField

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

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

TextFormField效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-ed2baeeca6057f56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`onSaved`是一個可選引數，當Form呼叫FormState.save時才會回撥此方法。

`autovalidate`引數為是否自動驗證，設定為true時，TextField發生變化就會呼叫validator，設定false時，FormFieldState.validate呼叫時才會回撥validator，如果Form的`autovalidate`設定為true，TextFormField忽略此引數。

`validator`驗證函式，輸入的值不匹配的時候返回的字串顯示在TextField的errorText屬性位置，返回null，表示沒有錯誤。

## Form

Form元件是一個容器類控制元件，可以包含多個FormField表單控制元件，這樣的好處是統一管理。

在使用Form的時候需要設定其key，透過key獲取當前的FormState，然後可以呼叫FormState的`save`、`validate`、`reset`等方法，一般透過如下方法設定：

```dart
final _formKey = GlobalKey<formstate>();
Form(
	key: _formKey,
	...
)
```

獲取FormState並呼叫相關方法：

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

`validate`方法為驗證表單資料的合法性，此方法會呼叫每一個FormField的`validator`回撥，此回撥需要字串表示資料驗證不透過，將會在改表單下顯示返回的字串，具體可檢視下TextFormField介紹。

`save`方法回撥每一個FormField的save方法，通常情況下儲存表單資料。

用Form寫一個簡單的登入功能，程式碼如下：

```dart
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);
          }
        },
      )
    ],
  ),
)
```

![](https://upload-images.jianshu.io/upload_images/20353030-e7b2b2e7d4f6bf6f.gif?imageMogr2/auto-orient/strip)

我們希望使用者在輸入表單時點選返回按鈕提示使用者"確認退出嗎？"，用法如下：

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

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-01d23103b89502b6.gif?imageMogr2/auto-orient/strip)

`onWillPop`回撥決定`Form`所在的路由是否可以直接返回，該回撥需要返回`Future<bool>`，返回`false`表示當前路由不會返回；為`true`，則會返回到上一個路由。此屬性通常用於攔截返回按鈕。

`onChanged`：當子表單控制元件發生變化時回撥。

歡迎加入Flutter的微信交流群(<font color="red">mqd_zzy</font>)，讓我們一起學習，一起進步，開始我們的故事，生活不止眼前的苟且，還有詩和《遠方》。

當然我也非常希望您關注我個人的公眾號，裡面有各種福利等著大家哦。

![](https://upload-images.jianshu.io/upload_images/20353030-9462936ebcbd6fb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</bool></widget></bool></widget></formstate></formstate>

Flutter Form表單控制元件超全總結

相關文章