Flutter中如何让TextFormField的prefixIcon与文本对齐?
如何让TextFormField的prefixIcon与hintText垂直居中对齐?
我用以下代码实现了TextFormField:
Container( alignment: Alignment.centerLeft, height: media.height * 0.12, decoration: txtFieldBoxDecoration, child: TextFormField( textAlignVertical: TextAlignVertical.center, keyboardType: TextInputType.emailAddress, style: const TextStyle( color: Colors.white, fontSize: 26, ), decoration: InputDecoration( border: InputBorder.none, contentPadding: const EdgeInsets.only(top: 14), prefixIcon: const Icon( Icons.email, color: Colors.white, size: 28, ), hintText: 'Insira seu E-mail', hintStyle: GoogleFonts.openSans( color: Colors.white54, fontSize: 26), ), onChanged: (value) {}, ), ),
当前效果:
想要实现的目标效果:
请问如何实现如图所示的prefixIcon与hintText对齐效果?
解决方案
问题根源是你设置了contentPadding: const EdgeInsets.only(top: 14),这个顶部内边距会把输入内容整体上推,抵消了textAlignVertical: TextAlignVertical.center的居中作用,导致hintText和prefixIcon垂直方向错位。
调整步骤:
- 移除
contentPadding的顶部偏移设置,改为contentPadding: EdgeInsets.zero,让输入内容不受额外内边距影响 - 保留
textAlignVertical: TextAlignVertical.center,确保文本和图标在垂直方向居中对齐
修改后的代码:
Container( alignment: Alignment.centerLeft, height: media.height * 0.12, decoration: txtFieldBoxDecoration, child: TextFormField( textAlignVertical: TextAlignVertical.center, keyboardType: TextInputType.emailAddress, style: const TextStyle( color: Colors.white, fontSize: 26, ), decoration: InputDecoration( border: InputBorder.none, contentPadding: EdgeInsets.zero, // 移除顶部偏移的内边距 prefixIcon: const Icon( Icons.email, color: Colors.white, size: 28, ), hintText: 'Insira seu E-mail', hintStyle: GoogleFonts.openSans( color: Colors.white54, fontSize: 26), ), onChanged: (value) {}, ), ),
如果需要调整图标和文本的水平间距,可以给prefixIcon包裹一层Padding,比如:
prefixIcon: const Padding( padding: EdgeInsets.symmetric(horizontal: 16), child: Icon( Icons.email, color: Colors.white, size: 28, ), ),
这样不会破坏垂直方向的对齐效果。
内容的提问来源于stack exchange,提问作者WilliamKose
相关产品推荐
相关产品推荐

