文档章节

flutter 中的From表单

她吃西红柿
 她吃西红柿
发布于 2018/09/11 11:39
字数 332
阅读 3482
收藏 1

通用方法

做过前端的都应该提交过表单,以文本输入为例flutter中提供了通用的TextField组件

TextField(
      decoration: InputDecoration(labelText: '产品名称'),
      onChanged: (String value) {
        setState(() {
          _name = value;
        });
        print(value);
      },
    );

onChanged回调一个包含String value 参数的方法,通过setState方法给属性赋值.

TextFormField

//表单状态
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.all(10.0),
        child: Form(
        //绑定状态属性
            key: _formKey,
            child: ListView(
              children: <Widget>[
                _buildNameText(),
                _buildDescriptionText(),
                _buildPriceText(),
                Container(
                  padding: EdgeInsets.all(10.0),
                  child:
                      RaisedButton(child: Text('添加'), onPressed: _submitValues),
                )
              ],
            )));
  }
  
Widget _buildNameText() {
    return TextFormField(
      decoration: InputDecoration(labelText: '产品名称'),
      validator: (String value) {
        //删除首尾空格
        if (value.isEmpty || value.trim().length <= 5) {
          return '名称字数必须大于5';
        }
      },
      onSaved: (String value) {
        
          text = value;
       
      },
    );
  }

flutter专门为表单提交提供了一套解决方法,主要由Form,TextFormField,组件,GlobalKey<FormState>属性,组成.onSaved回调一个参数为String value的方法,调用时机与onChanged不同,会在_formKey.currentState.save()执行时调用.TextFormField中的validator是一个验证器,同样回调一个方法,可以根据自定义条件返回错误信息.它的会在_formKey.currentState.validate();方法调用是回调. image

源码地址 文档:TextField TextFormField

© 著作权归作者所有

她吃西红柿
粉丝 43
博文 52
码字总数 25812
作品 0
杭州
iOS工程师
私信 提问
Flutter学习笔记(13)--表单组件

如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框、复选框等,常见的应用场景有:登陆...

CurtisWgh
08/01
0
0
从零学习Fluter(三):Flutter的路由跳转以及state的生命周期

今天继续研究Flutter,我是在flutter1.0发布后,才玩flutter的,发现在此之前,许多人已经先发制人,玩起了flutter,不知不觉中,我已经被别人摔在了起跑线上,玩过flutter后,想吐槽一下 fl...

topbrids
2018/12/07
0
0
Flutter之Navigator解读

简述 本文适合对Flutter已经有简单了解的初学者 官网之Navigator 官网洋洋洒洒的写了好长一页, 对于初学者十分的不友好,小编的英文水平可能还停留在nice to meet your 的地步.这个栏目我打算...

美味的小布丁
09/12
0
0
两分钟带你快速掌握Flutter的路由与导航

为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了,点我Get!!! 在这篇文章中,将带着大家一起认识,,,以及 首页我们来学习在Flutter中如何实现不同页面跳转(导航)?...

CrazyCodeBoy
04/01
0
0
Flutter学习笔记(12)--列表组件

如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源传递...

CurtisWgh
07/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么样的人要学点python编程?请你对号入座

什么样的人需要学点python编程? 时代越来越不一样了,编程这种专业程序员的工作,已经开始应用于各种其他日常工作中,就以前象征着互联网的电脑,现在早已进入普通人家。 那么什么样的人需要...

这人就爱编程
11分钟前
2
0
哪吒之魔童降世的背景音乐怎么提取 视频中提取音频的方法

随着国漫的不断崛起一大批优质的动漫正向我们袭来,从大鱼海棠到大圣归来再到我们现在的哪吒让我们看到国漫质的飞跃,也让我们对国漫充满信心,前段时间哪吒之魔童降世以国产第二的票房下线到...

cenfeng123
15分钟前
1
0
springcloud 整合 springboot-admin 监控中心

Admin监控应用 Spring Boot提供的监控接口,例如:/health、/info等等,实际上除了之前提到的信息,还有其他信息业需要监控:当前处于活跃状态的会话数量、当前应用的并发数、延迟以及其他度...

java框架开发者
17分钟前
1
0
GMAT阅读提分要看课外读物,名师点评正确使用方法

阅读提分需要从积累阅读量开始,这种积累不能只靠做练习,还需要大量阅读课外读物。而最适合GRE考生的课外读物之一就是原版杂志。但看课外读物提分也要讲究方法。下面小编就为大家详解看课外...

bole6
19分钟前
1
0
第六次读Kingfisher网络图片缓存库的思考与感受(稍微有点起色)

这节我们来优化一下之前的 硬盘存储,看看kingfiisher哪里做得好,我们稍微来学习一下。 从硬盘里检索图片模仿改进: open func retrieveImageInDiskCache(forKey key: String, options:...

T型人才追梦者
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部