第三百一十六回

news2024/11/25 8:15:10

[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,
),