[Flutter]flutter基础之组件基础(十六)

一、TextField Widget

TextField 是一个可以输入文本的 Widget 。每当用户更改字段中的文本时,文本字段就会调用 onChanged 回调。 如果用户指示已完成在该字段中的键入(例如,通过按软键盘上的按钮),则文本字段将调用 onSubmitted 回调。

要控制在文本字段中显示的文本,请使用控制器。 例如,要设置文本字段的初始值,请使用已经包含一些文本的控制器。 控制器还可以控制选择和组成区域(并观察文本,选择和组成区域的变化)。

要将 TextField 与其他 FormField 小部件集成到 Form 中,请考虑使用 TextFormField

当不再需要 TextEditingController 时,请进行处理。 这将确保我们丢弃该对象使用的所有资源。

1
const TextField({
2
  Key key,
3
  //TextEditingController类型可选命名参数,控制正在编辑的文本
4
  this.controller,
5
  //FocusNode类型可选命名参数,定义此小部件的键盘焦点
6
  this.focusNode,
7
  //InputDecoration类型可选命名参数,在文本字段周围显示的装饰
8
  this.decoration = const InputDecoration(),
9
  //TextInputType类型可选命名参数,用于编辑文本的键盘类型
10
  TextInputType keyboardType,
11
  //TextInputAction类型可选命名参数,键盘使用的操作按钮的类型
12
  this.textInputAction,
13
  //TextCapitalization类型可选命名参数,配置平台键盘如何选择大写或小写键盘
14
  this.textCapitalization = TextCapitalization.none,
15
  //TextStyle类型可选命名参数,用于正在编辑的文本的样式
16
  this.style,
17
  //StrutStyle类型可选命名参数,用于垂直布局的支杆样式
18
  this.strutStyle,
19
  //TextAlign类型可选命名参数,文本应如何水平对齐
20
  this.textAlign = TextAlign.start,
21
  //TextAlignVertical类型可选命名参数,设置文本垂直对齐
22
  this.textAlignVertical,
23
  //TextDirection类型可选命名参数,设置文字的方向
24
  this.textDirection,
25
  //bool类型可选命名参数,文本是否可以更改
26
  this.readOnly = false,
27
  //ToolbarOptions类型可选命名参数,工具栏选项的配置
28
  ToolbarOptions toolbarOptions,
29
  //bool类型可选命名参数,是否显示光标
30
  this.showCursor,
31
  //bool类型可选命名参数,如果没有其他焦点,则此文本字段是否应该焦点自己
32
  this.autofocus = false,
33
  //bool类型可选命名参数,是否隐藏正在编辑的文本(例如,用于密码)
34
  this.obscureText = false,
35
  //bool类型可选命名参数,是否启用自动校正
36
  this.autocorrect = true,
37
  //bool类型可选命名参数,是否在用户键入时显示输入建议
38
  this.enableSuggestions = true,
39
  //int类型可选命名参数,文本可跨越的最大行数,必要时可换行
40
  this.maxLines = 1,
41
  //int类型可选命名参数,当内容跨越更少的行时要占用的最小行数。同时设置maxLines时,
42
  //高度将在指定的线范围之间增长。当maxLines为null时,它将从minLines开始根据需要增长
43
  this.minLines,
44
  //bool类型可选命名参数,此小部件的高度是否将调整大小以填充其父级
45
  this.expands = false,
46
  //int类型可选命名参数,文本字段中允许的最大字符数(Unicode标量值)
47
  this.maxLength,
48
  //bool类型可选命名参数,如果为true,则阻止字段允许超过maxLength个字符
49
  this.maxLengthEnforced = true,
50
  //ValueChanged<String>类型可选命名参数,当用户发起对TextField值的更改时调用:当他们插入或删除文本时
51
  this.onChanged,
52
  //VoidCallback类型可选命名参数,当用户提交可编辑内容时调用(例如,用户按键盘上的“完成”按钮)
53
  this.onEditingComplete,
54
  //ValueChanged<String>类型可选命名参数,当用户指示他们已完成字段中文本的编辑时调用
55
  this.onSubmitted,
56
  //List<TextInputFormatter>类型可选命名参数,可选的输入验证和格式替代
57
  this.inputFormatters,
58
  //bool类型可选命名参数,如果为false,则文本字段“禁用”,它忽略点击,其装饰呈现为灰色
59
  this.enabled,
60
  //double类型可选命名参数,光标的粗细
61
  this.cursorWidth = 2.0,
62
  //Radius类型可选命名参数,游标的角应多圆
63
  this.cursorRadius,
64
  //Color类型可选命名参数,绘制光标时使用的颜色
65
  this.cursorColor,
66
  //Brightness类型可选命名参数,键盘外观
67
  this.keyboardAppearance,
68
  //EdgeInsets类型可选命名参数,当文本字段滚动到视图中时,将填充配置为围绕可滚动对象的边缘
69
  this.scrollPadding = const EdgeInsets.all(20.0),
70
  //DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
71
  this.dragStartBehavior = DragStartBehavior.start,
72
  //bool类型可选命名参数,如果为true,则长按此TextField将选择文本并显示剪切/复制/粘贴菜单,
73
  //而点击将移动文本插入符号
74
  this.enableInteractiveSelection = true,
75
  //GestureTapCallback类型可选命名参数,要无条件处理轻敲,而又不干扰文本字段的内部手势检测器,
76
  //请提供此回调
77
  this.onTap,
78
  //InputCounterWidgetBuilder类型可选命名参数,生成自定义InputDecorator.counter小部件的回调
79
  this.buildCounter,
80
  //ScrollController类型可选命名参数,垂直滚动输入时要使用的ScrollController控制器
81
  this.scrollController,
82
  //ScrollPhysics类型可选命名参数,滚动视图应如何响应用户输入
83
  this.scrollPhysics,
84
})

