首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在更新到Flutter 1.12.13后,TextField提示/输入文本在没有prefixIcon的情况下不居中

在更新到Flutter 1.12.13后,TextField提示/输入文本在没有prefixIcon的情况下不居中的问题可能是由于Flutter框架的更新引起的。为了解决这个问题,可以尝试以下几种方法:

  1. 使用contentPadding属性:在TextField中添加contentPadding属性,并设置合适的padding值,以使文本居中显示。例如:
代码语言:txt
复制
TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(vertical: 8.0),
    hintText: '请输入文本',
  ),
)
  1. 使用textAlign属性:将TextField的textAlign属性设置为TextAlign.center,以使文本居中显示。例如:
代码语言:txt
复制
TextField(
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    hintText: '请输入文本',
  ),
)
  1. 自定义样式:通过自定义样式来解决文本不居中的问题。可以使用TextStyle来设置文本的样式,并通过设置TextAlign.center来使文本居中显示。例如:
代码语言:txt
复制
TextField(
  style: TextStyle(
    textAlign: TextAlign.center,
  ),
  decoration: InputDecoration(
    hintText: '请输入文本',
  ),
)

以上是解决TextField提示/输入文本在没有prefixIcon的情况下不居中的几种方法。根据具体情况选择适合的方法进行调整。如果问题仍然存在,可以查看Flutter官方文档或社区中是否有相关的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

flutter 输入框组件TextField实现代码

TextField 顾名思义文本输入框,类似于iOS中UITextField和Android中EditText和Web中TextInput。主要是为用户提供输入文本提供方便。...相信大家原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField用法。...当用户输入手机号码不是11位时候提示手机号码格式错误, 当用户没有输入密码时,提示填写密码, 用户名和密码符合要求时提示登录成功。...可以看到,我先添加了一个decoration属性. decoration属性介绍: border:增加一个边框, hintText:未输入文字时,输入框中提示文字, prefixIcon输入框内侧左面的控件...我们有时候会需要这样情况, 比如一个登录页面, 需要输入账号和密码 , 自然输入完账号就要输入密码了 , 我们输入账号结束时候 , 让密码输入框获取到焦点 . 看一下代码: ...

4.7K11

Flutter | 常用组件

因此,我们自定义组件是应该思考一下那种方式最为合理 输入框和表单 Material 组件库中提供了输入框组件 TextField 和表单组件 From ,下面来具体看一下 TextField 用于文本输入...大多数情况下我们都需要显示提供一个 controller 来与文本框交互,如果没有提供,则 TextField 会自动创建一个 focusNode :用于控制 TextField 是否占有当前键盘输入焦点...InputDecoration:用于控制 TextField 外观显示,如提示文本,背景颜色,边框等 keyboardType :用于设置该输入键盘输入类型,取值如下: image.png...maxLines :输入最大行数,默认为 1,如果为 null,则为无限制maxLength 和 maxLengthEnforced :前者代表输入文本最大长度,设置输入框右下角会显示输入文本计数...print(focusNode.hasFocus); }); 自定义样式 隐藏文本 TextField( obscureText: true, ) 隐藏输入内容将不可见,变成密码类型了

11.4K30

Flutter 专题】65 图解基本 TextField 文本输入框 (二)

