Flutter(十三)基础控件-TextField

感君一回顾，思君朝与暮。

本文部分图片和文字介绍转载于 https://www.jianshu.com/p/13e639cb3037

<一>Flutter中的TextField类似我们iOS中的UITextField

• 属性

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	自动填充

• InputDecoration的使用

  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),
    );
  }
  

image.png

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

  TextEditingController _controller(){
  TextEditingController _controller = TextEditingController(
    text: "123333",
  );
  
  _controller.addListener(() {
    print(_controller.text);
  });
  
  return _controller;
  

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

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

image.png

• 键盘样式
  使用 keyboardType 来改变键盘样式。

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

• TextInputType text

  
  
  image

• TextInputType multiline

  
  
  image

• TextInputType phone

  
  
  image

• TextInputType datetime

  
  
  image

• TextInputType emailAddress

  
  
  image

• TextInputType url

  
  
  image

• TextInputType visiblePassword

  
  
  image

• TextInputType name

  
  
  image

• TextInputType streetAddress

  
  
  image

• 文字加密
  使用 obscureText 设置加密。

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

image.png

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

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

image

• 输入中，输入完成，提交事件
  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");
      },
    );
  }
  
  

image