Flutter TextField 文字不居中

最新推荐文章于 2023-12-26 09:45:08 发布
最新推荐文章于 2023-12-26 09:45:08 发布
阅读量3.2k 收藏 2
点赞数 4
分类专栏： Flutter 文章标签： flutter dart 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35547137/article/details/109367095
版权
本文介绍了在Flutter中遇到TextField文字不居中的问题及其解决方案。通过调整TextField内的decoration属性，特别是InputDecoration的border参数，可以实现文字自动校正并居中显示。
摘要由CSDN通过智能技术生成

Flutter TextField 文字不居中

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

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


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

解决方案

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

代码

TextField(
 InputDecoration(
  focusedBorder:
最低0.47元/天 解锁文章
上上下下左右左右baba
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Flutter创建带有图标提示的TextField
爱喝水程序员的博客
04-03 551
在移动应用开发中，TextField是一种常用的用户输入小部件。然而，有时向用户提供有关他们应该输入什么的提示或说明是很有帮助的。在本教程中，我们将创建一个Flutter应用程序，演示如何在TextField旁边包含一个图标提示。
flutter text 左对齐_flutter输入框TextField中文本textAlign对齐分析篇
weixin_39713805的博客
12-22 1180
当我们在使用一个 TextField 构建一个输入框时，会有如下效果：在实际应用程序的开发中，有时我们会希望输入的文字居中对齐或者是右对齐，那么就应用到了我本文章中所讲述内容，凡是涉及到一个内容，我们务必精益求精。1 TextField 输入文本对齐配置在 TextField 组件中，可以通过 textAlign 属性来配置TextField 输入文本对齐方式，更高级点的用法就是再结合 textD...
Flutter Text控件在不同手机上不居中的问题
NotesChapter
04-21 1029
在最近flutter页面改造过程中，发现通过Contail包裹Text控件设置上下padding时，在华为魅族和vivo等手机上并没有居中展示
flutter TextField会出现文字向下偏移不会水平居中的问题
u012063213的博客
07-31 3225
在需求里面需要取消默认下部边框 网上的帖子都是说这样 TextField( style: TextStyle(fontSize: 38.sp), controller: _textEditingController, onChanged: onChanged, autofocus: false, keyboardT..
flutter TextField 不居中问题，亲自测试有效
szdenny的博客
06-09 959
flutter TextField 不居中问题
flutter textField设定高度后,文字无法居中
大圣归来圣骑士清欢的博客
03-16 1216
flutter textField居中问题
Flutter中TextField hintText不居中问题
qiaozi的博客
08-19 1167
TextField hintText不居中问题 在学习Flutter的路上，记录学习中的点点滴滴，更好地提升自己与帮助大家。TextField hintText不居中问题的解决方案
Flutter TextField
m0_55721894的博客
11-28 2667
TextField textField用于文本输入，它提供了很多属性： const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration decoration = const InputDecoration(), TextInputType keyboardType, TextInputAction textInputAction, Tex...
Flutter TextField设置高度之后文字无法垂直居中
m0_68349563的博客
03-07 1766
解决TextField设置高度之后文字不垂直居中的问题
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 803
Flutter CupertinoTextField光标无法居中的问题
【Flutter】 字体显示不正确，中文字体，逗号在中间
CK_ShaBT的博客
05-13 2683
事情是这样的，我在Android项目中跑了一个flutter页面。 其中Text组件在没有设置字体的情况下（默认字体），不管是显示Android传入的中文，还是显示写死在flutter本地的中文，就变成了图中这个不正常的鬼亚子。（但是在IOS的手机上是正常的。） 一开始我以为是字体的问题，于是就对Android单独设置 fontFamily:null 或者引入字体文件，设置别的好看的字体，想看下结果。 然并卵，木有变化。 后来听说有可能和Locale有关，于是就去网上查，设置语言环境相关内..
flutter Text设置行高的时候，文字不居中
weixin_44911775的博客
04-13 712
TextLeadingDistribution有两个，proportional和even，默认为proportional，根据字体的leading比例来分布上下空间。even则是均分上下空间，就是CSS中的"half-leading"。
【Flutter 问题系列第 7 篇】TextField 去掉下划线
“Allen Su”的博客
09-10 4332
TextField 去掉下划线
关于flutter里面Text会出现文字下移的问题
u012063213的博客
07-31 2114
弄了好久 才发现 在pubspec.yaml 加入以下内容： flutter_localizations: sdk: flutter 然后在 MaterialApp里面加入 localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ const Locale('zh', 'CN'), ...
UITextField使用时文字向下偏移问题
凉城旧梦的博客
01-14 4552
最近在使用UITextField这个控件的时候，突然发现了一个问题，就是本来用起来没问题的，但是突然在输入文字之后切换到后台，然后再切换到前台，这时候在继续输入文字，会发现UITextField里面的文字往下偏移了，而且还会出现闪现等问题。于是，各种测试找答案，终于揪出了这个问题的关键点。 首先，我的这个问题出现在UINavigationController身上，ios7.0之后，当在UINavi
flutter 文字居中
最新发布
03-19
在Flutter中，可以使用`Center`组件来实现文字的中显示。`Center`组件是一个容器组件，它将其子组件放置在其水平和垂直方向上的中心位置。 要在Flutter中实现文字居中，可以将`Text`组件作为`Center`组件的子组件，并设置`textAlign`属性为`TextAlign.center`。这样，文本将在水平和垂直方向上都居中显示。 以下是一个示例代码： ```dart Center( child: Text( '居中显示的文字', textAlign: TextAlign.center, ), ) ``` 这样，文本将在屏幕的中心位置水平和垂直方向上居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值