helperText 为文本框辅助标签,一般文本框底部,提示性内容;helperStyle 为文本框辅助标签样式属性;与 TextField 是否获取焦点无变化; return TextField(decoration...hintText 为文本框默认提示信息,若设置 labelText,则 TextField 未获取焦点时优先展示 labelText;hintStyle 为文本提示信息样式属性;hintMaxLines...errorText 为文本框错误提示信息,一般文本框底部,当设置 errorText 时不展示 helperText,整体默认为红色;errorStyle 为错误提示信息样式属性;errorMaxLines...alignLabelWithHint 用于 TextField 设置多行时,true 时覆盖将标签与 TextField 中心对齐默认行为,和尚尝试了多种情况下 true 和 false 状态,发现效果并不明显...---- 文本输入框确实有很多细节需要研究和尝试,和尚仅初步了解,有待深入研究;且和尚建议时常升级 Flutter 版本,可能对于同一个 Widget 会有或多或少更新,如有问题请多多指导

4.5K41

Flutter实战】文本组件及五大案例

老孟导读:大家好,这是【Flutter实战】系列文章第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握...Text Text是显示文本组件,最常用组件,没有之一。...,值说明如下: left:左对齐 right:右对齐 center:居中 justify:两端对齐,此属性中文存在bug(Flutter版本:1.17.3)也可以官方issue中关注此问题 start...icon显示输入前面,用法如下: TextField( decoration: InputDecoration( icon: Icon(Icons.person), ), ) 当输入框是空而且没有焦点时...helperText显示输入左下部,用于提示用户,helperStyle参数表示文本样式,具体参考TextStyle用法如下: TextField( decoration: InputDecoration

7.2K10

Flutter 专题】08 小小优化【登录】页面

和尚刚开始在编辑内容块 content 时,以为涉及 widget 元素不多,所占不会超过屏幕,所以根 widget 使用是 body: new Container(),但是点击文本TextField...优化二:文本TextField 中尾部添加【清空数据】图标 方式一:使用层布局 Stack,输入文本TextField 上一层添加一个【清空数据】图标; new Padding( padding...TextField 自带属性【后缀图标 suffixIcon】,文本TextField 提供了很多便利属性,例如:【前缀图标 prefixIcon】【文本框前图标 icon】; new Expanded...优化三:调整键盘弹出样式 设置文本TextField 中 keyboardType: TextInputType.phone, Flutter 提供了多种弹出键盘方式:text/datetime...优化四:根据输入文本框添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框功能,如:showDialog/showMenu/showModalBottomSheet 等,和尚采用是对话框方式

1.4K51

Flutter》-- 4.Flutter组件基础

8)brightness:导航栏材质亮度。 9)textTheme:文本主题设置。 10)primary:导航栏是否显示在任务栏顶部。 11)centerTitle:标题是否居中显示。...常见属性: controller:输入框控制器,通过它可以获取和设置输入内容以及监听文本内容改变。...如果没有提供controller,则TextField组件内部会自动创建一个。 focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互一种常见方式。...decoration:用于控制TextField组件外观显示,如提示文本、背景颜色和边框。 textAlign:输入框内文本水平方向对齐方式。 textDirection:输入框内文本方向。...obscureText:是否隐藏正在编辑文本内容。 maxLines:输入文本最大行数,默认为1. maxLength:输入框中允许最大字符数。

12.4K30

Flutter组件学习(三)—— 输入框TextFiled

