zoukankan      html  css  js  c++  java
  • 【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: 2, // 输入框最大的显示行数
      maxLength: 3, //允许输入的字符长度/
      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 < 4 ? "密码长度错误" : null;
                      },
                      onSaved: (val) {
                        _password = val;
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

    五,官方文档
    表单 Widgets

  • 相关阅读:
    小技巧与阅读感悟
    Android常见漏洞介绍(1):Intent Scheme URL 攻击
    利用Mallet工具自动挖掘文本Topic
    Xie Tao的几个小建议PPT:关于读Paper,如何与他人交流,赶Deadline
    Python解析DNS数据包
    iOS 横竖屏适配 笔记
    多工程联编,cocopods的使用
    Call to unavailable function 'system': not available on iOS
    xxx referenced from: xxx in xxx.o
    YYModel学习总结YYClassInfo(1)
  • 原文地址:https://www.cnblogs.com/lxlx1798/p/11064208.html
Copyright © 2011-2022 走看看