Flutter Widget之TextField使用解析

TextField组件在我们日常开发中很常用，下面就来总结一下它的用法。

从 TextField 中检索信息

1.第一种方法是使用 onChanged 方法并将当前值存储在一个简单的变量中。

String value = "";
TextField(
  onChanged: (text) {
    value = text;
  },
)

2.第二种方法是使用 TextEditingController。控制器附加到 TextField 上，让我们监听和控制 TextField 的文本。

TextEditingController controller = TextEditingController();
TextField(
  controller: controller,
)

print(controller.text);//输出当前TextField的值

TextField 的其他回调

///这些是在用户单击 iOS 上的“完成”按钮时调用的回调
onEditingComplete: () {},
onSubmitted: (value) {},

在 TextFields 中使用焦点

1.使用自动对焦

TextField(
  autofocus: true,
)

2.改变自定义焦点

1_vMJw-_qx5DjX7Q3NZ5TTbg.gif

///点击RaisedButton时可以切换下一个TextField
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();

TextField(
  focusNode: nodeOne,
),
TextField(
  focusNode: nodeTwo,
),
RaisedButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(nodeTwo);
  },
  child: Text("Next Field"),
)

更改 TextFields 的键盘属性

1.键盘类型

TextInputType.text (普通完整键盘)
TextInputType.number (数字键盘)
TextInputType.emailAddress  (带有“@”的普通键盘)
TextInputType.datetime (带有“/”和“ : ”的数字键盘)
TextInputType.numberWithOptions  (带有启用签名和十进制模式选项的数字键盘)
TextInputType.multiline (优化多行信息)

TextField(
  keyboardType: TextInputType.number,
)

2.更改键盘本身的操作按钮

1_YWTJ0wLBtaBJm8XODCG-6g.png

1_Lc7TmV5BlSAdE7a9PKeCYw.png

///这会导致“完成”按钮被“继续”按钮取代
TextField(
  textInputAction: TextInputAction.continueAction,
)

///这会导致“完成”按钮被“发送”按钮取代
TextField(
  textInputAction: TextInputAction.send,
)

3.自动更正

TextField(
  autocorrect: false,
)

4.文本大写

2.png

1.png

3.png

TextCapitalization.sentences ///每个句子的首字母都被大写
TextCapitalization.characters ///句子中的所有字符都大写
TextCapitalization.words ///每个单词的首字母大写
TextField(
  textCapitalization: TextCapitalization.sentences,
)

文本样式、对齐方式和光标选项

1.文本字段中的文本对齐方式

4.png

///这将导致光标和文本在 TextField 中间开始
TextField(
  textAlign: TextAlign.center,
)

2.在 TextField 中设置文本的样式

///style 属性用来更改 TextField 中文本的外观、颜色、字体大小等。
TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
)

3.更改 TextField 中的光标

5.png

///更改光标颜色，宽度和角的半径，这里制作了一个红色的圆形光标
TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
)

控制 TextField 中的大小和最大长度

1.控制最大字符数

TextField(
  maxLength: 4,
)

1.控制最大行数

TextField(
  maxLines: 3,
)

模糊文本

6.png

TextField(
  obscureText: true,
)

装饰 TextField

1.使用提示

TextField(
  decoration: InputDecoration(
    hintText: "Demo Text",
    hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
  ),
)

2.增加图标

7.png

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
)

1_rLwdJJEouFU1CUARs17mmw.png

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
)

8.png

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
)

3.去除光标

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
)

4.增加边框

10.png

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
)

5.持久消息

9.png

TextField(
  decoration: InputDecoration(
    helperText: "Hello"
  ),
),