Flutter中文本输入框TexeFieldr键盘样式TextInputType总结TexeField设置不可编辑

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 网易云【玩转大前端】配套课程
• EDU配套 教程
• flutter点点滴滴 系列文章

---

TextField 系列文章

• TextField的基本使用以及TextField常用属性精讲《点击查看详情》
• TextField 焦点获取控制篇《点击查看详情》
• TextField 输入文本样式 TextStyle 篇《点击查看详情》
• TextField 输入文本 textAlign 对齐分析篇《点击查看详情》
• TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《点击查看详情》
• TextField TextEditingController 分析篇《点击查看详情》

---

TextField 简介

一句话来讲，TextField是在flutter应用开发中用于 用户输入文本框。

TextField 文本输入框

1最简单的使用

//这会创建一个基础TextField 默认带一个下划线
TextField() 

2 TextField 常用属性配制

  Widget buildTextFeild2(){
    return  TextField(
      /**
       * TextCapitalization.sentences  这是最常见的大写化类型，每个句子的第一个字母被转换成大写。
       * TextCapitalization.characters  大写句子中的所有字符。
       * TextCapitalization.words 对每个单词首字母大写。
       */
      textCapitalization: TextCapitalization.sentences,
      ///光标的颜色
      cursorColor: Colors.red,
      ///设置光标的 四个角的弧度
      cursorRadius: Radius.circular(10),
      ///设置光标的宽度
      cursorWidth: 6,
      ///设置键盘的类型
      keyboardType: TextInputType.phone,
      ///键盘回车键的样式
      textInputAction: TextInputAction.next,
      ///设置输入框是否可编辑
      ///   true 可输入
      ///   false 不可输入
      enabled: true,
      ///密码  maxLines =1
      obscureText: false,
      ///限制输入框内输入文本的长度的
      ///设置此项会让TextField右下角有一个输入数量的统计字符串
      maxLength: 30,
      ///限制输入框内输入文本的行数
      maxLines: 4,
      ///当输入框内的文本发生改变时回调的函数
      onChanged: (value){
        print("回调了 $value");
      },
      ///键盘上按了done
      onEditingComplete: () {

      },
    );
  }

3 键盘样式总结

        ///键盘回车键的样式
        /**
         * none 为不弹出键盘
         * unspecified 换行
         * none 为不弹出键盘
         * done 完成或者done
         * go  前往或者go
         * search 搜索或者search
         * send  发送或者send
         * next 下一项或者next
         * previous
         * continueAction 继续或者 continue
         * join 加入或者join
         * route 路线或者route
         * emergencyCall 紧急电话
         * newline 换行或者newline
         */
        textInputAction: TextInputAction.newline,

4 TextField设置不可编辑

文本输入框TextField设置为不可编辑可通过设置TextField的属性enabled的值为false，也可设置TextField的只读属性readOnly为true，两者的区别是使用到的边框样式不一样。

如果是使用enabled为false这种方式，那么TextField使用到的边框样式只是disabledBorder所配置的边框样式。

如果是使用的readOnly为true只读方式，那么TextField可以使用focusedBorder、enabledBorder、errorBorder配置的综合样式。

补充：

• obscureText 密码设置说明，当输入的文本为密码选项时，输入文本是不可见的，这时 maxLines 性如果设置了，那么必须要求为 maxLines=1，因为在实际应用中，密码一般不会太长，一行足以承载，当设置的 maxLines>1时，flutter 应用程序在运行时会报异常。
• onChanged 回调函数，只有当输入文本框中的文本内容有变化时，此函数才会被回调，焦点改变时不会触发。