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

一、FormField Widget

FormField 是单个表单 Widget ,用于维护表单字段的当前状态,以便在 UI 中直观的反应更新和验证错误。主要就是为内部的 Widget 提供保存、重置、验证事件处理。

Form 内部使用时,可以使用 FormState 上的方法来整体查询或操作表单数据。 例如,调用 FormState.save 将依次调用每个 FormFieldonSaved 回调。

如果要检索其当前状态(例如,如果您希望一个表单域依赖于另一个表单域),请将 GlobalKeyFormField 一起使用。

构造方法如下:

1
const FormField({
2
  Key key,
3
  //FormFieldBuilder<T>类型必传参数,返回代表此表单字段的小部件的函数。它以表单字段状态作为输入传递,
4
  //其中包含该字段的当前值和验证状态
5
  @required this.builder,
6
  //FormFieldSetter<T>类型可选命名参数,通过FormState.save保存表单时,使用最终值调用的可选方法
7
  this.onSaved,
8
  //FormFieldValidator<T>类型可选命名参数,验证输入的可选方法。如果输入无效,则返回要显示的错误字符串,
9
  //否则返回null
10
  this.validator,
11
  //T泛型可选命名参数,用于将表单字段初始化为,否则为null
12
  this.initialValue,
13
  //bool类型可选命名参数,如果为true,则此表单字段将在每次更改后立即验证并更新其错误文本。
14
  //否则,您必须调用FormFieldState.validate进行验证。如果表单的一部分可以自动验证,则将忽略此值
15
  this.autovalidate = false,
16
  //bool类型可选命名参数,表单是否能够接收用户输入
17
  this.enabled = true,
18
})

builderFormFieldBuilder<T> 类型,是一个返回 Widget 的方法,原型为:Widget Function(FormFieldState<T> field) 。该方法有一个 FormFieldState<T> 类型的参数,为 FormField 的当前状态,可以用来获取表单的当前值和错误信息。当前 FormFieldState<T> 的实例只能在 builder 内部访问。如果需要在其他地方访问,需要使用 GlobalKey 作为 FormFieldkey 参数,然后使用 currentState 属性进行状态访问。

