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

Flutter中SearchBar高度小于默认值时,如何让提示文字垂直水平居中?

解决SearchBar提示文字垂直水平居中问题

你可以通过调整SearchBar的padding参数修正提示文字的垂直居中问题——SearchBar默认带有垂直内边距,当你设置了较小的minHeight(28)时,默认内边距会挤压提示文字,导致无法对齐。

修改后的完整代码如下:

SearchBar(
  hintText: 'Search Employee',
  hintStyle: MaterialStateProperty.all(const TextStyle(color: Color(0xFFA1A5C0), fontSize: 11)),
  constraints: const BoxConstraints(minHeight: 28),
  // 手动调整垂直内边距,抵消默认内边距影响
  padding: MaterialStateProperty.all(const EdgeInsets.symmetric(vertical: 4, horizontal: 16)),
  leading: const Icon(Icons.search, size: 15),
  elevation: const MaterialStatePropertyAll(0),
  side: MaterialStateProperty.all(const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1))),
  shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(40))),
)

你可以根据实际显示效果微调vertical参数的数值,确保提示文字和左侧图标都能在28高度的SearchBar内垂直居中。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.07 16:02:35