You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让Flutter中TextFormField的HintText垂直居中对齐?

解决TextFormField提示文本垂直居中的问题

提示文本偏上的核心原因是isDense: true会压缩输入框内部的上下内边距,再加上固定高度的SizedBox,导致文本无法自然垂直居中。以下两种方案可以解决这个问题:

方案一:调整contentPadding并保留isDense

在InputDecoration中添加contentPadding,手动设置垂直方向的内边距,让提示文本对齐到中心:

SizedBox(
  height: 45,
  child: TextFormField(
    decoration: const InputDecoration(
      prefixIconConstraints: BoxConstraints(
        minWidth: 65,
      ),
      isDense: true,
      // 添加该行,调整垂直内边距适配容器高度
      contentPadding: EdgeInsets.symmetric(vertical: 12),
      prefixIcon: Icon(Icons.search, color: Color(0xFFD9D9D9), size: 30),
      hintText: "Ara...",
      hintStyle: TextStyle(color: Color.fromARGB(255, 184, 184, 184), fontSize: 19, fontFamily: "Inter Regular", fontWeight: FontWeight.bold),
      fillColor: Color.fromARGB(255, 64, 64, 73),
      filled: true,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        borderSide: BorderSide(color: Colors.transparent),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        borderSide: BorderSide(color: Colors.transparent),
      ),
    ),
    style: const TextStyle(fontFamily: "Inter Regular", fontSize: 19, color: Color.fromARGB(255, 167, 167, 167)),
  ),
),

方案二:移除isDense属性

isDense会强制缩小输入框内部间距,直接移除后,输入框会自动根据父容器高度调整文本垂直居中:

SizedBox(
  height: 45,
  child: TextFormField(
    decoration: const InputDecoration(
      prefixIconConstraints: BoxConstraints(
        minWidth: 65,
      ),
      // 移除isDense: true这一行
      prefixIcon: Icon(Icons.search, color: Color(0xFFD9D9D9), size: 30),
      hintText: "Ara...",
      hintStyle: TextStyle(color: Color.fromARGB(255, 184, 184, 184), fontSize: 19, fontFamily: "Inter Regular", fontWeight: FontWeight.bold),
      fillColor: Color.fromARGB(255, 64, 64, 73),
      filled: true,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        borderSide: BorderSide(color: Colors.transparent),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        borderSide: BorderSide(color: Colors.transparent),
      ),
    ),
    style: const TextStyle(fontFamily: "Inter Regular", fontSize: 19, color: Color.fromARGB(255, 167, 167, 167)),
  ),
),

两种方案都能解决问题,若需要更紧凑的布局优先选方案一,若希望输入框自动适配间距则选方案二。

内容的提问来源于stack exchange,提问作者Emir Bolat

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.21 19:12:18