一、TextField学习

TextField 是文本输入组件，即输入框，常用组件之一

二、TextField源码

const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦点
    this.decoration = const InputDecoration(),//装饰
    TextInputType keyboardType,//键盘类型，输入类型
    this.textInputAction,//键盘按钮
    this.textCapitalization = TextCapitalization.none,//大小写
    this.style,//样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//水平对齐方式
    this.textAlignVertical,//垂直对齐方式
    this.textDirection,
    this.readOnly = false,//是否只能读取
    ToolbarOptions toolbarOptions,//配置工具栏
    this.showCursor,
    this.autofocus = false,//自动获取焦点
    this.obscuringCharacter = '•',
    this.obscureText = false,//是否隐藏文本，密码类型
    this.autocorrect = true,//自动更正
    SmartDashesType smartDashesType,
    SmartQuotesType smartQuotesType,
    this.enableSuggestions = true,
    this.maxLines = 1,//最大行数
    this.minLines,//最小行数
    this.expands = false,
    this.maxLength,//最多输入数，不为0时右下角有计数器
    this.maxLengthEnforced = true,
    this.onChanged,//输入改变回调
    this.onEditingComplete,//输入完成时，配合TextInputAction.done使用
    this.onSubmitted,//提交时,配合TextInputAction
    this.onAppPrivateCommand,
    this.inputFormatters,//输入校验
    this.enabled,//是否可用
    this.cursorWidth = 2.0,//光标宽度
    this.cursorHeight,//光标高度
    this.cursorRadius,//光标圆角
    this.cursorColor,//光标颜色
    this.selectionHeightStyle = ui.BoxHeightStyle.tight,
    this.selectionWidthStyle = ui.BoxWidthStyle.tight,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,
    this.onTap,//点击事件
    this.mouseCursor,
    this.buildCounter,
    this.scrollController,
    this.scrollPhysics,
    this.autofillHints,
    this.restorationId,
  }) : assert(textAlign != null),
       assert(readOnly != null),
       assert(autofocus != null),
       assert(obscuringCharacter != null && obscuringCharacter.length == 1),
       assert(obscureText != null),
       assert(autocorrect != null),
       smartDashesType = smartDashesType ?? (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled),
       smartQuotesType = smartQuotesType ?? (obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled),
       assert(enableSuggestions != null),
       assert(enableInteractiveSelection != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(dragStartBehavior != null),
       assert(selectionHeightStyle != null),
       assert(selectionWidthStyle != null),
       assert(maxLines == null || maxLines > 0),
       assert(minLines == null || minLines > 0),
       assert(
         (maxLines == null) || (minLines == null) || (maxLines >= minLines),
         "minLines can't be greater than maxLines",
       ),
       assert(expands != null),
       assert(
         !expands || (maxLines == null && minLines == null),
         'minLines and maxLines must be null when expands is true.',
       ),
       assert(!obscureText || maxLines == 1, 'Obscured fields cannot be multiline.'),
       assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0),
       // Assert the following instead of setting it directly to avoid surprising the user by silently changing the value they set.
       assert(!identical(textInputAction, TextInputAction.newline) ||
         maxLines == 1 ||
         !identical(keyboardType, TextInputType.text),
         'Use keyboardType TextInputType.multiline when using TextInputAction.newline on a multiline TextField.'),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       toolbarOptions = toolbarOptions ?? (obscureText ?
         const ToolbarOptions(
           selectAll: true,
           paste: true,
         ) :
         const ToolbarOptions(
           copy: true,
           cut: true,
           selectAll: true,
           paste: true,
         )),
       super(key: key);

三、TextField属性说明

四、InputDecoration的源码

