开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当`maxLines`为空时，如何让`TextFormField` `prefixIcon`保持顶部对齐？

当maxLines为空时，可以通过设置prefixIcon的alignment属性为Alignment.topCenter来实现保持顶部对齐。具体代码如下：

TextFormField(
  maxLines: null,
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    prefixIconConstraints: BoxConstraints.tightFor(height: 24),
  ),
)

在上述代码中，我们将maxLines属性设置为null，表示TextFormField可以根据内容自动调整高度。然后，通过prefixIconConstraints属性设置prefixIcon的高度为24，以确保图标的高度与输入框一致。最后，通过alignment属性将prefixIcon设置为顶部对齐。

这样，无论输入框的高度如何变化，prefixIcon都会保持在顶部对齐。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter TextField详解

TextCapitalization.none,//大小写 this.style,//样式 this.strutStyle, this.textAlign = TextAlign.start,//对齐方式...不用慌，加一个参数就行了： minLines TextField( maxLines: 3, minLines...以上就是图标的介绍，其实除了图标之外，对应的位置也可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性，用法跟上面介绍到的自定义计数器是一样的。...[0-9]*$)'; RegExp regExp = new RegExp(patttern); if (value.length == 0) { return "手机号为空"...regExp.hasMatch(value)) { return "手机号格式不正确"; } return null; } 以上只是我们一般的校验，表单的话还是建议使用From包裹TextFormField

4.2K4 0

Flutter | 常用组件

当 Switch 或者 CheckBox 被点击时，会触发 onChanged 回调，我们可以回调中改变逻辑 class SwitchAndCheckboxTest extends StatefulWidget...，默认值为false，如果为true 时，valude 的值会自动增加一个状态 null 总结 Switch ， Checkbox 和 Radio 本身不会维护状态，而是需要父组件来管理状态，当用户点击时...不同的是后者的回调是 ValueChanged ,前者不接受参数 inputFormatters：用于指定输入格式，当输入内容改变时，会根据指定格式来校验 enable：若为...为 true 时，每一个自 FormField 都会自动校验合法性，并直接显示错误信息。...null : "用户名不能为空"; }, ), TextFormField(

11.4K3 0

《Flutter》-- 4.Flutter组件基础

当创建一个StatefulWidget组件时，同时也会创建一个State对象，StatefulWidget就是通过与State对象进行关联来管理组件状态树的。...didUpdateWidget()：当组件的配置发生变化或执行热重载时，系统会回调该函数更新视图。...dispose()：当状态组件需要被永久地从视图树中移除时，调用dispose()。调用dispose()后，组件会被销毁，在调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。...maxLines：输入框文本的最大行数，默认为1. maxLength：输入框中允许的最大字符数。 onChange：输入框内容改变时的回调函数。...enableInteractiveSelection：是否启用交互式选择，为true时表示长选中文字，并弹出cut、copy、paste菜单。

12.4K3 0

Flutter 入门指北之输入处理(登录界面实战)

false, // 是否自动获取焦点 this.obscureText = false, // 文字是否隐藏，多用于密码 this.autocorrect = true, this.maxLines...，通过该方法进行修改，最后的效果图如下，当输入框文字发生变化的时候，监听的 Text 内容会随之改变，获取内容的 Text 当点击按钮了才发生变化 ?...部件，都是使用的系统自带的图标，那么如何导入第三方自定义图标呢，马上为你揭晓答案，首先我们需要打开「阿里妈妈」也就是 iconfont，不知道的小伙伴通过链接打开，然后需要注册个账户，也可以直接通过 Github...然后点击 Package get 让其导入即可，别的插件也是这样导入。做好准备工作，我们就可以撸一个登录界面了~ 撸一个登录界面在开撸之前，我们先看下最终的效果图吧，虽然是比较常用的界面 ? ?...Colors.white), helperStyle: TextStyle(color: Colors.white)), // 有效条件(为空不通过

1.9K5 0

Flutter 全栈式——基础控件

因此，当遇到带有这两个单词开头的控件时，我们应该明确他们表达的意思。...InputBorder 输入框有焦点时的边框，errorText必须为空 focusedErrorBorder InputBorder errorText不为空时，输入框有焦点时的边框 disabledBorder...InputBorder 输入框禁用时显示的边框，errorText必须为空 enabledBorder InputBorder 输入框可用时显示的边框，errorText必须为空 border InputBorder..., ), ); 小技巧当输入框的默认线框无法满足时，可以使用Container容器自定义边框。...focusColor Color 获取焦点时按钮颜色 splashColor Color 水波纹效果的初始化颜色 hoverColor Color 当指针悬停在按钮上时的填充颜色 highlightColor

