Flutter技术问题：TextField的hintText未获焦点时不显示怎么办？

看起来你遇到的问题是hintText在TextField未获得焦点时不显示，聚焦后才出现，我帮你梳理下可能的原因和对应的解决办法：

可能原因1：hint文本颜色与背景色对比度不足 #

你的外层Container用了MyColor.MidGray作为背景，而hintStyle用了MyTextStyle.grey，如果这两个颜色的明度、饱和度非常接近，就会导致hintText和背景融为一体，视觉上看起来像是没显示；而当TextField聚焦后，可能因为界面状态变化（比如suffixIcon出现），让你更容易注意到hintText，或者TextField的默认聚焦样式悄悄调整了颜色。

解决办法： #

检查并调整hintStyle的颜色，确保和Container背景色有足够的对比度。比如可以直接指定一个更浅/更深的灰色：

hintStyle: TextStyle(color: Colors.grey[400]), // 替换原来的MyTextStyle.grey

可能原因2：TextField的filled属性与外层Container背景冲突 #

你给TextField设置了filled: true，但没有指定fillColor，默认情况下filled的颜色会和外层Container的背景色重叠，导致hintText被遮挡或者视觉层级混乱，未聚焦时就看不到了。

解决办法： #

既然外层Container已经设置了背景色，直接把TextField的filled设为false即可，去掉多余的背景层：

decoration: InputDecoration(
  filled: false, // 修改这里为false
  hintText: 'hint text here',
  hintStyle: MyTextStyle.grey,
  prefixIcon: MyIcon.SearchGreyIcon,
  border: InputBorder.none,
  // ... 其他属性保留
),

可能原因3：空Container作为suffixIcon挤占了布局空间 #

当TextField未聚焦时，你给suffixIcon赋值了一个空的Container()，这个空Container依然会占据一定的布局空间，可能挤压了hintText的显示区域，导致hintText被挤出可视范围。

解决办法： #

把未聚焦时的suffixIcon改成null，这样就不会占据空间：

suffixIcon: focusNode.hasFocus ? IconButton(
  icon: MyIcon.CloseIcon,
  onPressed: () { inputController.clear(); }
) : null, // 替换原来的Container()

你可以先从调整filled属性和检查颜色对比度开始尝试，这两个是最常见的原因。

内容的提问来源于stack exchange，提问作者byhuang1998