Flutter TextField UI 实例 —— 新手礼包

文章列表

在这里插入图片描述

大家好，我是17。

新手礼包一共 3 篇文章，每篇都是描述尽量详细，实例讲解，包会！

Flutter Row 实例 —— 新手礼包
Flutter TextField UI 实例 —— 新手礼包
Flutter TextField 交互实例 —— 新手礼包

本篇介绍了 TextField UI 的常见写法，从TextField的尺寸，border，icon，文本到光标，无所不包！

TextField 的尺寸

默认情况下，TextField 的宽度尽量大，高度包含所有内容并加上 padding。TextField 可以通过 constraints 定义自己的尺寸。

下面的代码规定了 TextField 最大宽度为 200。

TextField(decoration: InputDecoration(constraints: BoxConstraints(maxWidth: 200),));

让 TextFiled 在高度上也尽量大，设置 expands: true，同时还必须设置 maxLines，minLines 为 null。

TextField(maxLines: null,minLines: null,expands: true,);

需要注意在高度上的约束必须是有限的，否则报错。

Column(children: [TextField(expands: true,)],);

这个例子执行会报错。解决办法看下面的代码：

Column(children: [SizedBox(height: 200,child: TextField(expands: true,maxLines: null,minLines: null,)),TextField(decoration:InputDecoration(constraints: BoxConstraints(maxHeight: 200)),expands: true,maxLines: null,minLines: null,),Expanded(child: TextField(expands: true,maxLines: null,minLines: null,))],);

Column 中有三个 TextField，一个用 SizedBox 包起来，一个用 InputDecoration 自带的 constraints 限定，一个用 Expanded 包起来，都是可以的，都可以让 TextField 在高度上的约束是有限的。

除了 SizedBox，很多 widget 都有修改约束的能力，比如 Container，ConstrainedBox 等。

Expanded 的解释可以看这篇 Flutter 弹性布局的基石： Flex 和 Flexible。

默认展示

第一个示例给出全部代码，贴到 main.dart 就能运行。后面的只给出 TextField 相关。

import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: SizedBox(width: 300, child: MyWidget()))));}
}class MyWidget extends StatefulWidget {const MyWidget({super.key});@overrideState<MyWidget> createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {var controller = TextEditingController(text: "IAM17");@overridevoid dispose() {controller.dispose();super.dispose();} @overrideWidget build(BuildContext context) {return Column(mainAxisSize: MainAxisSize.min,children: [TextField(),SizedBox(height: 20,),TextField(),],);}
}

没加 Const 关键字，因为反复修改的时候可能得一会删，一会加。发布代码的时候还是应该加上的。

controller 后面会用到

用两个 TextField 是为了方便查看 Focus 的效果。上面的为正常状态的 TextField，下面的为 focus 状态的 TextField。默认配置正常状态下的 TextField 是一条灰线，有焦点的时候变成蓝色。接下来，我们把他变成想要的样子。

去掉下面的横线

TextField(  decoration: InputDecoration(  border: InputBorder.none,  ),  
),

下面的横线其实就是 border，去掉后，现在只剩下一个光标了。想怎样装扮可以用其它 widget，比如可以用 Container 包起来，自定义 border，也可以用 Row 包起来，加各种图标。这是一个方案，如果你对 TextField 不熟悉，可以这样做来快速完成任务，但实际上，TextField 直接就可以完成大多数装扮，还是用优先用 TextField 自带的装扮为好，因为这样可以少写很多代码。

实际上，在设置 border: InputBorder.none后还是有 padding 的。为了彻底消除 decoration 的影响，可以把它设置为 null。

TextField(decoration: null,
);

加边框

TextField(decoration: InputDecoration(border: OutlineInputBorder(gapPadding: 4,borderSide: BorderSide(color: Colors.green, width: 2, style: BorderStyle.solid),borderRadius: BorderRadius.circular(10)),),)

我们给 TextField 加上了宽度为 2，圆角为 10 的边框。

width 是用来定义边框的宽度的，可以用小数，比如 1.5
style 是线框的样式，目前只有一种可选，就是BorderStyle.solid
color 是线框的颜色
borderRadius 可以定线框的圆角。
gapPadding 定义 labelText 左右的 Padding。

前面几个都好理解，gapPadding 我再放一个图就明白了。

~~gapPadding:4~~ 修改为 100 看下效果。

gapPadding 是作用于 LabelText 的，为 LabelText 的左右添加空白。虽然在视觉上好像是只给右边加了空白，其实左边也加了，只是左边没那么长的线框可以减，看起来好像是少了一小段，其实左边的上边框已经完全减掉了。

label 也可以拆开写，效果是一样的。

 labelText:  'IAM17',labelStyle: TextStyle(color:Color(0xFFC45F84),fontSize: 24),

可能你会想到，要用虚线边框怎么办，需要自定义 decration，本文就不展开说了。

如果你已经运行了示例代码，会发现 width，color 没有生效？确实是没有生效，线框的颜色还是默认的灰色，宽度还是 1。

定义线框的颜色和宽度

定义线框的宽度和颜色不能用 border。InputDecoration 按状态还为我们准备了五种 border，下面示范的是最常用的两种，正常状态下的 enabledBorder，和 focus 状态下的 focusedBorder。

TextField(decoration: InputDecoration(enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(5),borderSide: BorderSide(color: Colors.green,width: 1.0,),),focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(30),borderSide: BorderSide(color: Color(0xFFC45F84),width: 2.0,),),),)