TextEditingController 是文本编辑控制器。每当用户使用关联的 TextEditingController 修改文本字段时,该文本字段都会更新值,并且控制器会通知其侦听器。然后,侦听器可以读取文本和选择属性,以了解用户键入了什么或如何更新了选择。

同样,如果您修改文本或选择属性,则将通知文本字段并适当更新自身。

TextEditingController 也可以用于为文本字段提供初始值。 如果使用已经具有文本的控制器来构建文本字段,则该文本字段将使用该文本作为其初始值。

可以从添加到此控制器的侦听器中设置文本或选择属性。 如果两个属性都需要更改,则应该设置控制器的值。

请记住,当不再需要 TextEditingController 时,在 dispose 内调用其 dispose()。 这将确保我们丢弃该对象使用的所有资源。

InputDecoration 用于设置 TextField 的边框、标签、图标和样式。TextFieldInputDecorator 类使用 InputDecoration 对象来描述其装饰。构造方法如下:

1
//创建用于装饰文本字段的边框,标签,图标和样式的束
2
const InputDecoration({
3
  //Widget类型可选命名参数,显示在输入字段之前和装饰容器外部的图标
4
  this.icon,
5
  //String类型可选命名参数,描述输入字段的文本
6
  this.labelText,
7
  //TextStyle类型可选命名参数,标签在输入字段上方(即垂直相邻)时用于labelText的样式
8
  this.labelStyle,
9
  //String类型可选命名参数,提供有关输入子项值的上下文的文本,例如如何使用该值
10
  this.helperText,
11
  //TextStyle类型可选命名参数,用于helperText的样式
12
  this.helperStyle,
13
  //int类型可选命名参数,helperText可以占用的最大行数
14
  this.helperMaxLines,
15
  //String类型可选命名参数,建议字段接受哪种输入的文本
16
  this.hintText,
17
  //TextStyle类型可选命名参数,hintText的文本样式
18
  this.hintStyle,
19
  //int类型可选命名参数,hintText可以占用的最大行数
20
  this.hintMaxLines,
21
  //String类型可选命名参数,显示在输入子项和边框下方的文本
22
  this.errorText,
23
  //TextStyle类型可选命名参数,用于errorText的样式
24
  this.errorStyle,
25
  //int类型可选命名参数,errorText可以占用的最大行数
26
  this.errorMaxLines,
27
  //bool类型可选命名参数,labelText是否浮动在焦点上
28
  this.hasFloatingPlaceholder = true,
29
  //bool类型可选命名参数,输入子项是否为密集形式的一部分(即使用较少的垂直空间)
30
  this.isDense,
31
  //EdgeInsetsGeometry类型可选命名参数,输入装饰的容器的填充
32
  this.contentPadding,
33
  //Widget类型可选命名参数,在装饰容器中,出现在prefix或prefixText之前以及文本字段的可编辑部分之前的图标
34
  this.prefixIcon,
35
  //Widget类型可选命名参数,用于放置在输入之前的行上
36
  this.prefix,
37
  //String类型可选命名参数,文本前缀,用于放置在输入之前的行上
38
  this.prefixText,
39
  //TextStyle类型可选命名参数,用于prefixText的样式
40
  this.prefixStyle,
41
  //Widget类型可选命名参数,装饰容器中的文本字段的可编辑部分之后,后缀或suffixText之后出现的图标
42
  this.suffixIcon,
43
  //Widget类型可选命名参数,用于放置在输入之后的行上
44
  this.suffix,
45
  //String类型可选命名参数,输入后在行上放置的可选文本后缀
46
  this.suffixText,
47
  //TextStyle类型可选命名参数,用于suffixText的样式
48
  this.suffixStyle,
49
  //Widget类型可选命名参数,自定义计数器窗口小部件,以放置在否则被counterText占用的位置。
50
  //如果此属性为非null,则将忽略counterText
51
  this.counter,
52
	//String类型可选命名参数,文本放置在该行下方作为字符计数
53
  this.counterText,
54
  //TextStyle类型可选命名参数,counterText使用的样式
55
  this.counterStyle,
56
  //bool类型可选命名参数,如果为true,则装饰的容器将填充fillColor
57
  this.filled,
58
  //Color类型可选命名参数,装饰的容器颜色的基础填充颜色
59
  this.fillColor,
60
  //Color类型可选命名参数,与fillColor混合的颜色,并用该颜色填充装饰的容器,
61
  //如果filled为true并且容器具有输入焦点
62
  this.focusColor,
63
  //Color类型可选命名参数,如果用鼠标悬停了容器,则显示的装饰的焦点突出显示的颜色
64
  this.hoverColor,
65
  //InputBorder类型可选命名参数,InputDecorator没有焦点并显示错误时显示的边框
66
  this.errorBorder,
67
  //InputBorder类型可选命名参数,InputDecorator具有焦点且未显示错误时显示的边框
68
  this.focusedBorder,
69
  //InputBorder类型可选命名参数,InputDecorator具有焦点并显示错误时显示的边框
70
  this.focusedErrorBorder,
71
  //InputBorder类型可选命名参数,禁用InputDecorator且未显示错误时显示的边框
72
  this.disabledBorder,
73
  //InputBorder类型可选命名参数,启用InputDecorator时显示的边框,但未显示错误
74
  this.enabledBorder,
75
  //InputBorder类型可选命名参数,在装饰容器周围绘制的边框形状
76
  this.border,
77
  //bool类型可选命名参数,如果未显示错误的helperText,errorText和counterText,
78
  //则减少了其余可视元素的不透明度
79
  this.enabled = true,
80
  //String类型可选命名参数,counterText的语义标签
81
  this.semanticCounterText,
82
  //bool类型可选命名参数,通常在InputDecorator包含多行TextField(TextField.maxLines为null或> 1)
83
  //时设置为true,以覆盖将标签与TextField的中心对齐的默认行为
84
  this.alignLabelWithHint,
85
}) 
86
  
