如何让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
相关产品推荐
相关产品推荐

