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

涪陵ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

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

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

FormField

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

TextFormField

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

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

TextFormField效果如下：

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

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

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

Form

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

在使用Form的時(shí)候需要設(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ù)的合法性，此方法會(huì)調(diào)用每一個(gè)FormField的 validator回調(diào)，此回調(diào)需要字符串表示數(shù)據(jù)驗(yàn)證不通過，將會(huì)在改表單下顯示返回的字符串，具體可查看下TextFormField介紹。

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

用Form寫一個(gè)簡(jiǎn)單的登錄功能，代碼如下：

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

我們希望用戶在輸入表單時(shí)點(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)前路由不會(huì)返回；為 true，則會(huì)返回到上一個(gè)路由。此屬性通常用于攔截返回按鈕。

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

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

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

網(wǎng)站題目：FlutterForm表單控件超全總結(jié)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://m.rwnh.cn/article18/ddodgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)