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)
    ),
  ),
),` 

---

实例效果