首页
学习
活动
专区
工具
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 | 常用组件

因此,我们在自定义组件是应该思考一下那种方式最为合理 输入框和表单 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.7K41

    【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.3K10

    【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.5K51

    《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.5K30

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

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

    2.6K50

    使用 Flutter 制作地图应用

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

    2.7K00

    Flutter 快速解析 TextField 的内部原理

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

    2.4K30

    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.7K51

    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 flutter中TextField文本框提供的maxLines属性可实现多行/换行文本,不过默认会有高度

    6.8K31

    Flutter状态管理

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

    1.6K10

    Flutter Interact 的 Flutter 1.12 大进化和回顾

    image 二、更多开发工具 1、DartPad DartPad 是用于在线体验 Dart 功能的平台,而本次更新后 DartPad 也支持 Flutter 的在线编写预览,这代表着开发者可以在没有...idea 的情况下也能实时测试自己的 Flutter 代码,算是补全了 Flutter 的在线用例测试。...image 在导入 Sketch 文件后可以看到设计师完成的界面效果,同时选中 "" 按键,可以在右侧看到对应的 Flutter 代码,左侧可以看到对应的层级设计,但是这时候的代码看起来还比较简单和笨重...image 另外可以在 Layout Explorer 中动态调整控件的 flex 等相关信息,实时预览修改情况。 ?...image Flutter 过去的一年无疑是火热的,所以暴露的问题也指数级出现,比如最近开发中就遇到了在断网时加载图后之后,再打开网络无法继续显示图片的问题。

    2.3K30

    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程

    接着我们把剩下两个问题改了好开始下一篇大整理了,在输入手机号表单前面加上这个提示字样,字体也是pingfang SC,在请输入手机号表单上面增加描述文字“Please login your account...ok根据提示,我们需要完整的修改一下代码,import 'package:flutter/material.dart';import 'package:logging/logging.dart';void...这里只是用来做个样子,这里我们应该用选框组件,在 Flutter 中实现同意协议的勾选框(CheckBox)通常可以使用 Checkbox 组件。...**OutlinedButton**特点:有边框但没有填充色,看起来更简洁。适用场景:适合用于需要强调边界或与背景对比明显的场合。3. **TextButton**特点:仅有文本,无任何背景或边框。...适用场景:常用于导航或主要操作的快速执行。8. **CupertinoButton**特点:符合iOS设计风格的按钮。适用场景:适用于需要在Flutter应用中融入iOS风格元素的情况。9.

    8110
    领券