理论上 builder 构建的 Widget 可以是任意的 Widget ,也确实可以这么做。但是对于像 TextImage 等这样的非用户输入 Widget ,使用 builder 来构建意义不是很大。因为其 ``FormFieldState参数是用来获取状态的,其可以进行内容的重置、保存等操作,所以一般builder` 应该与可与用户交互的输入性 Widget 一起使用。

GlobalKey 用于定义全局唯一的键,全局键唯一标识元素。全局键提供了对与这些元素相关联的其他对象的访问,如构建上下文。对于状态窗口小部件,全局键还提供对状态的访问。当具有全局键的小部件从树中的一个位置移动到树中的另一个位置时,它们的子树将成为其父树。为了重设其子树,小部件必须在与从树中的旧位置删除的同一动画帧中到达树中的新位置。全局键相对昂贵。如果不需要上面列出的任何功能,请考虑改用 KeyValueKeyObjectKeyUniqueKey

onSavedFormFieldSetter<T> 类型,是一个无返回值的方法,原型为:void Function(T newValue)

validatorFormFieldValidator<T> 类型,是一个返回值为 String 类型的方法,其原型为:String Function(T value) 。用来在验证失败的情况下返回错误信息。

使用方法如下:

1
import 'package:flutter/material.dart';
2
3
void main() => runApp(MyApp());
4
5
class MyApp extends StatelessWidget {
6
  @override
7
  Widget build(BuildContext context) {
8
    return MaterialApp(
9
      home: MyHomePage(),
10
    );
11
  }
12
}
13
14
class MyHomePage extends StatefulWidget {
15
  @override
16
  State<StatefulWidget> createState() {
17
    return _MyHomePageState();
18
  }
19
}
20
21
class _MyHomePageState extends State<MyHomePage> {
22
  final GlobalKey<FormFieldState> _formFieldKey = GlobalKey();
23
  @override
24
  Widget build(BuildContext context) {
25
    return Scaffold(
26
      appBar: AppBar(
27
        title: Text("HomePage"),
28
      ),
29
      body: Container(
30
        padding: EdgeInsets.only(left: 50, top: 20, right: 50),
31
        child: Column(
32
          children: <Widget>[
33
            FormField<String>(       		//FormField
34
              key:  _formFieldKey,
35
              builder: (FormFieldState<String> state) {
36
                return TextField(
37
                  decoration: InputDecoration(
38
                    errorText: state.errorText,
39
                  ),
40
                  onChanged: (String newValue){
41
                    state.didChange(newValue);
42
                  },
43
                );
44
              },
45
              onSaved: (String value){
46
                if(value.length <= 10) {
47
                  print("保存数据:$value");
48
                }
49
              },
50
              validator: (String value){
51
                if(value.length > 10) {
52
                  return "输入字符不能超过10个";
53
                }
54
                return null;
55
              },
56
              initialValue: "",
57
              autovalidate: true,
58
            ),
59
            SizedBox(height: 30,),
60
            RaisedButton(
61
              child: Text("验证"),
62
              onPressed: (){
63
                _formFieldKey.currentState.save();
64
                _formFieldKey.currentState.validate();
65
              },
66
            ),
67
          ],
68
        )
69
      ),
70
    );
71
  }
72
}

效果如下:

2020441013

二、TextFormField Widget

TextFormFieldFormField 的子类,是单个表单文本 Widget 。它是一个 FormFiled 包含了一个 TextField ,也就是本文上述内容和前一篇文章介绍内容的组合形式。它提供了非常方便的功能将 FormFieldTextField 组合使用,免去开发者手动组合二者的繁杂过程。构造方法如下:

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

上面的所有属性都在本文和上一篇文章介绍过,这里不多做说明,使用方法如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  TextEditingController _controller;
3
  final GlobalKey<FormFieldState> _formFieldKey = GlobalKey();
4
5
  @override
6
  Widget build(BuildContext context) {
7
    return Scaffold(
8
      appBar: AppBar(
9
        title: Text("HomePage"),
10
      ),
11
      body: Container(
12
        padding: EdgeInsets.only(left: 50, top: 20, right: 50),
13
        child: Column(
14
          children: <Widget>[
15
            TextFormField(					//TextFormField
16
              key: _formFieldKey,
17
              decoration: InputDecoration(
18
                icon: Icon(Icons.person),
19
              ),
20
              onSaved: (String value){
21
               print(value);
22
              },
23
              validator: (String value){
24
                print(value);
25
                if(value == null || value.isEmpty) {
26
                  return "请输入用户名";
27
                }
28
                return value.contains("@") ?  null: "用户名不合法,必须包含@";
29
              },
30
            ),
31
            SizedBox(height: 30,),
32
            RaisedButton(
33
              child: Text("验证"),
34
              onPressed: (){
35
                _formFieldKey.currentState.save();
36
                _formFieldKey.currentState.validate();
37
              },
38
            ),
39
          ],
40
        )
41
      ),
42
    );
43
  }
44
}

效果如下:

2020451242

三、Form Widget

Form 是用于将多个表单 Widget (如:TextField )组合在一起的容器。

每个单独的表单字段都应包装在 FormField 小部件中,并且 Form 小部件应作为所有这些的共同祖先。 在 FormState 上调用方法以保存,重置或验证作为此 Form 的后代的每个 FormField 。 若要获取 FormState ,可以将 Form.of 与祖先是 Form 的上下文一起使用,或将 GlobalKey 传递给 Form 构造函数并调用 GlobalKey.currentState

构造方法如下:

1
const Form({
2
  Key key,
3
  //Widget类型必传参数,要使用的子级Widget,可以使用 
4
  @required this.child,
5
  //bool类型可选命名参数,如果为true,则每次更改后,表单字段都会立即验证并更新其错误文本。
6
  //否则,必须调用FormState.validate进行验证
7
  this.autovalidate = false,
8
  //WillPopCallback类型可选命名参数,使表单能够否决用户尝试关闭包含该表单的ModalRoute的尝试
9
  this.onWillPop,
10
  //VoidCallback类型可选命名参数,表单字段之一更改时调用
11
  this.onChanged,
12
})

onWillPopWillPopCallback 类型,其为一个返回值为 Future<bool> 的方法,原型为:Future<bool> Function() 。如果回调返回一个解析为 falseFuture ,则不会弹出表单的路由。

onChangedVoidCallback 类型,是一个无返回值的方法,原型为:void Function()

FormState 是与 Form 关联的状态类。FormState 对象可用于保存,重置和验证作为关联 Form 的后代的每个 FormField 。可以通过 Form.of 获取。

Form 使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  final GlobalKey<FormState> _formKey = GlobalKey();
3
  TextEditingController _aController;
4
  TextEditingController _pController;
5
  @override
6
  void initState() {
7
    _aController = TextEditingController();
8
    _pController = TextEditingController();
9
    super.initState();
10
  }
11
  @override
12
  Widget build(BuildContext context) {
13
    return Scaffold(
14
      appBar: AppBar(
15
        title: Text("HomePage"),
16
      ),
17
      body: Container(
18
        color: Colors.yellow,
19
        padding: EdgeInsets.all(40),
20
        child: Form(
21
          key: _formKey,
22
          child: Column(
23
            children: <Widget>[
24
              TextFormField(
25
                controller: _aController,
26
                decoration: InputDecoration(
27
                  icon: Icon(Icons.person),
28
                ),
29
                onSaved: (String value){
30
                 print(value);
31
                },
32
                validator: (String value){
33
                  print(value);
34
                  if(value == null || value.isEmpty) {
35
                    return "请输入用户名";
36
                  }
37
                  return value.contains("@") ?  null: "用户名不合法,必须包含@";
38
                },
39
              ),
40
              SizedBox(height: 30,),
41
              TextFormField(
42
                controller: _pController,
43
                obscureText: true,
44
                decoration: InputDecoration(
45
                  icon: Icon(Icons.vpn_key),
46
                ),
47
                onSaved: (String value){
48
                  print(value);
49
                },
50
                validator: (String value){
51
                  print(value);
52
                  if(value == null || value.isEmpty) {
53
                    return "请输入密码";
54
                  }else if(value.length < 5 || value.length > 10){
55
                    return "密码长度错误";
56
                  }
57
                  return null;
58
                },
59
              ),
60
              SizedBox(height: 30,),
61
              Row(
62
                mainAxisAlignment: MainAxisAlignment.center,
63
                children: <Widget>[
64
                  RaisedButton(
65
                    child: Text("重置"),
66
                    onPressed: (){
67
                      _formKey.currentState.reset();
68
                    },
69
                  ),
70
                  SizedBox(width: 20,),
71
                  RaisedButton(
72
                    child: Text("登录"),
73
                    onPressed: (){
74
                      if(_formKey.currentState.validate()){
75
                        print("登录操作。 ${_aController.text}  ${_pController.text}");
76
                      }
77
                    },
78
                  ),
79
                ],
80
              ),
81
            ],
82
          ),
83
        ),
84
      ),
85
    );
86
  }
87
}

效果如下:

202045145

四、DropdownButtonFormField Widget

DropdownButtonFormField 是将 DropdownButton 包装在 FormField 中的 Widget 。关于 DropdownButton 在前文介绍过,地址为:http://www.mwpush.com/content/aa8d162.html

DropdownButtonFormField 构造方法如下:

1
DropdownButtonFormField({
2
  Key key,
3
  //T泛型类型,用于设置初始值
4
  T value,
5
  //List<DropdownMenuItem<T>>类型必传参数,设置的菜单项列表
6
  @required List<DropdownMenuItem<T>> items,
7
  //DropdownButtonBuilder类型可选命名参数,用于定制与项目中的下拉菜单
8
  //项(DropdownMenuItem)相对应的按钮
9
  DropdownButtonBuilder selectedItemBuilder,
10
  //Widget类型可选命名参数,下拉按钮显示的占位符Widget
11
  Widget hint,
12
  //ValueChanged<T>类型必传参数,选择一个菜单项时调用
13
  @required this.onChanged,
14
  //InputDecoration类型可选命名参数,在文本字段周围显示的装饰
15
  this.decoration = const InputDecoration(),
16
  //FormFieldSetter<T>类型可选命名参数,通过FormState.save保存表单时,使用最终值调用的可选方法
17
  FormFieldSetter<T> onSaved,
18
  //FormFieldValidator<T>类型可选命名参数,验证输入的可选方法。如果输入无效,则返回要显示的错误字符串,
19
  //否则返回null
20
  FormFieldValidator<T> validator,
21
  //bool类型可选命名参数,如果为true,则此表单字段将在每次更改后立即验证并更新其错误文本。
22
  //否则,您必须调用FormFieldState.validate进行验证。如果表单的一部分可以自动验证,则将忽略此值
23
  bool autovalidate = false,
24
  //Widget类型可选命名参数,当下拉菜单被禁用时显示的内容
25
  Widget disabledHint,
26
  //int类型可选命名参数,打开时放置菜单的z坐标
27
  int elevation = 8,
28
  //TextStyle类型可选命名参数,用于设置下拉菜单中文本的文本的样式,以及点击按钮时出现的下拉菜单
29
  TextStyle style,
30
  //Widget类型可选命名参数,下拉按钮图标的Widget
31
  Widget icon,
32
  //Color类型可选命名参数,按钮禁用状态的内部图标的颜色
33
  Color iconDisabledColor,
34
  //Color类型可选命名参数,按钮启用状态的内部图标的颜色
35
  Color iconEnabledColor,
36
  //double类型可选命名参数,下拉按钮的向下箭头图标按钮的大小
37
  double iconSize = 24.0,
38
  //bool类型可选命名参数,是否降低按钮的高度
39
  bool isDense = false,
40
  //bool类型可选命名参数,是否将下拉列表的内部内容设置为水平填充其父项
41
  bool isExpanded = false,
42
  //double类型可选命名参数,如果为null,则菜单项高度将根据每个菜单项的固有高度而变化
43
  double itemHeight,
44
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  final GlobalKey<FormState> _formKey = GlobalKey();
3
  int currentSelectedIndex = 1;
4
  @override
5
  Widget build(BuildContext context) {
6
    return Scaffold(
7
      appBar: AppBar(
8
        title: Text("HomePage"),
9
      ),
10
      body: Container(
11
        color: Colors.yellow,
12
        padding: EdgeInsets.all(40),
13
        child: Form(
14
          key: _formKey,
15
          child: Column(
16
            children: <Widget>[
17
              DropdownButtonFormField(       //DropdownButtonFormField
18
                items: <DropdownMenuItem<int>>[
19
                  DropdownMenuItem(
20
                    child: Text("Item 1"),
21
                    value: 1,
22
                  ),
23
                  DropdownMenuItem(
24
                    child: Text("Item 2"),
25
                    value: 2,
26
                  ),
27
                  DropdownMenuItem(
28
                    child: Text("Item 3"),
29
                    value: 3,
30
                  ),
31
                ],
32
                value: currentSelectedIndex,
33
                onChanged: (value) {
34
                  setState(() {
35
                    currentSelectedIndex = value;
36
                  });
37
                },
38
                validator: (int value){
39
                  if(value == null) {
40
                    return "error";
41
                  }else if(value != 2) {
42
                    return "选择错误";
43
                  }
44
                  return null;
45
                },
46
              ),
47
              SizedBox(height: 20,),
48
              RaisedButton(
49
                child: Text("验证"),
50
                onPressed: (){
51
                  _formKey.currentState.validate();
52
                },
53
              ),
54
            ],
55
          ),
56
        ),
57
      ),
58
    );
59
  }
60
}

效果如下:

202045305

五、EditableText Widget

EditableText 是基础文本输入 Widget 。它与 TextInput 服务交互,以使用户编辑其包含的文本。它还提供滚动,选择和光标移动。此小部件不提供任何焦点管理(例如,点击聚焦)。它是输入 Widget 的基础组件,TextField 是对 EditableText 的包装。如果有输入需要,应选择使用 TextField

rendererIgnoresPointerfalse (默认情况下为 false )时,此小部件为用户操作提供基本的,与平台无关的手势处理,例如轻击,长按和滚动。 要在文本字段中针对输入手势严格遵循平台行为,请使用 TextFieldCupertinoTextField 。 对于自定义选择行为,以编程方式调用诸如 RenderEditable.selectPositionRenderEditable.selectWord 等方法。

构造方法如下:

1
EditableText({
2
  Key key,
3
  //TextEditingController类型必传参数,控制正在编辑的文本
4
  @required this.controller,
5
  //FocusNode类型必传参数,定义此小部件的键盘焦点
6
  @required this.focusNode,
7
  //bool类型可选命名参数,文字是否可以更改
8
  this.readOnly = false,
9
  //bool类型可选命名参数,是否隐藏正在编辑的文本(例如,用于密码)
10
  this.obscureText = false,
11
  //bool类型可选命名参数,是否启用自动校正
12
  this.autocorrect = true,
13
  //bool类型可选命名参数,是否在用户输入时显示输入建议
14
  this.enableSuggestions = true,
15
  //TextStyle类型必传参数,用于可编辑文本的文本样式
16
  @required this.style,
17
  //StrutStyle类型可选命名参数,用于垂直布局的支杆样式
18
  StrutStyle strutStyle,
19
  //Color类型必传参数,绘制光标时使用的颜色
20
  @required this.cursorColor,
21
  //Color类型必传参数,渲染浮动光标时,绘制与文本对齐的背景光标时使用的颜色
22
  @required this.backgroundCursorColor,
23
  //TextAlign类型可选命名参数,文本应如何水平对齐
24
  this.textAlign = TextAlign.start,
25
  //TextDirection类型可选命名参数,文字的方向性
26
  this.textDirection,
27
  //Locale类型可选命名参数,当可以根据区域设置以不同方式呈现相同的Unicode字符时,用于选择字体
28
  this.locale,
29
  //double类型可选命名参数,每个逻辑像素的字体像素数
30
  this.textScaleFactor,
31
  //int类型可选命名参数,文本可跨越的最大行数,必要时可换行
32
  this.maxLines = 1,
33
  //int类型可选命名参数,当内容跨越更少的行时要占用的最小行数。同时设置maxLines时,高度将在指定的线范
34
  //围之间增长。当maxLines为null时,它将从minLines开始根据需要增长
35
  this.minLines,
36
  //bool类型可选命名参数,此小部件的高度是否将调整大小以填充其父级
37
  this.expands = false,
38
  //bool类型可选命名参数,无论文本宽度如何,文本是否都将采用全宽度
39
  this.forceLine = true,
40
  //TextWidthBasis类型可选命名参数,测量一行或多行文本宽度的不同方法
41
  this.textWidthBasis = TextWidthBasis.parent,
42
  //bool类型可选命名参数,如果没有其他焦点,则此文本字段是否应该焦点自己
43
  this.autofocus = false,
44
  //bool类型可选命名参数,是否显示光标
45
  bool showCursor,
46
  //bool类型可选命名参数,是否显示选择手柄
47
  this.showSelectionHandles = false,
48
  //Color类型可选命名参数,绘制选区时使用的颜色
49
  this.selectionColor,
50
  //TextSelectionControls类型可选命名参数,用于构建文本选择手柄和工具栏的可选委托
51
  this.selectionControls,
52
  //TextInputType类型可选命名参数,用于编辑文本的键盘类型
53
  TextInputType keyboardType,
54
  //TextInputAction类型可选命名参数,与软键盘一起使用的操作按钮的类型
55
  this.textInputAction,
56
  //TextCapitalization类型可选命名参数,配置平台键盘如何选择大写或小写键盘
57
  this.textCapitalization = TextCapitalization.none,
58
  //ValueChanged<String>类型可选命名参数,当用户发起对TextField值的更改时调用的方法
59
  this.onChanged,
60
  //VoidCallback类型可选命名参数,当用户提交可编辑的内容时调用(例如,用户按下键盘上的“完成”按钮)
61
  this.onEditingComplete,
62
  //ValueChanged<String>类型可选命名参数,当用户指示他们已完成字段中文本的编辑时调用
63
  this.onSubmitted,
64
  //SelectionChangedCallback类型可选命名参数,当用户更改文本选择(包括光标位置)时调用
65
  this.onSelectionChanged,
66
  //VoidCallback类型可选命名参数,点击选择句柄时调用的回调
67
  this.onSelectionHandleTapped,
68
  //List<TextInputFormatter>类型可选命名参数,可选的输入验证和格式替代
69
  List<TextInputFormatter> inputFormatters,
70
  //bool类型可选命名参数,如果为true,则此小部件创建的RenderEditable将不会处理指针事件,
71
  //请参见renderEditable和RenderEditable.ignorePointer
72
  this.rendererIgnoresPointer = false,
73
  //double类型可选命名参数,光标的粗细
74
  this.cursorWidth = 2.0,
75
  //Radius类型可选命名参数,游标的角应多圆
76
  this.cursorRadius,
77
  //bool类型可选命名参数,在每个光标闪烁期间,光标是否将从完全透明变为完全不透明
78
  this.cursorOpacityAnimates = false,
79
  //Offset类型可选命名参数,在屏幕上绘制光标时使用的偏移量(以像素为单位)
80
  this.cursorOffset,
81
  //bool类型可选命名参数,是将光标绘制在文本的上方还是下方
82
  this.paintCursorAboveText = false,
83
  //EdgeInsets类型可选命名参数,当Textfield滚动到视图中时,将填充配置为围绕Scrollable的边缘
84
  this.scrollPadding = const EdgeInsets.all(20.0),
85
  //Brightness类型可选命名参数,键盘外观
86
  this.keyboardAppearance = Brightness.light,
87
  //DragStartBehavior类型可选命名参数,确定处理拖动开始行为的方式
88
  this.dragStartBehavior = DragStartBehavior.start,
89
  //bool类型可选命名参数,如果为true,则长按此TextField将选择文本并显示剪切/复制/粘贴菜单,
90
  //而点击将移动文本插入符号
91
  this.enableInteractiveSelection = true,
92
  //ScrollController类型可选命名参数,垂直滚动输入时使用的ScrollController
93
  this.scrollController,
94
  //ScrollPhysics类型可选命名参数,垂直滚动输入时使用的ScrollPhysics
95
  this.scrollPhysics,
96
  //ToolbarOptions类型可选命名参数,工具栏选项的配置
97
  this.toolbarOptions = const ToolbarOptions(
98
    copy: true,
99
    cut: true,
100
    paste: true,
101
    selectAll: true,
102
  ),
103
})

基本使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  TextEditingController _controller;
3
  @override
4
  void initState() {
5
    super.initState();
6
    _controller = TextEditingController();
7
  }
8
9
  @override
10
  void dispose() {
11
    _controller.dispose();
12
    super.dispose();
13
  }
14
15
  @override
16
  Widget build(BuildContext context) {
17
    return Scaffold(
18
      appBar: AppBar(
19
        title: Text("HomePage"),
20
      ),
21
      body: Container(
22
        color: Colors.yellow,
23
        height: 100,
24
        child: EditableText(
25
          controller: _controller,
26
          focusNode: FocusNode(),
27
          cursorColor: Colors.red,
28
          backgroundCursorColor: Colors.lightBlue,
29
          style: TextStyle(fontSize: 20),
30
          textScaleFactor: 2,
31
          expands: true,
32
          maxLines: null,
33
          minLines: null,
34
          selectionColor: Colors.orange,
35
        ),
36
      ),
37
    );
38
  }
39
}
陌问.MW wechat
欢迎关注微信公众号,及时获取知识!