1. 基本介绍

TextField 是 flutter 输入框组件，组件功能强大，属性比较多。常规使用比较简单，但是有复杂的输入框要求时，需要了解的属性就非常多了。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

TextField 属性	介绍
controller	控制器，可以控制 textField 的输入内容，也可以监听 textField 改变
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
decoration	textField 装饰，Flutter 组件之 InputDecoration 详解
keyboardType	TextInputType，键盘类型
textInputAction	键盘完成按钮样式
textCapitalization	大小写，默认为 TextCapitalization.none
style	字体样式
strutStyle	字体的布局样式，有兴趣的可以了解
textAlign	文字对齐方式，默认为 TextAlign.start
textAlignVertical	文字纵轴对齐方式
textDirection	TextDirection.ltr 是居左，TextDirection.rtl 是居右，和 textAlign 效果一致
readOnly	只读属性，默认为 false
toolbarOptions	长按时弹出的按钮设置，（如赋值，粘贴，全部选中等）
showCursor	是否显示光标，默认为 true
autofocus	是否自动聚焦，默认为 false
obscuringCharacter	加密输入时的替换字符，默认为 '•'
obscureText	是否加密，默认为 false
autocorrect	是否自动更正，默认为 true
smartDashesType	SmartDashesType 智能替换破折号，例如连续输入三个'-' 会自动替换成一个'——'，当 obseretext == true 时，smartDashesType 默认不可用
smartQuotesType	SmartQuotesType 智能替换引号，根据文字情况智能替换为左引号或者右引号，当 obseretext == true 时，SmartQuotesType 默认不可用
enableSuggestions	是否在用户输入时显示输入建议，此标志仅影响Android，默认为 true
maxLines	最大行数
minLines	最小行数
expands	是否填充父控件，默认为 false
maxLength	最大长度
maxLengthEnforced	是否强制限制，或者只提供字符计数器和警告，默认为 true
onChanged	输入框文字改变回调
onEditingComplete	输入框完成回调
onSubmitted	提交按钮点击回调
inputFormatters	格式化输入，注意这里比 onChanged 先执行
enabled	是否可用
cursorWidth	光标宽度，默认为 2.0
cursorRadius	光标圆角
cursorColor	光标颜色
selectionHeightStyle	选中高度样式，默认为 ui.BoxHeightStyle.tight
selectionWidthStyle	选中宽度样式，默认为 ui.BoxWidthStyle.tight
keyboardAppearance	键盘外观，此设置仅适用于iOS设备，iOS的白色以及黑色风格键盘
scrollPadding	滚动后距离边缘的距离，默认为 EdgeInsets.all(20.0)
dragStartBehavior	启动阻力，默认为 DragStartBehavior.start
enableInteractiveSelection	///默认为True，如果为false，则大多数辅助功能支持选择文本、复制和粘贴，移动插入符号将被禁用。
onTap	点击事件
mouseCursor	鼠标悬停，Web可以了解
buildCounter	InputDecorator.counter 自定义小工具
scrollController	滚动控制器
scrollPhysics	滚动物理效果
autofillHints	自动填充

4. TextField 详解

4.1 容器创建

在Flutter入门（27）：Flutter 组件之 InputDecoration 详解中，我们介绍过了TextField的基本样式，我们这里直接生成一个像样的输入框组件。

import 'package:flutter/material.dart';

class FMTextFieldVC extends StatefulWidget{
  @override
  FMTextFieldState createState() => FMTextFieldState();
}

class FMTextFieldState extends State<FMTextFieldVC>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField"),
      ),
      body: _listView(),
    );
  }

  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(30),
      children: [
        _textField(),
      ],
    );
  }

  TextField _textField(){
    return TextField(
      decoration: _normalDecoration(),
    );
  }

  InputDecoration _normalDecoration(){
    return InputDecoration(
      filled: true,
      fillColor: Colors.lightBlue.shade100,

      prefixIcon: Icon(Icons.phone),
      prefixText: "+86 ",
      prefixStyle: TextStyle(color: Colors.orange, fontSize:  18),

      hintText: "请输入手机号",

      suffixIcon: Icon(Icons.clear),
    );
  }
}

textField.png

4.2 controller 的使用

使用 controller 属性可以为输入框填写一个默认的值，同时也可以监听输入框变化。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
    );
  }

  TextEditingController _controller(){
    TextEditingController _controller = TextEditingController(
      text: "123333",
    );

    _controller.addListener(() {
      print(_controller.text);
    });

    return _controller;
  }

TextField controller.gif

4.3 focusNode 焦点控制

Flutter入门（28）：Flutter 组件之 FocusNode 详解

4.4 textInputAction 的使用

使用 textInputAction 来控制输入框完成按钮的样式。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      textInputAction: TextInputAction.search,
    );
  }

textInputAction.png

4.5 键盘样式

使用 keyboardType 来改变键盘样式。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      textInputAction: TextInputAction.search,
      keyboardType: TextInputType.phone,
    );
  }

• TextInputType text

  
  TextInputType text.png

• TextInputType multiline

  
  TextInputType multiline.png

• TextInputType phone

  
  TextInputType phone.png

• TextInputType datetime

  
  TextInputType datetime.png

• TextInputType emailAddress

  
  TextInputType emailAddress.png

• TextInputType url

  
  TextInputType url.png

• TextInputType visiblePassword

  
  TextInputType visiblePassword.png

• TextInputType name

  
  TextInputType name .png

• TextInputType streetAddress

  
  TextInputType streetAddress.png

4.6 文字加密

• 使用 obscureText 设置加密。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      autofocus: true,
      obscureText: true,
    );
  }

TextField obscureText.png

• 使用 obscuringCharacter 设置加密后的字符样式。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      obscuringCharacter: "&",
      obscureText: true,
    );
  }

TextField obscuringCharacter.png

4.7 输入中，输入完成，提交事件

onTap：点击输入框
onChanged ： 每次输入框文字改变，均会执行
onSubmitted：提交按钮点击
onEditingComplete：输入完成，提交按钮点击后会先执行这里

注意执行顺序为 onTap -> onChanged -> onEditingComplete -> onSubmitted

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      onChanged: (string){
        print("onChanged $string");
      },
      onSubmitted: (string){
        print("onSubmitted $string");
      },
      onEditingComplete: (){
        print("onEditingComplete");
      },
      onTap: (){
        print("onTap");
      },
    );
  }

TextField Actions.png

5. TextField 之 InputDecoration 详解

TextField.decoration 可以设置 TextField 的绝大部分样式。所以这里单独讲解，Flutter入门（27）：Flutter 组件之 InputDecoration 详解

6. 技术小结

• TextField 太常用不过了，了解各个点击事件以及顺序。
• 自定义样式 TextField，需要了解 InputDecoration 的各个属性。
• 焦点的捕捉以及丢失也是很重要的。