flutter笔记-输入框

输入框使用方法-属性

dart 复制代码

TextField(
  // 控制器：用于获取/设置值
  controller: TextEditingController(),

  // 装饰器
  decoration: InputDecoration(
    // 提示
    labelText: "label",
    hintText: '提示内容：placeholder',
    helperText: '辅助内容：在输入框下，和错误提示内容同一位置',
    errorText: "报错提示：校验不通过提示",
    alignLabelWithHint: false, // 标签与提示内容对齐（没看出来效果）
    // 标签浮动  .always 始终在上部   .auto 聚焦和失焦位置变化
    floatingLabelBehavior: FloatingLabelBehavior.always,

    // 图标
    icon: Icon(Icons.person_pin_outlined), // 头部（外部）图标
    prefixIcon: Icon(Icons.person_pin_outlined), // 前缀（内部）图标，
    suffixIcon: Icon(Icons.person_pin_outlined), // 后缀（内部）图标
    prefixText: '+86', // 前缀内容
    suffixText: '元' // 后缀内容

    // 边框
    border: OutlineInputBorder(
        borderSide: BorderSide(width: 1, color: Colors.blueAccent),
    ),
    // 可以使用时的边框
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 1, color: Colors.grey),
    ),
    // 聚焦时的边框
    focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 1, color: Colors.blueAccent),
    ),
    // 错误时的边框
    errorBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.red),
    ),
    // 禁用使的边框（enabled: false）
    disabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.red),
    ),

    // 填充（背景色）
    filled: true,
    fillColor: Colors.grey,

    // 内边距
    contentPadding: EdgeInsets.all(10),

    // 计数区（外部右下角）
    counterText: '计数：10', // 手动设置
    counterStyle: TextStyle(color: Colors.blueAccent),
  ),

  // 是否隐藏文本（密码）
  obscureText: true, // true时显示的密码键盘类型
  obscuringCharacter: '*', // 隐藏文本时，显示的字符

  // 光标样式
  cursorColor: Colors.red,
  cursorWidth: 3,
  cursorHeight: 10,
  cursorRadius: Radius.circular(3),


  // 文本内容样式
  style: TextStyle(color: Colors.black),
  textAlign: TextAlign.start, // 文本对齐
  textAlignVertical: TextAlignVertical.center, // 垂直对齐方式

  // 多行输入
  maxLines: 3, // 最多可见行数，超出滚动（null：根据内容一直撑满高度）
  minLines: 2, // 最少可见行数
  maxLength: 10, // 最多可输入内容长度（换行符也算1个）

  // 键盘
  keyboardType: TextInputType.text, // 键盘类型  .text  .number  .visiblePassword ...
  textInputAction: TextInputAction.search, // 键盘动作按钮（右下角按钮）  .send   .search
  textCapitalization: TextCapitalization.none, // 文本大小写

  // 输入内容控制
  inputFormatters: [
    // .digitsOnly 只允许输入数字   .singleLineFormatter
    FilteringTextInputFormatter.digitsOnly,
    // 限制输入的长度
    LengthLimitingTextInputFormatter(3),
  ],


  // 焦点
  focusNode: FocusNode(), // 焦点控制器
  autofocus: true, // 是否自动获取焦点
  enableInteractiveSelection: false, // 是否启用交互选择

  enabled: true, // 是否可以使用（false时禁用）
  readOnly: false, // 是否只读
  autocorrect: true, // 是否自动更正（不知道啥效果）

  expands: true, // 是否填满可用空间（输入框本身）
  textDirection: TextDirection.ltr, // 内容位置  .ltr 输入框左侧   .rtl 输入框右侧
  scrollPadding: EdgeInsets.all(20), // 滚动边距
  enableSuggestions: true, // 是否启动建议
  smartDashesType: SmartDashesType.enabled, // 智能破折号
  smartQuotesType: SmartQuotesType.enabled, // 智能引号

  // 支持富文本粘贴
  enableInteractiveSelection: true,

  // 内容变化时触发
  onChanged: (value) {
    print('输入框内容：$value');
  },

  // 提交时触发
  onSubmitted: (value) {
    print('提交内容：$value');
  },

  // 编辑完成时触发（点击提交，但无法获取内容）
  onEditingComplete: () {
    print('编辑完成');
  },

  // 点击输入框触发（聚焦失焦时都会）
  onTap: () {
    print('点击输入框');
  },
)

输入框使用方法-控制器

TextEditingController() 控制器
- .text 内容
- .selection 选择的内容（获取、设置）
- addListener() 监听内容变化

dart 复制代码

final TextEditingController _controller = TextEditingController(); // 控制器

@override
void initState() {
  super.initState();

  // 设置初始内容（回显内容）
  _controller.text = '初始内容';

 // 选择部分文本
 _controller.selection = TextSelection(
    baseOffset: 1,
    extentOffset: 2,
 );

  // 监听输入内容
  _controller.addListener(() {
    print('输入内容：${_controller.text}');
    print('选择内容：${_controller.selection}');
  });
}

@override
void dispose() {
  _controller.dispose(); // 控制器必须销毁
  super.dispose();
}


TextField(
  controller: _controller,
  onSubmitted: (value) {
    print('输入内容：$value');
  },
)

输入框使用方法-焦点控制器

FocusNode() 焦点控制器
- .hasFocus 是否获取焦点
- .unfocus() 隐藏键盘

dart 复制代码

final FocusNode _focusNode1 = FocusNode(); // 焦点控制器
final FocusNode _focusNode2 = FocusNode(); // 焦点控制器

@override
void initState() {
  super.initState();

  // 监听焦点变化
  _focusNode1.addListener(() {
    if (_focusNode1.hasFocus) {
      print('输入框1获得焦点');
    } else {
      print('输入框1失去焦点');
    }
  });
}

@override
void dispose() {
  _focusNode1.dispose(); // 控制器必须销毁
  _focusNode2.dispose(); // 控制器必须销毁
  super.dispose();
}

// 输入框1
TextField(
  focusNode: _focusNode1,
  textInputAction: TextInputAction.next,
  onSubmitted: (value) {
    // 按回车跳到下一个
    FocusScope.of(context).requestFocus(_focusNode2);
  },
)

// 输入框2
TextField(
  focusNode: _focusNode2,
  textInputAction: TextInputAction.done,
  onSubmitted: (value) {
     // 隐藏键盘
    _focusNode2.unfocus();
  },
)