87
//定义一个与输入字段大小相同的输入编辑器  
88
const InputDecoration.collapsed({
89
  //String类型必传参数,建议字段接受哪种输入的文本
90
  @required this.hintText,
91
  //bool类型可选命名参数,标签是否浮动在焦点上
92
  this.hasFloatingPlaceholder = true,
93
  //TextStyle类型可选命名参数,hintText的文本样式
94
  this.hintStyle,
95
  //bool类型可选命名参数,如果为true,则装饰的容器将填充fillColor
96
  this.filled = false,
97
  //Color类型可选命名参数,装饰的容器颜色的基础填充颜色
98
  this.fillColor,
99
  //Color类型可选命名参数,与fillColor混合的颜色,并用该颜色填充装饰的容器,
100
  //如果filled为true并且容器具有输入焦点
101
  this.focusColor,
102
  //Color类型可选命名参数,如果用鼠标悬停了容器,则显示的装饰的焦点突出显示的颜色
103
  this.hoverColor,
104
  //InputBorder类型可选命名参数,在装饰容器周围绘制的边框形状
105
  this.border = InputBorder.none,
106
  //bool类型可选命名参数,如果未显示错误的helperText,errorText和counterText,
107
  //则减少了其余可视元素的不透明度
108
  this.enabled = true,
109
})

其中 InputBorder 用于定义输入编辑器边框的外观,是一个抽象基类,可以使用其子类 OutlineInputBorderUnderlineInputBorder

OutlineInputBorder 在容易周围绘制一个圆角矩形。当输入装饰器的标签处于浮动状态时(例如,由于其输入子级具有焦点),标签将显示在边框轮廓的间隙中。