第三种是 disabledBorder，看效果需要 enabled: false 禁用 TextField。禁用后会展示灰色 border，无法 focus。

TextField(decoration: InputDecoration(enabled: false,disabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(5),borderSide: BorderSide(color: Colors.grey,width: 1.0,),),    ),
);

第四种第五种是 error 相关，errorBorder 与 focusedErrorBorder。给 errorText 赋值，就会触发 TextField 的错误状态。

 TextField(decoration: InputDecoration(errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Color.fromARGB(255, 157, 23, 13),width: 1.0,),),errorText: '出错了！',focusedErrorBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(5),borderSide: BorderSide(color: Colors.red,width: 2.0,),),),)

文本样式，背景色

 TextField(controller: controller,style: TextStyle(color: Color(0xFFC45F84), fontSize: 24),decoration: InputDecoration(filled: true, fillColor: Color.fromARGB(255, 192, 241, 218)));

controller 在最开始的代码中已经给出来了var controller = TextEditingController(text: "IAM17"); 现在我们用 controller 显示初始文本。

filled 默认为 false，fillColor 无效，要设置背景色，需要设置 filled: true，然后再设置 fillColor。

正文文本的样式用 style。可以用 textAlign 控制文本的摆放。我们可以把文本摆放在中间。

TextField(textAlign: TextAlign.center,controller: controller,style: TextStyle(color: Color(0xFFC45F84), fontSize: 24),decoration: InputDecoration(filled: true, fillColor: Color.fromARGB(255, 192, 241, 218)))]));

除了可以摆放在中间，还可以摆在末尾，一共有 5 个值可选，具体可以查看 TextAlign

不够生动？用 icon 和 text 来装扮吧！

 TextField(controller: controller,style: TextStyle(color: Color(0xFFC45F84), fontSize: 24),decoration: InputDecoration(icon: Icon(Icons.search),prefixIcon: Icon(Icons.account_box),prefix: Text('你是谁？',style: TextStyle(color: Color.fromARGB(255, 25, 73, 6), fontSize: 20)),suffixIcon: Icon(Icons.star),suffix: Text('我们见过的',style: TextStyle(color: Color.fromARGB(255, 14, 92, 99), fontSize: 20)),))

内容有点多，把最外面的 Container 的宽度放大到 400。

一共有五个位置用来装饰。最前面的是 icon，在 border 的外面。接下来是 prefixIcon，然后是正文，最后是 suffix 和 subffixIcon。

这个五个位置虽然从名字上来看是 Icon 和 Text，但实际上只要是 Widget 都可以！但最好是用 Icon，Text，因为如果用其它 Widget，可能享受不到 Theme 的福利了。

prefix，suffix 也可以用两个字段替代。

prefixText: '你是谁？',
prefixStyle: TextStyle( color: Color.fromARGB(255, 25, 73, 6), fontSize: 20),
suffixText: '我们见过的',
suffixStyle: TextStyle( color: Color.fromARGB(255, 14, 92, 99), fontSize: 20),

扩写和缩写只能采用一种，同时存在会报错！

自定义 Icon 的颜色

当前 Icon 的 color 都是默认的，如何修改 Icon 的颜色呢？可能你第一时间想到这样修改：

icon: Icon(Icons.search,color:Colors.green),

你一定很高兴，it work! 现在 TextField 的正常状态和 foucs 状态的颜色都是 green。那么，如果想让 TextField 的 focus 状态的 icon 颜色是红色，怎么办？

思考中…

好像很棘手，其实 Flutter 已经为我们设计好了如何修改 Icon 的颜色，用 Theme!

首先定义一个 MaterialStateColor。

class IconColor extends MaterialStateColor {const IconColor() : super(_defaultColor);//绿色static const int _defaultColor = 0xff00ff00;//红色static const int _focusColor = 0xffff0000;@overrideColor resolve(Set<MaterialState> states) {if (states.contains(MaterialState.focused)) {return const Color(_focusColor);}return const Color(_defaultColor);}
}

然后加入到 Theme 中，我们需要修改一下之前的代码。

MaterialApp(theme: ThemeData(inputDecorationTheme: InputDecorationTheme(iconColor: IconColor()),),home: Scaffold(body: Center(child: SizedBox(width: 400, child: MyWidget()))));

查看效果默认的时候 icon 是绿色的，focus 的时候是红色的。

如果你觉得定义一个类太麻烦，也可以用 resolveWith 方法

