美文网首页
Flutter Form 表单和输入框

Flutter Form 表单和输入框

作者: wuchao226 | 来源:发表于2019-06-21 10:45 被阅读0次

    表单是一个包含表单元素的区域 。表单元素允许用户输入内容, 比如 : 文本域 、 下拉 列表、单选框、复选框等。 常见的应用场景有: 登录、注册、输入信息等。表单里有两个 重要的组件, 一个是 Form 组件用来做整个表单提交使用的,另一个是 TextFormField 组件用来做用户输入的。

    先来看看 Form 组件的属性,如下所示 :

    属性名 类型 说明
    key Key 组件在整个 Widget树中的 key值。
    autovalidate bool 是否自动校验输入内容,当为true时,每一个子FormField内容发生变化时都会自动校验合法性,并直接显示错误信息。否则,需要通过调用 FormState.validate() 来手动校验。
    child Widget 组件 child只能有一个子组件。
    onWillPop WillPopCallback 决定 Form 所在的路由是否可以直接返回(如点击返回按钮),该回调返回一个 Future 对象,如果 Future 的最终结果是 false,则当前路由不会返回;如果为 true,则会返回到上一个路由。此属性通常用于拦截返回按钮。
    onChanged VoidCallback Form 的任意一个子 FormField 内容发生变化时会触发此回调。

    TextFromField 组件的属性, 如下所示:

    属性名 类型 说明
    autovalidate bool 是否自动校验。
    obscureText bool 是否是密码
    initialValue T 表单字段初始值,比如 · 输入收货地址时,默认回填的地址信息
    onSaved FormFieldSetter<T> 当 Form 表单调用保存方法 Save 时回调的函数。
    validator FormFieldValidator<T> Form 表单验证器 ,验证回调

    为了获取表单的实例,我们需要设置-个全局类型的 key,通过这个 key 的属性,来获取表单对象。需要使用 GlobalKey 来获取, 代码如下所示:

    Global Key<FormState> loginKey =new GlobalKey<FormState>();
    

    接下来编写一个简单的登录界面,完整示例代码如下所示:

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    // 这个 widget 作用这个应用的顶层 widget.
    //这个 widget 是无状态的,所以我们继承的是 [StatelessWidget].
    //对应的,有状态的 widget 可以继承 [StatefulWidget]
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        // 我们想使用 material 风格的应用,所以这里用 MaterialApp
        return MaterialApp(
          // 移动设备使用这个 title 来表示我们的应用。具体一点说,在 Android 设备里,我们点击
          // recent 按钮打开最近应用列表的时候,显示的就是这个 title。
          title: 'Welcome to Flutter',
          // 应用的“主页”
          home: LoginPage(),
        );
      }
    }
    
    class LoginPage extends StatefulWidget {
      @override
      _LoginPageState createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      //全局 Key 用来获取 Form 表单组件
      GlobalKey<FormState> loginKey = GlobalKey<FormState>();
    
      //用户名
      String userName;
    
      //密码
      String password;
    
      void login() {
        //读取当前 Form 状态
        var loginForm = loginKey.currentState;
        //验证 Form表单
        if (loginForm.validate()) {
          loginForm.save();
          print('userName:' + userName + ',password:' + password);
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Form 表单组件'),
            centerTitle: true,
          ),
          body: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(16),
                child: Form(
                  //设置globalKey,用于后面获取FormState
                  key: loginKey,
                  //开启自动校验
                  autovalidate: true,
                  child: Column(
                    children: <Widget>[
                      TextFormField(
                        decoration: InputDecoration(
                          labelText: '请输入用户名',
                          hintText: "用户名或邮箱",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 13,
                          ),
                          prefixIcon: Icon(Icons.person),
                        ),
                        //校验用户
                        validator: (value) {
                          return value.trim().length > 0 ? null : "用户名不能为空";
                        },
                        //当 Form 表单调用保存方法 Save时回调的函数。
                        onSaved: (value) {
                          userName = value;
                        },
                        // 当用户确定已经完成编辑时触发
                        onFieldSubmitted: (value) {},
                      ),
                      TextFormField(
                        decoration: InputDecoration(
                          labelText: '请输入密码',
                          hintText: '你的登录密码',
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 13,
                          ),
                          prefixIcon: Icon(Icons.lock),
                        ),
                        //是否是密码
                        obscureText: true,
                        //校验密码
                        validator: (value) {
                          return value.length < 6 ? '密码长度不够 6 位' : null;
                        },
                        onSaved: (value) {
                          password = value;
                        },
                      )
                    ],
                  ),
                  //内容改变的回调
                  onChanged: () {
                    print("onChanged");
                  },
                ),
              ),
              Container(
                padding: EdgeInsets.all(16),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: RaisedButton(
                        padding: EdgeInsets.all(15),
                        child: Text(
                          "登录",
                          style: TextStyle(fontSize: 18),
                        ),
                        textColor: Colors.white,
                        color: Theme.of(context).primaryColor,
                        onPressed: login,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      }
    }
    

    运行效果如下图所示:

    Form 表单和输入框的更详细介绍参考以下两个文章:
    TextField详解
    输入框和表单

    相关文章

      网友评论

          本文标题:Flutter Form 表单和输入框

          本文链接:https://www.haomeiwen.com/subject/wxgsqctx.html