Flutter跨平台移动端开发丨TextField 添加背景色

TextField - decoration

打开 TextField 部件源码可见支持修改属性 decoration ，说明其支持样式会很丰富。本例演示怎样添加背景色

const TextField({

    // ··· 省略
    
    // 此对象可实现修改样式
    this.decoration = const InputDecoration(),  
    
    // ··· 省略
    
  }) : assert(textAlign != null),
       assert(autofocus != null),
       assert(obscureText != null),
       assert(autocorrect != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(dragStartBehavior != null),
       assert(maxLines == null || maxLines > 0),
       assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       super(key: key);

---

decoration - filled

设置背景色通过 decoration - filled + fillColor，filled 必须为 true

new Padding(
  padding: EdgeInsets.only(left:20,top:20,right:20),
  child: TextField(
    decoration: InputDecoration(
        hintText: "请输入手机号",
        // 隐藏边框
        border: InputBorder.none, 
        // 设置背景色填充模式为-充满（fasle时无效）
        filled: true,
        // 设置背景色
        fillColor: Color(0xfff1f1f1)
    ),
  ),
),

new Padding(
  padding: EdgeInsets.only(left:20,top:20,right:20),
  child: TextField(
    decoration: InputDecoration(
        hintText: "请输入姓名",
        // 隐藏边框
        border: InputBorder.none, 
        // 设置背景色填充模式为-充满（fasle时无效）
        filled: true,
        // 设置背景色
        fillColor: Color(0xfff1f1f1)
    ),
  ),
),

---

实例效果

---

若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！