构造方法如下:

1
const OutlineInputBorder({
2
  //BorderSide类型可选命名参数,定义边界线的颜色和粗细
3
  BorderSide borderSide = const BorderSide(),
4
  //BorderRadius类型可选命名参数,边界的圆角矩形的半径
5
  this.borderRadius = const BorderRadius.all(Radius.circular(4.0)),
6
  //EdgeInsetsGeometry类型可选命名参数,此边框的边的宽度表示为EdgeInsets
7
  this.gapPadding = 4.0,
8
})

UnderlineInputBorderInputDecorator 容器的底部绘制一条水平线,并定义容器的形状。

构造方法如下:

1
const UnderlineInputBorder({
2
  //BorderSide类型可选命名参数,定义边界线的颜色和粗细
3
  BorderSide borderSide = const BorderSide(),
4
  //BorderRadius类型可选命名参数,边界的圆角矩形的半径
5
  this.borderRadius = const BorderRadius.only(
6
    topLeft: Radius.circular(4.0),
7
    topRight: Radius.circular(4.0),
8
  ),
9
})

BorderSidehttp://www.mwpush.com/content/a22ef47b.html 这里有过说明。

BorderRadius 用于定义矩形每个角的不可变半径集。BorderRadius 类根据视觉角指定偏移量,例如左上方。这些值不受 TextDirection 的影响。为了同时支持从左到右和从右到左的布局,请考虑使用 BorderRadiusDirectional ,它以相对于 TextDirection的术语表示(通常从环境 Directionality获得)。

BorderRadius 的几个构造方法如下:

1
//创建所有半径均为Radius的边界半径
2
const BorderRadius.all(Radius radius)
3
4
//创建所有半径均为Radius.circular(radius)的边界半径
5
BorderRadius.circular(double radius)
6
7
//创建垂直对称的边框半径,其中矩形的顶部和底部的半径相同
8
const BorderRadius.vertical({
9
  //Radius类型可选命名参数,顶部的左右两个半径
10
  Radius top = Radius.zero,
11
  //Radius类型可选命名参数,底部的左右两个半径
12
  Radius bottom = Radius.zero,
13
})
14
  
15
//创建水平对称的边框半径,其中矩形的左侧和右侧具有相同的半径
16
const BorderRadius.horizontal({
17
  //Radius类型可选命名参数,左侧的上下两个半径
18
  Radius left = Radius.zero,
19
  //Radius类型可选命名参数,右侧的上下两个半径
20
  Radius right = Radius.zero,
21
}) 
22
  
23
//仅使用给定的非零值创建边界半径。其他角将是直角
24
const BorderRadius.only({
25
  //Radius类型可选命名参数,左上方的半径
26
  this.topLeft = Radius.zero,
27
  //Radius类型可选命名参数,右上方的半径
28
  this.topRight = Radius.zero,
29
  //Radius类型可选命名参数,左下方的半径
30
  this.bottomLeft = Radius.zero,
31
  //Radius类型可选命名参数,右下方的半径
32
  this.bottomRight = Radius.zero,
33
});

Radius 用于定义圆形或椭圆形的半径。两个构造方法如下:

1
//构造一个圆半径。x和y将具有相同的半径值
2
const Radius.circular(double radius)
3
4
//构造具有给定半径的椭圆半径
5
const Radius.elliptical(this.x, this.y);

InputDecorator 用于定义“材料设计”文本字段的外观。InputDecorator 在其输入子项周围显示“材料设计”文本字段的可视元素。 可视元素本身由 InputDecoration 对象定义,其布局和外观取决于 baseStyletextAlignisFocusedisEmpty 参数。TextField 使用此小部件来装饰其 EditableText 子级。InputDecorator 可用于创建外观和行为类似于 TextField 的小部件,但支持其他类型的输入。

TextField ,它使用 InputDecorator 在其 EditableText 子项周围显示边框,标签和图标。

keyboardTypeTextInputType 类型,用于定义键盘类型。如果设置为 null 或不设置,则为正常的英文键盘,如果设置,其提供了一个方法用于设置带有数字的键盘样式,构造方法如下:

1
const TextInputType.numberWithOptions({
2
  //bool类型可选命名参数,带符号的数字键盘
3
  this.signed = false,
4
  //bool类型,是否允许小数点提供小数,仅用于数字输入类型,否则为null
5
  this.decimal = false,
6
})

此外,还提供了静态属性用于设置键盘,如下:

1
//默认的文本键盘
2
static const TextInputType text = TextInputType._(0);
3
4
//默认的平台键盘,但在按Enter键时接受换行符。这是用于所有多行文本字段的输入类型
5
static const TextInputType multiline = TextInputType._(1);
6
7
//默认的数字键盘
8
static const TextInputType number = TextInputType.numberWithOptions();
9
10
//电话号码拨号键盘,带*和#
11
static const TextInputType phone = TextInputType._(3);
12
13
//在ios上使用默认键盘,在Android上带有数字键“:”和“-”的键盘
14
static const TextInputType datetime = TextInputType._(4);
15
16
//带有@和.的电子邮件键盘
17
static const TextInputType emailAddress = TextInputType._(5);
18
19
//带有/和.com的url键盘
20
static const TextInputType url = TextInputType._(6);
21
22
//一个可以同时访问字母和数字的键盘
23
static const TextInputType visiblePassword = TextInputType._(7);
24
25
//所有的类型的列表
26
static const List<TextInputType> values = <TextInputType>[
27
  text, multiline, number, phone, datetime, emailAddress, url, visiblePassword,
28
];

TextInputAction 用于定义键盘右下角按钮要执行的动作。每个动作代表一个逻辑含义,还配置软键盘以显示某种动作按钮。 在同一操作系统的版本之间,操作按钮的外观可能有所不同。尽管每个动作都有逻辑含义,但选择特定的 TextInputAction 不一定会导致发生任何特定的行为。 开发人员有责任确保按下操作按钮时发生的行为适合所选的操作按钮。例如:如果用户在读取“紧急呼叫”时按下 iOS 上的键盘操作按钮,则结果不应是将焦点更改为下一个 TextField 。 此行为在逻辑上不适用于显示“紧急呼叫”的按钮。有关自定义动作按钮行为的更多信息,请参见 EditableText

Android 和 iOS 均平等地支持大多数 TextInputAction 。 但是,Android 的 IME 输入类型和 iOS 的键盘返回类型之间没有完整,直接的映射。 因此,某些 TextInputActions 不适合其中一种平台。 如果开发人员在调试模式下运行时选择了不合适的 TextInputAction ,则将引发错误。 如果在发布模式下执行相同操作,则 Android 不会在平台端使用“ unspecified”,而不会发送不适当的值,而iOS会在平台端使用“ default”。
其为一个枚举类型值,如下:

1
enum TextInputAction {
2
  //逻辑含义:当前输入源(例如TextField)没有相关的输入操作。Android:
3
  //对应于Android的“ IME_ACTION_NONE”。 键盘设置由操作系统决定。 键盘可能会显示一个返回键。
4
  //iOS:iOS没有键盘返回类型“ none”。 在iOS上运行时,选择此TextInputAction是不合适的。
5
  none,
6
7
  //逻辑含义:让操作系统决定最合适的操作。Android:与Android的“ IME_ACTION_UNSPECIFIED”相对应。
8
  //操作系统选择要显示的键盘操作。 该决定可能是完成按钮或返回键。iOS:对应于iOS
9
  //的“ UIReturnKeyDefault”。 动作按钮中显示的标题为“返回”。
10
  unspecified,
11
12
  //逻辑含义:用户完成向一组输入(如表单)提供输入的操作。 现在应该发生某种终结行为。Android:与
13
  //Android的“ IME_ACTION_DONE”相对应。 操作系统显示代表完成的按钮,例如复选标记按钮。iOS:对应
14
  //于iOS的“ UIReturnKeyDone”。 操作按钮中显示的标题为“完成”
15
  done,
16
17
  //逻辑含义:用户输入了一些代表目的地的文本,例如餐馆名称。 “开始”按钮旨在将用户带到与该目的地相对应的
18
  //应用程序部分。Android:对应于Android的“ IME_ACTION_GO”。 操作系统显示一个按钮,该按钮表示
19
  //将“用户带到他们输入的文本的目标”,例如,向右的箭头按钮。iOS:对应于iOS的“ UIReturnKeyGo”。 
20
  //动作按钮中显示的标题为“开始”。
21
  go,
22
23
  //逻辑含义:执行搜索查询。Android:与Android的“ IME_ACTION_SEARCH”相对应。 操作系统显示代表搜索的
24
  //按钮,例如放大镜按钮。iOS:对应于iOS的“ UIReturnKeySearch”。 操作按钮中显示的标题为“搜索”。
25
  search,
26
27
  //逻辑含义:发送用户撰写的内容,例如电子邮件或短信。Android:与Android的“ IME_ACTION_SEND”相对应。
28
  //操作系统会显示一个代表发送内容的按钮,例如纸飞机按钮。iOS:对应于iOS的“ UIReturnKeySend”。 
29
  //动作按钮中显示的标题为“发送”。
30
  send,
31
32
  //逻辑含义:用户已完成当前输入源的操作,并希望移至下一个输入源。Android:与Android
33
  //的“ IME_ACTION_NEXT”相对应。 操作系统显示代表前进的按钮,例如,向右的箭头按钮。
34
  //iOS:与iOS的“ UIReturnKeyNext”相对应。 动作按钮中显示的标题为“下一步”。
35
  next,
36
37
  //逻辑含义:用户希望返回到组中的上一个输入源,例如,具有多个TextField的表单。Android:
38
  //与Android的“ IME_ACTION_PREVIOUS”相对应。 操作系统显示代表向后移动的按钮,例如,向左的箭头按钮。
39
  //iOS:iOS没有键盘返回类型为“ previous”。 在iOS上运行时,选择此TextInputAction是不合适的。
40
  previous,
41
42
  //逻辑含义:在iOS应用中,通常会在屏幕顶部显示“返回”按钮和“继续”按钮。 但是,当键盘打开时,这些按钮通
43
  //常在屏幕外隐藏。 因此,iOS上“继续”返回键的目的是在用户输入文本时使“继续”按钮可用。除了历史上下文,可
44
  //以在术语“继续”似乎最适合给定操作的任何时间使用TextInputAction.continueAction。Android:Android
45
  //没有IME输入类型为“ continue”。 在Android上运行时,选择此TextInputAction是不合适的。iOS:与iOS
46
  //的“ UIReturnKeyContinue”相对应。 动作按钮中显示的标题为“继续”。 此操作仅在iOS 9.0+上可用。此值
47
  //后缀为“ Action”的原因是因为“ continue”是Dart以及许多其他语言中的保留字。
48
  continueAction,
49
50
  //逻辑含义:用户想加入某些东西,例如无线网络。Android:Android没有IME输入类型“ join”。 在
51
  //Android上运行时,选择此TextInputAction是不合适的。iOS:与iOS的“ UIReturnKeyJoin”相对应。
52
  //动作按钮中显示的标题为“加入”。
53
  join,
54
55
  //逻辑含义:用户想要路线选择,例如,驾驶路线。Android:Android没有IME输入类型“ route”。
56
  //在Android上运行时,选择此TextInputAction是不合适的。iOS:对应于iOS的“UIReturnKeyRoute”。
57
  //动作按钮中显示的标题为“ Route”。
58
  route,
59
60
  //逻辑含义:启动对紧急服务的呼叫。Android:Android没有IME输入类型“ emergencyCall”。 在Android
61
  //上运行时,选择此TextInputAction是不合适的。iOS:与iOS的“ UIReturnKeyEmergencyCall”相对应。 
62
  //动作按钮中显示的标题为“紧急呼叫”。
63
  emergencyCall,
64
65
  //逻辑含义:在重点文本输入中插入换行符,例如TextField。Android:对应于Android的“IME_ACTION_NONE”。       	 //操作系统显示代表新行的按钮,例如回车按钮。iOS:对应于iOS的“ UIReturnKeyDefault”。 动作按钮
66
  //中显示的标题为“返回”。术语TextInputAction.newline在Flutter中存在,但在Android或iOS中不存在。 
67
  //引入该术语的原因是,使开发人员可以实现插入新行的常见结果,而无需了解Android上的各种IME操作和iOS上的
68
  //返回键。 因此,TextInputAction.newline是一个方便的术语,它减轻了理解底层平台来实现此常见行为的需要。
69
  newline,
70
}

TextCapitalization 配置平台键盘如何选择大写或小写键盘。仅支持文本键盘,其他键盘类型将忽略此配置。 大写字母可识别区域设置。是一个枚举类型值,如下:

1
enum TextCapitalization {
2
  //默认为每个单词的第一个字母的大写键盘。对应于Android上的InputType.TYPE_TEXT_FLAG_CAP_WORDS和
3
  //iOS上的UITextAutocapitalizationTypeWords
4
  words,
5
6
  //每个句子的首字母默认为大写键盘。对应于Android上的InputType.TYPE_TEXT_FLAG_CAP_SENTENCES,
7
  //以及iOS上的UITextAutocapitalizationTypeSentences。
8
  sentences,
9
10
  //每个字符默认为大写键盘。对应于Android上的InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS,
11
  //以及iOS上的UITextAutocapitalizationTypeAllCharacters。
12
  characters,
13
14
  //默认为小写键盘
15
  none,
16
}

