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.改变自定义焦点

///点击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.更改键盘自己的操做按钮

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

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

3.自动更正

TextField(
  autocorrect: false,
)
复制代码

4.文本大写

TextCapitalization.sentences ///每一个句子的首字母都被大写
TextCapitalization.characters ///句子中的全部字符都大写
TextCapitalization.words ///每一个单词的首字母大写
TextField(
  textCapitalization: TextCapitalization.sentences,
)
复制代码

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

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

///这将致使光标和文本在 TextField 中间开始
TextField(
  textAlign: TextAlign.center,
)
复制代码

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

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

3.更改 TextField 中的光标

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

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

1.控制最大字符数

TextField(
  maxLength: 4,
)
复制代码

1.控制最大行数

TextField(
  maxLines: 3,
)
复制代码

模糊文本

TextField(
  obscureText: true,
)
复制代码

装饰 TextField

1.使用提示

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

2.增长图标

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
)
复制代码

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
)
复制代码

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
)
复制代码

3.去除光标

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
)
复制代码

4.增长边框

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
)
复制代码

5.持久消息

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
)
复制代码