序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架魅力还是很吸引人哈,所以我们更要抓紧学习了;之前我写了两篇文章来介绍...FlutterText组件 和 FlutterImage组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图: image TextFiled组件API 先来看一下TextFiled...Text 组件时候已经讲过,接下来我们一个一个来看这些属性: 1、controller 根据字面意思我们就可以知道,这是一个控制器,毫无疑问当然是控制 TextField 组件了,用处有很多,可以监听输入输入...( 18 focusNode: _focusNode, 19) 3、decoration 这个属性用来设置输入一些样式,比如前后图标,提示文字,错误文字,占位文字等等,下面来看一下可以设置东西(...:默认情况,什么都不设置 8、onChanged 这个属性用来监听输入输入,类似AndroidTextWatch,但是它只有输入值: 1new TextField( 2 onChanged:

2.4K50

使用 Flutter 制作地图应用

本文主要介绍使用 Flutter 制作地图应用 本文中,我将向您展示如何使用 Flutter 向您应用程序添加映射功能。...labelText: "左侧有一个Icon", ),) icon参数可以传入一个Icon对象用来显示TextField左侧,我们可以传入各式各样Icon,满足我们丰富展示需求。...点击提示 hintText DART 1234567 TextField( decoration: InputDecoration( labelText: "点击后会有提示",...输入完成时候,这个时候我们可以拿到输入内容做一些操作。 与键盘事件配合,必要时候回收键盘。 TextField提供了三个回调方法 onChanged 此方法是输入有变化时候就会回调。...参数是当前已经输入内容 onSubmitted 此方法是我们输入完成,点击键盘上回车时候回调。

2.6K00

Flutter 快速解析 TextField 内部原理

FlutterTextField 是一个比较复杂控件,而在整个 TextField 里嵌套了许多不同实现控件,它们组成了我们常用输入框效果,如下图所示是关于 TextField 主要构成部分...image FocusTrapArea FocusTrapArea 大家可能会比较陌生,这个是最近版本里才出现控件,FocusTrapArea 本身并没有特别,它仅仅是 RenderObject...;上述例子运行通过打开模拟器开发者设置里 Don't keep activities 就可以看到效果。...所以本篇主要是通过介绍 TextField 组成,以及解释内部各组成部分作用,让开发者可以清晰了解 Flutter 里常用文本输入实现,当遇上问题或者需求时,可以快速定位和解决问题,例如:...最后介绍一个简单问题,之前有人刚好问我:如何在 Flutter 上实现类似微信聊天输入框从一行到多行输入框效果,如下图代码所示,就是这么简单: TextField( focusNode: _focusNode

2.2K30

Flutter 全栈式——基础控件

Flutter中,UI小控件有两种设计风格,一种是Material设计,这是安卓官方设计风格,另一种则是Cupertino风格,是iOS官方设计风格。...clip:剪辑溢出文本;fade:将溢出文本淡化为透明;ellipsis:用省略号表示溢出;visible:容器之外显示溢出文本 textScaleFactor double 每个逻辑像素字体像素值...设置helperText样式 hintText String 提示文本,位于输入框内部 hintStyle TextStyle hintText样式 hintMaxLines int 提示文本最大行数...prefixIcon Widget 位于输入框内部起始位置图标 prefix Widget 预先填充Widget,跟prefixText只能同时出现一个 prefixText String 预填充文本...正常情况边框 enabled bool 输入框是否可用 border三种值 InputBorder.none 没有边框 OutlineInputBorder 线框 UnderlineInputBorder

3.8K40

Flutter 专题】64 图解基本 TextField 文本输入框 (一)

和尚最近在学习基础 Flutter Widget,原因在于很多基础组件有很多容易忽视注意事项,了解并熟悉对整体开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...inputFormatters 为格式验证,例如原生 Android 中通常会限制输入手机号或其他特殊字符, Flutter 中也可以借此来进行格式限制,包括正则表达式;使用时需要引入 package...当 TextField 获取焦点弹出输入框时,输入框可能会将页面中元素顶上去,为避免此情况,可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可,resizeToAvoidBottomPadding...当 TextField 设置 enableInteractiveSelection 属性长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理; pubspec.yaml 中集成 flutter_localizations...; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter MaterialApp 中设置本地化代理和支持语言类型

4.5K51

Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

Flutter_Chatroom聊天室项目是基于flutter+dart技术开发跨平台聊天实战案例,基本实现了登录/注册表单验证、消息表情发送、图片预览、红包/视频/朋友圈等功能。...006360截图20200512002852994.png 技术点 技术框架:Flutter 1.12.13/Dart 2.7.0 视频组件:chewie: ^0.9.7 图片/拍照:image_picker...顶部沉浸式状态条+底部tabbar 至于flutter中如何实现顶部透明状态栏(去掉状态栏黑色半透明背景),去掉右上角banner,详细介绍可以去看这篇文章 https://segmentfault.com...中圆点数字/红点提醒 如下图红点提示flutter没有提供这种组件,只能自定义实现。...聊天页面实现|TextField编辑框插入表情 360截图20200513093616798.png flutterTextField文本框提供maxLines属性可实现多行/换行文本,不过默认会有高度

6.6K31

Flutter状态管理

在前面的文章中我们学习了Flutter中事件传递方法,让我们可以在数据流向简单业务场景中使用InheritedWidget、Notification 或者 EventBus。...在前端开发中我们都会接触redux ,借助于redux 我们可以很轻松地完成多界面数据维护和获取,Flutter中也有很多状态管理第三方库,如Provider、Scoped Mode、flutter_redux...首先,我们假定这样一个场景,第一个界面显示用户昵称,然后我们第二个界面修改昵称再返回观察第一个界面的显示情况。...通常情况下我们可以把多个数据封装成一个完整数据来进行操作,这种方法在数据间相互关联性比较接近情况下是可以实现,但是如何遇到数据关系不大情况下还采用这种方法的话就会造成界面Widget不必要重绘...还是以上面的例子来进行说明,我们在前面用户名基础上又增加了一个“家庭地址”,第一个界面新增一个Text用来显示家庭地址,第二个界面新增一个输入框用来输入家庭地址。

1.6K10
领券