StrutStyle

1
const StrutStyle({
2
  String fontFamily,
3
  List<String> fontFamilyFallback,
4
  this.fontSize,
5
  this.height,
6
  this.leading,
7
  this.fontWeight,
8
  this.fontStyle,
9
  this.forceStrutHeight,
10
  this.debugLabel,
11
  String package,
12
})

TextAlignVertical 用于设置文本的垂直对齐方式。是一个 y 值,范围从 -1.0 到 1.0 。 -1.0 对齐输入框的顶部,以使第一行文本的顶部适合该框及其填充。 0.0 对齐框的中心。 1.0 对齐,以使文本的最后一行的底部与输入框的底部内部边缘对齐。

构造方法如下:

1
const TextAlignVertical({
2
  //double类型必传参数,设置y值
3
  @required this.y,
4
})

也可以直接使用其类属性,定义如下:

1
static const TextAlignVertical top = TextAlignVertical(y: -1.0);
2
static const TextAlignVertical center = TextAlignVertical(y: 0.0);
3
static const TextAlignVertical bottom = TextAlignVertical(y: 1.0);

ToolbarOptions 用于 EditableText 的工具栏配置。工具栏是上下文菜单,当用户右键单击或长按 EditableText 时将显示该菜单。它包括几个选项:剪切,复制,粘贴和全选。EditableText 及其派生的窗口小部件具有其自己的默认 ToolbarOptions 。如果要显式控制工具栏选项,请创建一个自定义 ToolbarOptions

其提供的构造方法如下:

1
const ToolbarOptions({
2
  //bool类型可选命名参数,是否在工具栏中显示复制选项
3
  this.copy = false,
4
  //bool类型可选命名参数,是否在工具栏中显示剪切选项
5
  this.cut = false,
6
  //bool类型可选命名参数,是否在工具栏中显示粘贴选项
7
  this.paste = false,
8
  //bool类型可选命名参数,是否显示选择工具栏中的全选选项
9
  this.selectAll = false,
10
})

TextInputFormatter 用于设置输入验证和正在编辑的文本的格式。文本修改仅应在IME提交文本时应用,而不能应用于组合文本(即,仅当 TextEditingValue.composed 折叠时)。TextInputFormatter 是一个抽象类,提供了三个子类可以直接使用:BlacklistingTextInputFormatterWhitelistingTextInputFormatterLengthLimitingTextInputFormatter 。也可以自定义自己的格式器类,需继承 TextInputFormatter 并实现 formatEditUpdate 方法即可。

BlacklistingTextInputFormatter 格式器提供了一个黑名单的功能,作用是防止插入黑名单设置的字符。在新TextEditingValues 中发现的列入黑名单的字符实例将替换为 replaceString ,该字符串默认为空字符串。

构造方法如下:

1
BlacklistingTextInputFormatter(
2
  //Pattern类型必传参数,匹配和替换传入文本的值的模式
3
  this.blacklistedPattern, {
4
  //String类型可选命名参数,用于替换找到的模式的字符串。
5
  this.replacementString = '',
6
})

BlacklistingTextInputFormatter 还提供了一个静态属性,定义如下:

1
static final BlacklistingTextInputFormatter singleLineFormatter
2
      = BlacklistingTextInputFormatter(RegExp(r'\n'));

此属性只能输入单行。

WhitelistingTextInputFormatter 格式器提供了一个白名单的功能,作用是只允许插入百白名单设置的字符。

构造方法如下:

1
WhitelistingTextInputFormatter(
2
  //Pattern类型必传参数,用于提取允许的字符的所有实例
3
  this.whitelistedPattern
4
)

WhitelistingTextInputFormatter 还提供了一个静态的属性,定义如下:

1
static final WhitelistingTextInputFormatter digitsOnly
2
      = WhitelistingTextInputFormatter(RegExp(r'\d+'));

此属性限制只接受数字 0 到 9 。

LengthLimitingTextInputFormatter 格式器提供了一个防止插入超过限定字符的功能(当前定义为 Unicode 标量值)。

构造方法如下:

1
LengthLimitingTextInputFormatter(
2
	//int类型必传参数,最大字符长度
3
  this.maxLength
4
)

Pattern 是一个抽象类,实现了在字符串中进行基本搜索的接口。其直接实现类有 GlobParserRegExpString

