第三百一十六回

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

第三百一十六回_第1张图片

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

我们在上面的示例代码中实现了一个密码输入框,并且尝试使用hintText,labelText和contorller来在输入框中实现默认值的功能,经过多次分析与实践后发现,
只有cntroller是比较好的实现方式。我在这里就不演示程序的运行结果了,建议大家自动动手去实践。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • hintText虽然可以在输入框中实现默认值,但是不能对默认值进行编辑;
  • lableText虽然可以在输入框中实现默认值,但是也不能对默认值进行编辑;
  • controller可以实现默认值,而且支持对默认值进行编辑功能;
    看官们,与"如何添加输入框默认值"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发Flutter)