MaterialApp(theme: ThemeData(inputDecorationTheme: InputDecorationTheme(iconColor:MaterialStateColor.resolveWith((Set<MaterialState> states) {if (states.contains(MaterialState.focused)) {return Colors.red;}return Colors.green;})),),home: Scaffold(body: Center(child: SizedBox(width: 300, child: MyWidget()))));

前面说的 border，也可以通过 Theme 设置。这样就不用每个 TextField 都定一遍了！

inputDecorationTheme: InputDecorationTheme(enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.green)),focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)))

inputDecorationTheme 可以设置很多内容。Theme 相当于是 css 中的样式表。Theme 如果写在 MaterialApp 中，就相当于是全局样式表了，写在其它地方相当于局部样式表。子级的 Theme 的优先级大于父级的 Theme。写在 Widget 里的相当于 Style，优先级最高。

isDense

上面是默认 isDense:false 的效果，下面是 isDense:true 的效果，就是icon变小了一些。

InputDecoration(isDense: true,icon: Icon(Icons.search),prefixIcon: Icon(Icons.account_box),prefix: Text('你是谁？',style: TextStyle(color: Color.fromARGB(255, 25, 73, 6), fontSize: 20)),suffixIcon: Icon(Icons.star),suffix: Text('我们见过的',style: TextStyle(color: Color.fromARGB(255, 14, 92, 99), fontSize: 20)),);

hint text 与 helper text

灰色的是 hintText，和 html 中 placeholder 差不多。绿色的是 helper Text，显示在左下角。

TextField(decoration: InputDecoration(hintText: 'IAM17',hintStyle: TextStyle(color: Colors.black54),hintMaxLines: 1,helperText: '我们见过的',helperStyle: TextStyle(color: Color.fromARGB(255, 52, 116, 7)),helperMaxLines: 1,))

已经包含 hint text 与 helper text 的所有属性了，比较好理解，就不再解释了。要注意的一点是：focus 对这两个 text 的样式没有影响。error 状态 hint text 没有变化，helper text 被 errorText 取代。

label text

同时有 label text 和 hint text 的时候，正常状态下会优先显示 labelText。在 focus 状态下，labelText 缩小到左上角，hint text 显示出来。

label text 远没有这么简单，除 labelText，labelStyle，还有几个属性需要了解。

floatingLabelStyle 定义 focus 状态下 label 显示在左上角的样式。正常状态下 label text 的颜色用 labelStyle 设置为灰色，浮到左上角后可以用 floatingLabelStyle 设置为绿色。

TextField(decoration: InputDecoration(labelText: '你是谁',labelStyle: TextStyle(color: Colors.grey),floatingLabelStyle: TextStyle(color: Colors.green),))
)

floatingLabelAlignment 可以让左上角的 label 显示在中间。（只有 start 和 center 两个选项）

TextField(decoration: InputDecoration(labelText: '你是谁',labelStyle: TextStyle(color: Color.fromARGB(255, 194, 52, 101)),floatingLabelStyle: TextStyle(color: Colors.blue),floatingLabelAlignment: FloatingLabelAlignment.center));

floatingLabelBehavior 控制 label 的行为，有三个选项

FloatingLabelBehavior.auto 默认。正常状态覆盖 hint，focus 状态上浮。
FloatingLabelBehavior.always 正常状态和 focus 状态都上浮。hint 正常显示。
FloatingLabelBehavior.never 正常状态覆盖 hint，focus 状态不上浮。这时就和 hint 并不多了，唯一不同的是 focus 的时候 hint 不消失，label 消失。

padding

默认情况下，在正文的四周是有 padding 的。

contentPadding: EdgeInsets.zero 可以去掉左右的 padding。

decoration: InputDecoration(contentPadding: EdgeInsets.zero,filled: true,fillColor: Color.fromARGB(255, 192, 241, 218)))

去掉上下的 padding 要用到一个属性，isCollapsed可以把上下左右的 padding 都去掉。

InputDecoration(isCollapsed: true,filled: true,fillColor: Color.fromARGB(255, 192, 241, 218))

也可以用InputDecoration.collapsed，但要求必须指定 hintText，不允许再指定 labelText，errorText，icon。

InputDecoration.collapsed(hintText: "你是谁",filled: true,fillColor: Color.fromARGB(255, 192, 241, 218))

直接用 isCollapsed: true，可以指定 labelText，errorText，icon，但 UI 上可能不大理想，所以如果想去掉所有 padding，优先用 InputDecoration.collapsed。

自定义光标

可以自定义光标的宽度，radius，和颜色。

TextField(cursorWidth: 16.0,cursorRadius: Radius.circular(18.0),cursorColor: Color(0xFFC45F84),),

Flutter TextField UI 常见写法到这里就结束了，谢谢观看。

欢迎观看下一篇 Flutter TextField 交互实例 —— 新手礼包

Flutter TextField UI 实例 —— 新手礼包

TextField 的尺寸

默认展示

去掉下面的横线

加边框

定义线框的颜色和宽度

文本样式，背景色

不够生动？用 icon 和 text 来装扮吧！

自定义 Icon 的颜色

isDense

hint text 与 helper text

label text

padding

自定义光标

相关问题

公告