const InputDecoration({
    this.icon,//位于装饰器外部和输入框前面的图片
    this.labelText,//用于描述输入框
    this.labelStyle,// 控制labelText的样式
    this.helperText,//帮助文本
    this.helperStyle,//helperText的样式
    this.helperMaxLines,//帮助文本的最大行数
    this.hintText,//提示文本
    this.hintStyle,//hintText的样式
    this.hintMaxLines,//提示文本的最大行数
    this.errorText,//错误文本
    this.errorStyle,//errorText的样式
    this.errorMaxLines,//错误文本的最大行数
    @Deprecated(
      'Use floatingLabelBehavior instead. '
      'This feature was deprecated after v1.13.2.'
    )
    this.hasFloatingPlaceholder = true,//labelText是否浮动
    this.floatingLabelBehavior = FloatingLabelBehavior.auto,//浮动标签应该如何显示
    this.isCollapsed = false,//是否可折叠
    this.isDense,//改变输入框是否为密集型
    this.contentPadding,//内间距
    this.prefixIcon,//位于输入框内部起始位置的图标。
    this.prefixIconConstraints,//设置起始位置图片的大小
    this.prefix,//预先填充的Widget
    this.prefixText,//预填充的文本
    this.prefixStyle, //prefixText的样式
    this.suffixIcon,//位于输入框后面的图片
    this.suffix,//位于输入框尾部的控件
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle, //suffixText的样式
    this.suffixIconConstraints,//设置输入框后面图片的大小
    this.counter,//位于输入框右下方的小控件
    this.counterText,//位于右下方显示的文本
    this.counterStyle,//counterText的样式
    this.filled,  //如果为true，则输入使用fillColor指定的颜色填充
    this.fillColor,//相当于输入框的背景颜色
    this.focusColor,//获取焦点时颜色
    this.hoverColor,
    this.errorBorder, //errorText不为空，输入框没有焦点时要显示的边框
    this.focusedBorder,//输入框有焦点时的边框
    this.focusedErrorBorder,//输入框有焦点时的边框
    this.disabledBorder,//输入框禁用时显示的边框
    this.enabledBorder,//输入框可用时显示的边框
    this.border,//正常情况下的边框
    this.enabled = true,//输入框是否可用
    this.semanticCounterText,
    this.alignLabelWithHint,
  }) : assert(enabled != null),
       assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not supported.'),
       assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not supported.');

五、InputDecoration的属性介绍

border的优先级

1. 控件禁用时
   当enabled为false时，如果指定了disabledBorder，优先使用disabledBorder，没有的话设置disabledBorder则使用border的部分样式（颜色默认是灰色）
2. 控件启用(enable为true)，但errorText有值
   输入框没有焦点时，优先使用errorBorder的样式，输入框有焦点时，优先使用focusedErrorBorder，如果这两个都没有设置则使用border的部分样式（颜色默认是红色）
3. 控件启用状态，且errorText没有值
   输入框没有焦点时，优先使用enabledBorder ，有焦点时，优先使用focusedBorder，两者均没有指定时，使用默认的border

六、TextField、InputDecoration的demo

6.1、InputDecoration的使用

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("TextField学习"),
          ),
          body: Container(
            padding: EdgeInsets.all(15),
            child: TextField(
                decoration: InputDecoration(
                  icon: Icon(Icons.person,size: 35,color: Colors.blue,),
                  labelText: "我是labelText",
                  labelStyle: TextStyle(
                    fontSize: 15
                  ),
                  helperText: "我是helperText",
                  helperStyle: TextStyle(
                    color: Colors.orange
                  ),
                  helperMaxLines: 2,
                  hintText: "我是hintText我是hintText我是hintText我是hintText我是hintText我是hintText我是hintText我是hintText我是hintText我是hintText",
                  hintMaxLines: 1,
                  errorText: "我是errorText",
                  errorStyle: TextStyle(
                    color: Colors.purpleAccent,
                    fontSize: 12
                  ),
                  //labelText是否会浮动
                  hasFloatingPlaceholder: true,
                  //labelText浮动的如何显示
                  floatingLabelBehavior:FloatingLabelBehavior.always,
                  //是否为密集型
                  isDense: false,
                  //内间距
                  contentPadding:EdgeInsets.fromLTRB(5, 0, 5, 0),
                  //位于输入框内部起始位置的图标
                  prefixIcon: Icon(Icons.search),
                    //设置起始位置图片的大小
                  prefixIconConstraints: BoxConstraints(minHeight: 5),
                  //预填充的widget
//                  prefix: Container(height: 10,width: 10,color: Colors.red,),
                    //预填充的文本
                  prefixText: "+86",
                    //位于输入框后面的图片
                  suffixIcon: Icon(Icons.cleaning_services),
                  //控制输入框后面的图片的大小
                    suffixIconConstraints:BoxConstraints(minHeight: 5),
                  //位于右下方显示的组件
//                  counter: Text("0/10"),
                  //位于右下方显示的文本
                  counterText: "0/10",
                  //是否使用fillColor颜色为输入框背景色
                  filled: true,
                  //输入框背景色
                  fillColor: Colors.white,
                  //有errorText，未获取焦点边框
                  errorBorder: OutlineInputBorder(
                      /*边角*/
                      borderRadius: BorderRadius.all(
                        Radius.circular(5), //边角为30
                      ),
                      borderSide: BorderSide(
                        color: Colors.yellow,
                        width: 1
                      )
                  ),
                  //有errorText，获取焦点边框
                  focusedErrorBorder: OutlineInputBorder(
                    /*边角*/
                      borderRadius: BorderRadius.all(
                        Radius.circular(5), //边角为30
                      ),
                      borderSide: BorderSide(
                          color: Colors.blue,
                          width: 1
                      )
                  ),
                ),
            ),
          )),
    );