3.8K4 0

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

icon显示在输入框的前面，用法如下： TextField( decoration: InputDecoration( icon: Icon(Icons.person), ), ) 当输入框是空而且没有焦点时...，labelText显示在输入框上边，当获取焦点或者不为空时labelText往上移动一点，labelStyle参数表示文本样式，具体参考TextStyle，用法如下： TextField( decoration...labelText: '姓名：', labelStyle: TextStyle(color:Colors.red) ), ) hasFloatingPlaceholder参数控制当输入框获取焦点或者不为空时是否还显示...-10个字母', helperStyle: TextStyle(color: Colors.blue), helperMaxLines: 1 ), ) hintText是当输入框为空时的提示...multiline：当TextField为多行时（maxLines设置大于1），右下角的为“换行” 按键。 number：数字键盘。 phone：手机键盘，比数字键盘多"*"和 "#"。

7.3K1 0

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

errorText 为文本框错误提示信息，一般在文本框底部，当设置 errorText 时不展示 helperText，整体默认为红色；errorStyle 为错误提示信息样式属性；errorMaxLines...counter 系列为文本框右下角计数器，当设置 maxLengths 时通常会在右下角展示编辑字符数与整体数量比，可通过 counter 系列组件调整；counterText 为计数器展示内容；counterStyle...alignLabelWithHint 用于 TextField 设置多行时，true 时覆盖将标签与 TextField 的中心对齐的默认行为，和尚尝试了多种情况下 true 和 false 状态，发现效果并不明显...errorBorder 为 errorText 不为空且未获取焦点时边框； // UnderlineInputBorder 类型 return TextField(decoration: InputDecoration...focusedErrorBorder 为 errorText 不为空且获取焦点时边框； // UnderlineInputBorder 类型 return TextField(decoration: InputDecoration

4.6K4 1

# Flutter组件基础——Text

