Flutter-TextFormField

TextFormField

  • decoration：使用 InputDecoration 来创建文本框
  • controller：指定 TextEditingController 对象，可以通过这个对象来获取文本框的值

InputDecoration

  • focusedBorder：文本框聚焦的时候的边框样式
  • disabledBorder：禁止输入时
  • enabledBorder：允许选中时
  • contentPadding：文本区实际上是由 InputDecoration 创建的，而此处的 padding 就是设置的这个文本区的 padding
  • border：设置为 Border.none 可以不渲染边框。但是常常会造成文本框内容不能居中。
  • hintText：输入框的提示字段，类似于 html 中的 placeholder

ps：想要输入框的内容正常的垂直居中，就需要边框，不想要样式的话，可以设置边框为透明色，宽度为0。除此之外，还需要设置 contentPadding 为0才能保证绝对垂直居中。

代码区

1
2
3
4
5
6
7
8
9
10
11
12
13
TextFormField(
  decoration: const InputDecoration(
    focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 0, color: Colors.transparent)),
    disabledBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 0, color: Colors.transparent)),
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 0, color: Colors.transparent)),
    contentPadding: EdgeInsets.symmetric(vertical: 0),
    hintText: "消息",
  ),
  controller: textEditingController,
)