Flutter TextField 文字不居中

最新推荐文章于 2025-07-14 16:15:50 发布
原创 最新推荐文章于 2025-07-14 16:15:50 发布 · 3.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #dart #大前端

本文介绍了在Flutter中遇到TextField文字不居中的问题及其解决方案。通过调整TextField内的decoration属性，特别是InputDecoration的border参数，可以实现文字自动校正并居中显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Flutter TextField 文字不居中

如果按照Flutter默认样式，创建的TextField会出现以下图片中的这种情况
在这里插入图片描述

即使按照网上的更改其中的textalign和contentpadding也无济于事contentpadding需要一点一点根据父组件来微调位置，textalign直接无效了。
（路人:就我一个人设置了一下contentpadding就好了吗）


修复完成后
在这里插入图片描述

解决方案

设置TextField里面的decoration对应的InputDecoration中的boder参数。线框border会自动校正文字的位置

代码

TextField(
 InputDecoration(
  focusedBorder: OutlineInputBorder
最低0.47元/天 解锁文章

200万优质内容无限畅学
【Flutter 问题系列第 62 篇】解决 TextField 输入框组件设置高度后输入的内容无法居中的问题
“Allen Su”的博客
05-01 2820
解决 TextField 输入框组件设置高度后输入的内容无法居中的问题
使用Flutter创建带有图标提示的TextField
爱喝水程序员的博客
04-03 703
在移动应用开发中，TextField是一种常用的用户输入小部件。然而，有时向用户提供有关他们应该输入什么的提示或说明是很有帮助的。在本教程中，我们将创建一个Flutter应用程序，演示如何在TextField旁边包含一个图标提示。
Flutter TextField设置高度之后文字无法垂直居中
m0_68349563的博客
03-07 2443
解决TextField设置高度之后文字不垂直居中的问题
flutter TextField 不居中问题，亲自测试有效
szdenny的博客
06-09 1242
flutter TextField 不居中问题
flutter应用开发--TextAlign.center 的作用是让文本内容在自身所在容器的水平方向居中,以及使文本居中的三种方式
2401_88846919的博客
05-04 216
的作用范围是文本组件自身的宽度，而非父容器的宽度。若想让文本在屏幕上居中，需先让文本组件的父容器占满屏幕宽度（如Expanded），或用Center组件将文本块整体居中。
flutter textField设定高度后,文字无法居中
大圣归来圣骑士清欢的博客
03-16 1747
flutter textField居中问题
flutter TextField会出现文字向下偏移不会水平居中的问题
u012063213的博客
07-31 3569
在需求里面需要取消默认下部边框 网上的帖子都是说这样 TextField( style: TextStyle(fontSize: 38.sp), controller: _textEditingController, onChanged: onChanged, autofocus: false, keyboardT..
Flutter Text控件在不同手机上不居中的问题
NotesChapter
04-21 1151
在最近flutter页面改造过程中，发现通过Contail包裹Text控件设置上下padding时，在华为魅族和vivo等手机上并没有居中展示
Flutter中TextField hintText不居中问题
qiaozi的博客
08-19 1271
TextField hintText不居中问题 在学习Flutter的路上，记录学习中的点点滴滴，更好地提升自己与帮助大家。TextField hintText不居中问题的解决方案
Flutter简单问题：TextFiled 设置maxLines ＞ 1 后，垂直不居中
最新发布
xwb0714的博客
07-14 291
在我们设置了maxlines之后，例如我们设置maxlines为3的时候，那么默认TextField高度会以三倍的方式显示。我们想要默认是1行，根据用户的输入量去动态改变TextField高度，直到到达我们设定的最大行数。字体包括hintStyle和style两个，也就是提示型文字的大小，和普通用户输入文字的大小来确定，推荐两个设置成一样的。那么还有个问题，如果设置了prefixIcon:icon图标之后，组件就有一个固定高度，一般都height没办法改变；第一个办法：设置外部组件的最大高度。
Flutter Text内容居中显示
01-07
通过设置textAlign属性的值为TextAlign.center可以让Text的内容居中 class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Row( children: [ Expanded( chil
Flutter CupertinoTextField光标无法居中的问题
程序猿唐
12-26 1098
Flutter CupertinoTextField光标无法居中的问题
flutter Text设置行高的时候，文字不居中
weixin_44911775的博客
04-13 992
TextLeadingDistribution有两个，proportional和even，默认为proportional，根据字体的leading比例来分布上下空间。even则是均分上下空间，就是CSS中的"half-leading"。
【Flutter 问题系列第 7 篇】TextField 去掉下划线
“Allen Su”的博客
09-10 4589
TextField 去掉下划线
UITextField使用时文字向下偏移问题
凉城旧梦的博客
01-14 4663
最近在使用UITextField这个控件的时候，突然发现了一个问题，就是本来用起来没问题的，但是突然在输入文字之后切换到后台，然后再切换到前台，这时候在继续输入文字，会发现UITextField里面的文字往下偏移了，而且还会出现闪现等问题。于是，各种测试找答案，终于揪出了这个问题的关键点。 首先，我的这个问题出现在UINavigationController身上，ios7.0之后，当在UINavi
Flutter TextField 输入文本垂直居中显示
hsw
08-17 5675
TextField 默认下方带有padding 所以在InputDecoration中加入参数设置padding 为0 即可 contentPadding: EdgeInsets.all(0)
Flutter 汉字标点符号(逗号、顿号等)底部没对齐的问题处理
wangyajuncsd的博客
05-24 2357
如题，偶然发现Flutter 开发中app运行时ui显示汉字标点符号(逗号、顿号)底部没对齐的问题。 直接上解决方案： 在TextStyle中添加一个height属性即可。 对比图，这是没添加height属性之前的效果，逗号和顿号都在行的中间。 这是添加了height属性之后的效果，逗号和顿号正常显示。 总结： 1、独立Flutter运行，标点符号是正常的； 2、混合运行，标点符号是不正常的；增加了height属性之后正常； 3、由源码得知，具体文本控件的高度是文中的hei.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值