文章目录
- 1. 概念介绍
- 2. 实现方法
- 2.1 hintText
- 2.2 labelText
- 2.3 controller
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"如何在输入框中处理光标"相关的内容,本章回中将介绍如何添加输入框默认值.闲话休提,让我们一起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,
),
我们在上面的示例代码中实现了一个密码输入框,并且尝试使用hintText,labelText和contorller来在输入框中实现默认值的功能,经过多次分析与实践后发现,
只有cntroller是比较好的实现方式。我在这里就不演示程序的运行结果了,建议大家自动动手去实践。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- hintText虽然可以在输入框中实现默认值,但是不能对默认值进行编辑;
- lableText虽然可以在输入框中实现默认值,但是也不能对默认值进行编辑;
- controller可以实现默认值,而且支持对默认值进行编辑功能;
看官们,与"如何添加输入框默认值"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!