关于更多 TextInputFormatter 会在后续文章中详细介绍。

TextForm 使用如下:

1
import 'package:flutter/material.dart';
2
import 'package:flutter/services.dart';
3
4
void main() => runApp(MyApp());
5
6
class MyApp extends StatelessWidget {
7
  @override
8
  Widget build(BuildContext context) {
9
    return MaterialApp(
10
      home: MyHomePage(),
11
    );
12
  }
13
}
14
15
class MyHomePage extends StatefulWidget {
16
  @override
17
  State<StatefulWidget> createState() {
18
    return _MyHomePageState();
19
  }
20
}
21
22
class _MyHomePageState extends State<MyHomePage> {
23
  TextEditingController _controllerUser;
24
  TextEditingController _controllerPwd;
25
  @override
26
  void initState() {
27
    super.initState();
28
    _controllerUser = TextEditingController();
29
    _controllerPwd = TextEditingController();
30
  }
31
32
  @override
33
  void dispose() {
34
    _controllerUser.dispose();
35
    _controllerPwd.dispose();
36
    super.dispose();
37
  }
38
39
  @override
40
  Widget build(BuildContext context) {
41
    return Scaffold(
42
      appBar: AppBar(
43
        title: Text("HomePage"),
44
      ),
45
      body: Container(
46
        padding: EdgeInsets.only(left: 50, top: 20, right: 50),
47
        child: Column(
48
          children: <Widget>[
49
            TextField(     //账户输入框
50
              controller: _controllerUser,
51
              decoration: InputDecoration(
52
                labelText: "用户名",
53
                helperText: "请输入用户名",
54
                hintText: "请输入数字或字母",
55
                prefixIcon: Icon(Icons.account_box),
56
                filled: true,
57
                fillColor: Colors.yellow,
58
                border: OutlineInputBorder(
59
                  borderRadius: BorderRadius.all(Radius.circular(10)),
60
                ),
61
              ),
62
              maxLength: 10,
63
              textInputAction: TextInputAction.next,
64
              textCapitalization: TextCapitalization.none,
65
              style: TextStyle(fontSize: 18, ),
66
              textAlignVertical: TextAlignVertical.center,
67
              toolbarOptions: ToolbarOptions(selectAll: true, copy: true),
68
              autocorrect: true,
69
              enableSuggestions: false,
70
              onChanged: (String changeValue){
71
                print(changeValue);
72
              },
73
              onEditingComplete: (){
74
                print("输入完成下一步操作");
75
              },
76
              onSubmitted: (String resultValue){
77
                print(resultValue);
78
              },
79
80
              inputFormatters:<TextInputFormatter>[
81
                BlacklistingTextInputFormatter.singleLineFormatter,
82
                WhitelistingTextInputFormatter.digitsOnly,
83
                LengthLimitingTextInputFormatter(10),
84
              ],
85
              keyboardAppearance: Brightness.light,
86
              scrollPadding: EdgeInsets.all(50),
87
              onTap: ()=> print("tap"),
88
              buildCounter: (BuildContext context, {int currentLength, int maxLength, bool isFocused}){
89
                return Text("$currentLength/$maxLength");
90
              },
91
            ),
92
            SizedBox(height: 20,),
93
            TextField(            //密码输入框
94
              controller: _controllerPwd,
95
              decoration: InputDecoration(
96
                labelText: "密  码",
97
                helperText: "请输入数字密码",
98
                hintText: "请输入数字",
99
                prefixIcon: Icon(Icons.account_box),
100
                counterText: "密码字数统计",
101
                filled: true,
102
                fillColor: Colors.yellow,
103
                border: OutlineInputBorder(
104
                  borderRadius: BorderRadius.all(Radius.circular(10)),
105
                ),
106
              ),
107
              keyboardType: const TextInputType.numberWithOptions(signed: false),
108
              obscureText: true,
109
            ),
110
            SizedBox(height: 20,),
111
            RaisedButton(
112
              child: Text("提交"),
113
              onPressed: (){
114
               showDialog(context: context,
115
                 builder: (BuildContext context){
116
                  return AlertDialog(
117
                    title: Text("查看结果"),
118
                    content: Text("${_controllerUser.text}\n${_controllerPwd.text}"),
119
                  );
120
                 },
121
               );
122
              },
123
            ),
124
          ],
125
        ),
126
      ),
127
    );
128
  }
129
}

效果如下:

2020421030
陌问.MW wechat
欢迎关注微信公众号,及时获取知识!