Flutter 设置文本框背景

卜大爷

已于 2022-06-29 21:47:30 修改

阅读量2.6w

点赞数 1

分类专栏： Flutter 开发文章标签： Flutter 文本框输入框背景样式

于 2020-12-30 20:13:24 首次发布

本文链接：https://blog.csdn.net/u011578734/article/details/111997551

版权

Flutter 开发专栏收录该内容

40 篇文章 41 订阅

订阅专栏

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 开发》