总结：TextAlign.center居中对齐，left左对齐，right右对齐，start和end的含义取决于TextDirection，当TextDirection为ltr即(left-to-right...当TextDirection为rtl即(right-to-left)时，start和end的含义和left、right相反。...此处需要注意，overFlow为fade时，设置softWrap为false与不设置的效果，不设置时阴影效果方向为从上到下，设置了之后阴影效果为超出的尾部，见下图。...，softWrap为false，maxLines为1，Hello Flutter', textAlign: TextAlign.left, // 文本对齐方式...textDirection: TextDirection.ltr, // 文本对齐方向 maxLines: 1, // 最大显示多少行 overflow

1.3K3 0

HarmonyOS开发学习（3）–页面开发

设置文本超长显示当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。...ScaleDown：保持宽高比显示，图片缩小或者保持不变。 None：保持原有尺寸显示。...Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型： Top：设置子组件在垂直方向上居顶部对齐。...当页签比较多的时候，可能会导致页签显示不全，将布局模式设置为Scrollable的话，可以实现页签的滚动。...此外页签显示位置还与vertical属性相关联，vertical属性用于设置页签的排列方向，当vertical的属性值为false（默认值）时页签横向排列，为true时页签纵向排列。

9421 0

flutter 输入框组件TextField的实现代码

然后我们为输入框做一些其他的效果，如提示文字，icon、标签文字等。...可以看到，我先添加了一个decoration属性. decoration属性介绍: border：增加一个边框， hintText：未输入文字时，输入框中的提示文字， prefixIcon：输入框内侧左面的控件...onEditingComplete的默认实现根据情况执行2种不同的行为: 当完成操作被按下时，例如“done”、“go”、“send”或“search”，用户的内容被提交给[controller]，然后焦点被放弃...当按下一个未完成操作(如“next”或“previous”)时，用户的内容被提交给[controller]，但不会放弃焦点，因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。...TextCapitalization TextField提供了一些有关如何使用户输入中的字母大写的选项。

4.7K1 1

Flutter Text（文本控件）

textDirection 文本方向 locale 默认Localizations.localeOf(context)（基本不用） softWrap 是否换行 overflow 文字超出屏幕如何处理...是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理 softWrap属性值含义 true 自动换行 false 不自动换行，超出屏幕截断 2.5、overflow 当文字超出屏幕的时候...最大行数设置如果softWrap和maxLines同时赋值，以maxLines为最高优先级。...将字体大小设置成10.0，倍率为2，可以实现相同效果。...: 2, //如果softWrap和maxLines同时赋值，以maxLines为最高优先级。

5K4 0

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

maxLines 为允许展现的最大行数，在使用 maxLength 时内容超过一行不会自动换行，因为默认 maxLines=1，此时设置为 null 或固定展示行数即可自动换行；区别在于 null 会展示多行...decoration 为边框修饰，可以借此来调整 TextField 展示效果；可以设置前置图标，后置图片，边框属性，内容属性等，和尚会在后续集中尝试；若要完全删除装饰，将 decoration 设置为空即可...当 TextField 获取焦点弹出输入框时，输入框可能会将页面中元素顶上去，为避免此情况，可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可，resizeToAvoidBottomPadding...长按输入框出现【剪切/复制/粘贴】的菜单如何设置中文？...使用 maxLength 时如何取消文本框右下角字符计数器？

4.6K5 1

Flutter 快速解析 TextField 的内部原理

Desktop 平台，通过增加了 FocusTrapArea 之后，在 Web/Desktop 平台执行 TextEditingController.clear 的时候，TextField 还能继续保持之前获得的焦点...enabled 为 false 时，IgnorePointer 就会屏蔽整个区域内的手势事件，从而让 TextField 会无法点击输入。...image 也就是当 FocusNode 和 TextEditingController 这两者发生改变的时候，会让 InputDecorator 重新 rebuild 从而改变渲染效果，例如：输入框输入内容时...所以本篇主要是通过介绍 TextField 的组成，以及解释内部各组成部分的作用，让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现，当遇上问题或者需求时，可以快速定位和解决问题，例如：...”粘贴/复制“ 的 Toolbar 是哪里弹出； Toolbar 是如何定位和布局；点击 TextField 是如何弹出键盘和处理手势事件； TextField 如何做到局部绘制； ...

2.3K3 0

scetch入门第2部分：文本，对齐和SVG在第3部分中了解如何导出文件

使字体大小为36，文本对齐中心和填充颜色为白色。 ? 编辑文字如您所见，文本不是相对于矩形居中。要解决此问题，请按住Shift并同时选择矩形和文本。 ?...选择两个对象接下来，找到Inspector顶部的Align按钮，然后选择下面列出的两个按钮。这些是水平对齐和垂直对齐。 ? 水平和垂直对齐现在让我们在页面的白色部分添加一些文本。...我使用了24号Avenir，对齐中心。确保在对齐设置中将其水平对齐到画板的中心。导入向量让我们学习如何导入矢量文件并进行编辑。...当您使用他人的作品时，请确保在下载时始终给予奖励或付费。 ? 打开图层现在是时候做一些侦探工作了。我总是在导入矢量文件时清理空的和不必要的图层。...选择Layer_1和Layer_2后，请注意图层为空，可以删除。 ? 删除空图层如果展开Layer_3，您将看到这是图标核心路径的位置。 ?

4.1K3 0

-Flex布局完全解读

，主轴为水平方向。...MainAxisAlignment { start,//顶头 end,//接尾 center,//居中 spaceBetween,//顶头接尾，其他均分 spaceAround,//中间的孩子均分,两头的孩子空一半...height: 140); return show; } 复制代码 ---- 5.主轴尺寸:mainAxisSize enum MainAxisSize { min, max, } 当父容器的宽未约束...此时改为MainAxisSize.min时,它不会延伸自己的区域，自会包裹内容 ?...fontSize: 13); var littleStyle = TextStyle(color: Colors.black, fontSize: 16); var top = Row(//顶部

1.2K2 0

关于flutter中的TextStyle详解

可以使用负值来让字母更接近。 double wordSpacing 单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。...省略时，文本将使用最接近的DefaultTextStyle的样式。如果给定样式的TextStyle.inherit属性为true（默认值），则给定样式将与最接近的DefaultTextStyle合并。...TextAlign textAlign 文本应如何水平对齐enum：值说明 TextAlign.center 将文本对齐容器的中心。 TextAlign.end 对齐容器后缘上的文本。...TextDirection textDirection 这个属性估计是给外国人习惯使用，相对TextAlign中的start、end而言有用（当start使用了ltr相当于end使用了rtl，也相当于...如果为null，将使用从环境MediaQuery获取的MediaQueryData.textScaleFactor 即手机的像素密度（1.0、1.5、2.0、3.0） int maxLines 文本要跨越的可选最大行数

3K1 0

关于flutter中的TextStyle详解

可以使用负值来让字母更接近。 double wordSpacing 单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。...省略时，文本将使用最接近的DefaultTextStyle的样式。如果给定样式的TextStyle.inherit属性为true（默认值），则给定样式将与最接近的DefaultTextStyle合并。...TextAlign textAlign 文本应如何水平对齐enum：值说明 TextAlign.center 将文本对齐容器的中心。 TextAlign.end 对齐容器后缘上的文本。...TextDirection textDirection 这个属性估计是给外国人习惯使用，相对TextAlign中的start、end而言有用（当start使用了ltr相当于end使用了rtl，也相当于...如果为null，将使用从环境MediaQuery获取的MediaQueryData.textScaleFactor 即手机的像素密度（1.0、1.5、2.0、3.0） int maxLines 文本要跨越的可选最大行数

1.9K3 0

Golang语言情怀--第115期全栈小游戏开发:第6节：使用场景编辑器搭建场景图像

空节点选择创建节点菜单中的创建空节点就能够创建一个不包含任何组件的节点。空节点可以作为组织其他节点的容器，也可以用来挂载开发者编写的逻辑和控制组件。...另外在下文中我们也会介绍如何通过空节点和组件的组合，创造符合自己特殊要求的控件。...对齐/平均分布节点当场景编辑器为 2D 视图时，左上角有一排按钮可以用来在选中多个节点时将这些节点对齐或者平均分布。...具体的规则如下：假设三个 Label 节点都已经选中，从左到右的 6 个对齐按钮会依次将这些节点：顶部对齐，按照最靠近上方的边界对齐（而不是最上方的节点的上边界）垂直居中对齐，按照整体的水平中线对齐...底部对齐，按照最靠近下方的边界对齐左对齐，按照最靠近左边的边界对齐水平居中对齐，按照整体的垂直中线对齐右对齐，按照最靠近右边的边界对齐后半部分从左到右的 6 个分布按钮会依次将这些节点：顶部分布

1652 0

使用 Flutter 制作地图应用

本文主要介绍使用 Flutter 制作地图应用在本文中，我将向您展示如何使用 Flutter 向您的应用程序添加映射功能。...EdgeInsets.all(16.0), hintText: "Search for your localisation", prefixIcon...", ),) maxLines参数可以设置行数，比如这里设置的是2，默认只会显示两行，超过两行的部分只能通过上下滚动来显示。...设置颜色之后，当点击TextField之后，文字会变小，颜色也是设置好的颜色。 5....Icons.account_box), suffixIcon: Icon(Icons.add), ),) suffixIcon默认是显示在右侧的，TextField被点击之后会显示为被选中状态

2.7K0 0

Compose Text 文本和 AnnotatedString 多种样式的文本详解｜技术创作特训营第一期

，Visible 时即便溢出也要展示；Text(text = "$name, TextOverflow.Clip", overflow = TextOverflow.Clip, maxLines = 2...& style fontStyle 用于设置文本字体样式，包括 Normal 和 Italic 斜体两类；style 用于设置文本内容样式，style 方法中的多种属性与 Text 属性重叠，当两者均设置时...) ), alpha = 0.8f ))图片9.2 baselineShift & fontSynthesis TextStyle 的 baselineShift 用来让所有文字互相对齐的基准线...，视觉上更舒适； fontSynthesis 用于合成字体，当使用的 FontFamily 不包含粗体或斜体时，系统是否应该伪造粗体或斜体；9.3 textIndent & shadow TextStyle...Text(text = annotatedString1)使用字符串和样式构建：允许在添加字符串时同时设置样式；使用 withStyle 函数包裹 append 函数，以便为特定的文本部分应用样式；val

2.6K3 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