第三百一十六回-编程知识

第三百一十六回

[tod]
我们在上一章回中介绍了"如何在输入框中处理光标"相关的内容，本章回中将介绍如何添加输入框默认值.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

在项目中经常使用输入框获取用户输入的内容，有时候在输入框中反复输入相同的内容会让用户感觉繁琐，因此我们准备在输入框中加入默认值，以减少输入的次数，本章
回中将介绍几种在输入框中加入默认值的方法，我们使用的输入框仍然基于TextField组件实现。

2. 实现方法

我们在实践中发现了几种在输入框中添加默认值的方法，有的比较好用，有的则不能用，在下面的小节中我们将分别介绍这几种实现方法。

2.1 hintText

使用hintText可以在输入框中添加默认值，不过它默认的显示颜色比较浅，还有一个致命缺点就是不能编辑默认值：当我们在输入框中输入内容时它会全部消失，不能对
默认值进行编辑。因此，我们不推荐使用hintText来充当默认值，还是把它当作输入框的提示值比较好。

2.2 labelText

使用labelText也可以在输入框中添加默认值，不过它和hitText一样不能编辑，而且当我们在输入框中输入内容时它会全部消失，并且运行跑到左上角的边框上。因此，
我们不推荐使用labelText来充当默认值，还是把它当作输入框中内容的label（标签）比较好。

2.3 controller

使用controller也可以在输入框中添加默认值，而且可以对默认值进行编辑，它不会像hintText一样全部消失，也不会像labelText一样跑到输入框的边框上。我
们将在后面的小节中通过示例代码来演示它的使用方法。

3. 示例代码

final TextEditingController _controller = TextEditingController();
//给控制器设置初始值
controller.text = "123456";TextField(autofocus: true,///设置初始值，可以监听值的变化,和onChanged中得到的值一样controller: _controller,keyboardType: TextInputType.number,///这个值是输入框中所有的内容，而不是当前输入的某个内容onChanged: (value) {debugPrint("hello onchanged $value");},//这个值是输入框中所有的内容onSubmitted: (value){debugPrint("hello onSubmited $value");},decoration: const InputDecoration(//在输入框上显示labelText: "Label",hintText: "Name",//在输入框下方位置显示errorText: "It is wrong",//输入框前面和后面的图标prefixIcon: Icon(Icons.login,),suffixIcon: Icon(Icons.panorama_fish_eye),border: OutlineInputBorder(),//无边框,无边框时不要设置label，不然会和hint重叠在一起// border: InputBorder.none,///这两个值需要同时修改才有效果filled: true,fillColor: Colors.blue,),//是否显示为密码形式，true时显示为小圆点obscureText: false,
),