【Flutter 问题系列第 26 篇】给 TextField 添加背景色，为什么没有效果 ？

这是【Flutter 问题系列第 26 篇】，如果觉得有用的话，欢迎关注专栏。

在 Flutter 中，默认的输入框只有一条横线，如何给 TextField 添加背景色呢 ？

问题描述

在 TextField 组件中，有一个 decoration 属性，需要传入一个 InputDecoration 类的实例，在 InputDecoration 中有一个属性 fillColor ，该属性可以改变输入框的背景色，如下代码所示

TextField(
  decoration: InputDecoration(
    border: InputBorder.none, // 隐藏边框
    fillColor: Colors.grey, // 设置输入框背景色为灰色
    hintText: "请输入您的姓名",
  ),
),

如果仅仅只是这样，运行后你会发现并没有任何的效果，这是为什么呢 ？

问题原因

查看源码可知，除了需要设置 fillColor 属性外，还需要设置另外一个属性 filled 为 true 后，对 TextField 设置的背景色才会起作用，所以最终的代码应该是这样的

TextField(
  decoration: InputDecoration(
    border: InputBorder.none, // 隐藏边框
    fillColor: Colors.grey, // 设置输入框背景色为灰色
    filled: true,
    hintText: "请输入您的姓名",
  ),
),

效果图如下所示

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年7月10日 GitHub 标星已达 124K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。