【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

原文地址:https://www.cnblogs.com/lxlx1798/p/11064208.html

时间: 2024-10-11 21:08:18

【Flutter学习】基本组件之基本表单组件的相关文章

【09】react 之 表单组件

不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先你创建了一个input标签 var React = require('react'), ReactDOM = require('react-dom'); var Test = React.render(function() { render: function() { return (<input

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

deirective写form表单组件

directive 在使用隔离 scope 的时候,提供了三种方法同隔离之外的地方交互.这三种分别是 @ 绑定一个局部 scope 属性到当前 dom 节点的属性值.结果总是一个字符串,因为 dom 属性是字符串.& 提供一种方式执行一个表达式在父 scope 的上下文中.如果没有指定 attr 名称,则属性名称为相同的本地名称.= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定 但是当我们不使用隔离scope的时候,我们要能够

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Django学习笔记(五)—— 表单

疯狂的暑假学习之  Django学习笔记(五)-- 表单 参考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path                                 除域名以外的请求路径,斜杠开头                      "/hello/" request.get_host()                      主机名                              

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

小程序七:组件之表单组件

button 按钮组件. 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样式类型,有效值primary, default, warn plain Boolean false 按钮是否镂空,背景色透明 disabled Boolean false 是否禁用 loading Boolean false 名称前是否带 loading 图标 formType String 无 有效值:submit, r

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

HTML表单组件

HTML表单组件 form标签里面的东西 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Form.html</title> 5 6 <meta name="keywords" content="keyword1,keyword2,keyword3"> 7 <meta name="description" content=&qu