e57566e83b1925f3f7194041e6c6299.png

6.2、TextField设置内容，并且保持光标在末尾

void main() {
  runApp(TextFieldFul());
}


class TextFieldFul extends StatefulWidget {
  TextFieldFul({Key key}) : super(key: key);

  _TextFieldFulState createState() => _TextFieldFulState();
}

class _TextFieldFulState extends State<TextFieldFul> {
  var textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    //初始化输入框的内容
    String initStr = "ysl";
    //初始化光标在文本的后面
    textEditingController = TextEditingController.fromValue(
      //初始化文本的显示
        TextEditingValue(
          //设置初始化文本
          text:initStr,
          //设置光标的位置
          selection: TextSelection.fromPosition(
            //设置文本的位置
            TextPosition(
              affinity: TextAffinity.downstream,
                //光标向后移动的位置
                offset:initStr.length
            )
          )
        )

    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("TextField学习"),
          ),
          body: Container(
            padding: EdgeInsets.all(15),
            child: TextField(
              controller: textEditingController,
              onChanged: (value){
                print(textEditingController.text);
              },
              autofocus: true,
            ),
          )),
    );
  }
}

6.3、TextField焦点获取和失去

class _TextFieldFulState extends State<TextFieldFul> {
  //焦点组件
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    focusNode.addListener(() {
      //是否获取焦点
      bool hasFocus = focusNode.hasFocus;
      //是否添加了监听
      bool hasListener = focusNode.hasListeners;

      print("ysl--hasFocus:${hasFocus},hasListener:${hasListener}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("TextField学习"),
          ),
          body: Container(
            padding: EdgeInsets.all(15),
            child: Column(
              children: [
                TextField(
                  autofocus: true,
                  focusNode: focusNode,
                ),
                SizedBox(
                  height: 15,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    OutlinedButton(child: Text("获取焦点"), onPressed: () {
                      FocusScope.of(context).requestFocus(focusNode);
                    }),
                    OutlinedButton(child: Text("失去焦点"), onPressed: () {
                      focusNode.unfocus();
                    })
                  ],
                )
              ],
            ),
          )),
    );
  }
}

09c0705afa19d880495b6fbee0aecac.png

6.4、TextField的简单使用

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("TextField学习"),
          ),
          body: Container(
            padding: EdgeInsets.all(10),
            child: TextField(
              //键盘类型
              keyboardType: TextInputType.phone,
              //键盘右下角按钮
              textInputAction: TextInputAction.none,
              //大小写
              textCapitalization: TextCapitalization.words,
              //样式
              style: TextStyle(
                color: Colors.red
              ),
              //水平对齐方式
              textAlign: TextAlign.center,
              //垂直对齐方式
              textAlignVertical: TextAlignVertical.center,
              //是否只读
              readOnly: false,
              //长按时弹出的菜单
              toolbarOptions:ToolbarOptions(
                copy: true,
                cut: true,
                paste: true,
                selectAll: true
              ) ,
              //是否自动获取焦点
              autofocus: false,
              //密码模式
              obscureText: true,
              //密码模式下显示文本
              obscuringCharacter: "*",
              //光标宽度
              cursorWidth: 5,
              cursorHeight: 10,
              //是否显示光标
              showCursor: true,
              //最多输入数量
              maxLength: 11,
              onTap: (){
                print("点击了输入框");
              },


            ),
          )),
    );

54e6d941e262066dfecb580fc8a1d52.png