TextField

示例

在Flutter的 TextField 中，许多参数可以定制输入框的行为、外观和功能。

TextField(
  controller: TextEditingController(),      // 用于管理和获取输入内容
  focusNode: FocusNode(),                   // 管理焦点，控制 TextField 的焦点状态
  decoration: InputDecoration(              // 装饰和样式设置
    border: OutlineInputBorder(),           // 输入框边框样式
    filled: false,                          // 是否填充颜色
    fillColor: Colors.white,                // 填充的颜色
    labelText: 'Enter your text',           // 提示标签，输入时会浮动在上方
    hintText: 'Hint text here',             // 占位文本，在输入前显示的灰色提示
    prefixIcon: Icon(Icons.person),         // 在输入框前添加图标
    suffixIcon: Icon(Icons.clear),          // 在输入框后添加图标，常用于清除按钮
    isCollapsed: true,                      // 折叠，使输入框高度与输入区域相同，默认false
    contentPadding: EdgeInsets.all(2),      // 边框与内容的间距
    isDense: true,
  ),
  keyboardType: TextInputType.text,         // 指定键盘类型，例如 TextInputType.number 打开数字键盘
  textInputAction: TextInputAction.done,    // 输入动作按钮的样式，如完成、搜索、下一步等
  style: TextStyle(fontSize: 16),           // 控制文本输入内容的样式，如字体大小、颜色
  textAlign: TextAlign.start,               // 设置文本对齐方式，例如居左、居中、居右等
  maxLength: 20,                            // 输入字符最大长度
  maxLines: 1,                              // 设置输入框的最大行数，为 null 时输入框可扩展
  obscureText: false,                       // 设置是否隐藏文本，常用于密码输入框
  autofocus: true,                          // 是否自动获取焦点并弹出键盘
  enabled: true,                            // 设置输入框是否可用
  readOnly: false,                          // 设为 true 可实现只读
  onChanged: (text) {                       // 输入内容变化时的回调
    print("Text changed: $text");
  },
  onSubmitted: (text) {                     // 用户提交输入时触发
    print("Submitted text: $text");
  },
  onEditingComplete: () {                   // 编辑完成时触发，不管是否提交
    print("Editing completed");
  },
  cursorColor: Colors.blue,                 // 设置光标颜色
  cursorWidth: 2.0,                         // 设置光标宽度
  cursorHeight: 20.0,                       // 设置光标高度
  cursorRadius: Radius.circular(5),         // 设置光标的圆角
  enableSuggestions: true,                  // 是否开启拼写建议（在某些设备上有效）
  enableInteractiveSelection: true,         // 允许选择和复制文本
  textCapitalization: TextCapitalization.words,  // 自动首字母大写，可选 none, words, sentences, characters
  keyboardAppearance: Brightness.dark,      // 键盘的主题颜色，可以是亮色或暗色
  scrollPadding: EdgeInsets.all(20.0),      // 滚动时的内边距
  scrollPhysics: BouncingScrollPhysics(),   // 设置滚动行为，常用于长文本
)

边框

// 无边框
decoration: InputDecoration(
  border: InputBorder.none,
)
// 下划线
decoration: InputDecoration(
  border: UnderlineInputBorder(),
)
// 边线
decoration: InputDecoration(
  border: OutlineInputBorder(),
)