专栏首页前端修炼之路【第21期】Flutter 文本框初始化时显示默认值

【第21期】Flutter 文本框初始化时显示默认值

刚开始做Flutter文本框时候,使用的是TextField。似乎大多数情况下都没有问题。代码形式如下:

class _FooState extends State<Foo> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new TextEditingController(text: '初始化内容');
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextField(
          // 当TextField 第一次创建时,controller会包含初始值,
          // 当用户修改文本框内容时,会修改controller的值。
          controller: _controller,
        ),
        new RaisedButton(
          onPressed: () {
            // 通过clear()可以清空controller的值。
            _controller.clear();
          },
          child: new Text('清空'),
        ),
      ],
    );
  }
}

问题1:动态创建文本框初始值

一般情况下,直接使用这种方式,没有任何问题。但是现在有一种情况:

**问题1: **当页面文本框中的初始值是动态的,从后台获取到的时候,应该怎么办呢?

这种情况下,说明创建TextEditingController时,并不知道文本内容。这个时候如果动态修改controller的话,会报错,根本没法使用。

这种情况我根本没遇到过,但是我觉得Flutter肯定有解决方法。所以我去找了一下Flutter的文档,总算是没有白找,找到了一个(https://api.flutter.dev/flutter/material/TextFormField-class.html)[组件] TextFormField

文档中有一句:

If a controller is not specified, initialValue can be used to give the automatically generated controller an initial value.

意思就是说,当不指定controller时,initialValue 就可以自动生成controller的初始值。

既然有解决方案,那么就是修改一下代码即可。

class _FooState extends State<Foo> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextFormField(
          initialValue: "初始值"
        ),
      ],
    );
  }
}

通过TextFormField这个组件,轻松解决掉这个问题了。

问题2: TextField和TextFormField的区别?

问题虽然解决了,但是现在又有另外一个问题了:

**问题2: ** TextField和TextFormField的区别是什么?什么时候使用TextField?什么时候使用TextFormField?

TextFormField:

例如制作一个表单,表单中有用户姓名,姓名必须包含@符号。这个时候就需要使用TextFormField这个组件

TextFormField

TextFormField(
  autovalidateMode: AutovalidateMode.always, // 开启自动验证
  decoration: const InputDecoration(
    icon: Icon(Icons.person),
    hintText: 'What do people call you?',
    labelText: 'Name *',
  ),
  onSaved: (String value) {
    // 当用户保存表单时,返回内容。
  },
  validator: (String value) {    // 表单验证
    return value.contains('@') ? 'Do not use the @ char.' : null;
  },
)

TextField:

例如制作一个显示文本框,框中提示输入文本框中的内容信息。

TextField

TextField(
  obscureText: true,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Password',
  ),
)

总结:

  • 如果需要使用保存、重置、验证用户输入的情况下,使用TextFormField
  • 如果只需要简单的捕获用户的输入行为,只需要使用TextField组件即可。

本文分享自微信公众号 - 前端修炼之路(siberiawolf0307),作者:siberiawolf

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-03-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 实战】1.20版本更新及新增组件

    老孟导读:Flutter 1.20 更新了 Slider、RangeSlider、日期选择器组件、时间选择器组件的样式,新增了交换组件:InteractiveV...

    老孟Flutter
  • 【Flutter实战】移动技术发展史

    老孟导读:大家好,这是【Flutter实战】系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统、跨平台技术的演进以及我对各种跨平台技...

    老孟Flutter
  • 2020安卓面试心得②:疫情下的安逸,九场面试后险获三个offer,这份面试总结值得反思

    历时一个半月,斩获3个大厂offer,在上一篇文章中整理了大厂常考知识点和一些面试技巧,今天就把我面试的几家公司的面试经历整理出来,分享一波。

    Android技术干货分享
  • Flutter

    在Flutter中和Widgets一起协同工作的还有另外两个伙伴:Elements和RenderObjects;由于它们都是有着树形结构,所以经常会称它们为三棵...

    愤怒的小鸟
  • 文本、图片和按钮在Flutter中怎么用

    与iOS、Android和React类似,作为一个UI框架,Flutter自然也提供了很多UI控件。而文本、图片和按钮,则是这些不同的UI框架中构建视图都要用到...

    拉维
  • Flutter 开发实战与前景展望 - RTC Dev Meetup

    大家好,我是郭树煜,Github GSY 系列开源项目的作者,系列包括有 GSYVideoPlayer 、GSYGitGithubApp(Flutter\Rea...

    GSYTech
  • Flutter组件学习(三)—— 输入框TextFiled

    Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人...

    用户2802329
  • 利用flutter_downloader插件在Flutter中实现文件下载

    之前有做一个工具集的微信小程序「开挂Lite」,但是由于小程序自身限制,没有办法实现下载文件的功能,只能把下载链接解析出来。而且受限于微信平台,小程序的审核是一...

    出其东门
  • Flutter中的日期、格式化日期、日期选择器组件在

    所谓时间戳,是指自格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。

    拉维
  • Flutter 1.22 正式发布

    我们很高兴推出最新版本的Flutter,它广泛支持iOS 14和Android11。Flutter 1.22在以前版本的基础上构建,使开发人员能够从一个代码库为...

    老孟Flutter
  • NA嵌入Flutter页面

    杨充
  • 能动手就别吵吵!

    自从上回跑通了Hello World后,鲍勃对Flutter的信心大增啊。心里琢磨着能不能用Flutter实现公司现在正在做的APP的效果呢!说做就做,马上拿起...

    吴延宝
  • Flutter 高性能原理浅析

    Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架.我开始认识Flutter时,经历了三个Flutt...

    Rouse
  • Flutter web 最新进展: 发掘更多可能!

    作者 / Mariam Hasnany, Product Manager, Flutter

    程序亦非猿
  • Flutter Android 端 FlutterInjector 及依赖流程源码分析

    经过前面的系列分析,这一篇会比较简单。之所以独立一个篇幅是因为本篇内容对于这个系列来说处于承上启下的作用,即是对前面的一个补充,也是对后面的一个引导,包括后续对...

    工匠若水
  • Flutter完整开发实战详解(一、Dart语言和Flutter基础)

     在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

    GSYTech
  • Flutter开发桌面端程序

    先说结论,目前Flutter还不能作为生成环境的桌面开发技术,这里仅作为尝鲜来学习。

    剑行者
  • Flutter完整开发实战详解(一、Dart语言和Flutter基础)

     在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

    GSYTech
  • Flutter入门三部曲(3) - 数据传递/状态管理

    Flutter数据传递 分为两种方式。一种是沿着数的方向从上向下传递状态。另一种是 从下往上传递状态值。

    deep_sadness

扫码关注云+社区

领取腾讯云代金券