Flutter 设置文本框背景

Flutter 设置文本框背景

---

先来看最终效果：

普通文本框样式的设置

以下设置一个普通的文本框样式：

new TextField(
  controller: _titleTxt,
  keyboardType: TextInputType.text,//键盘类型
  decoration: InputDecoration(//文本框样式设置
    contentPadding: EdgeInsets.all(10.0),//内容边距
    labelText: '标题',//输入框的描述文本
    border: OutlineInputBorder(//边框
    ),
  ),
  style: TextStyle(fontSize: 14),//字体样式
  autofocus: false,
  maxLines: 1,//单行文本框
),

设置具有背景色的输入框

new TextField(
  controller: _titleTxt,
  keyboardType: TextInputType.text,
  decoration: InputDecoration(
    //是否填充背景色
    filled: true,
    //设置背景色，filled 为 true 时生效
    fillColor: Color(0xfff2f2f2),
    contentPadding: EdgeInsets.all(10.0),
    //边框样式设置
    border: _outlineInputBorder,
    focusedBorder: _outlineInputBorder,
    enabledBorder: _outlineInputBorder,
    disabledBorder: _outlineInputBorder,
    focusedErrorBorder: _outlineInputBorder,
    errorBorder: _outlineInputBorder,
  ),
  style: TextStyle(fontSize: 14),
  autofocus: false,
  maxLines: 1,
),

这里最关键的是 filled 属性，必须设置为 true，只有这样，fillColor 设置的颜色才能生效。

---

**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》