开发文档
Flutter
自定义TextField

自定义TextField

边框设置

添加边框 

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: '请输入内容',
  ),
)

设置焦点时边框的颜色粗细 

return TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1.0), // 未选中时的边框
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 2.0), // 选中时的边框
    ),
    labelText: '请输入内容',
  ),
)

使用Container包裹TextField 

return Container(
  decoration: BoxDecoration(
    
  ),
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: TextField(
      // 添加输入框的Controller
      controller: newName,
      decoration: InputDecoration(
        border: OutlineInputBorder(borderSide: BorderSide.none),
      ),
      autocorrect: false,
      enableSuggestions: false,
    ),
  ),
);

设置TextField中文本大小 

return Container(
  decoration: BoxDecoration(
    
  ),
  child: TextField(
    controller: inputController,
    style: TextStyle(
      // 在这里输入需要的文本大小
      fontSize: 14,
    )
  )
)

添加TextField中按钮 

TextField(
  controller: key,
  decoration: InputDecoration(
    suffixIcon: GestureDetector(
      onTap: (){
        // 点击操作
      },
      child: Container(
        // 按钮内容
        color: Colors.grey[100],
        child: Icon(
          Icons.clear,
          color: Colors.grey[400],
        ),
      ),
    )
  ),
),

禁用自动纠错 

TextField(
  controller: key,
  // 是否自动纠错
  autocorrect: false,
  // 是否显示提示
  enableSuggestions: false,
),

输入完成操作

一般在移动端上按下回车键的操作

TextField(
  controller: key,
  onEditingComplete: (){
    // 输入完成操作
  },
),

密码框 

TextField(
  controller: key,
  obscureText: true;
),

输入内容设置

仅数字输入

可以使用FluentUI依赖的NumberBox实现

如果使用MaterialUI的TexField：

TextField(
  controller: key,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
)

自定义筛选 

TextField(
  controller: key,
  inputFormatters: [
    TextInputFormatter.withFunction((oldValue, newValue){
      // 需要有返回值，oldValue和newValue都是TextEditingController
      // 下面的示例，输入长度不得超过10个字符
      if(newVal.length>10){
        return oldValue;
      }
      return newValue;
    });
  ],
)
GetXContainer样式