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

TextFormField上的Flutter ConstrainedBox未按预期设置高度

在Flutter中,TextFormField是一个常用的用于输入文本的小部件,而ConstrainedBox是一个用于限制子部件大小的小部件。在给TextFormField包裹ConstrainedBox时,可以设置ConstrainedBox的高度来限制TextFormField的大小。

然而,如果在TextFormField上的ConstrainedBox未按预期设置高度,可能会导致TextFormField的大小不符合预期。这可能是由于以下几个原因:

  1. 未正确设置ConstrainedBox的约束条件:ConstrainedBox需要通过设置constraints属性来指定子部件的最小和最大宽度和高度。如果未正确设置这些约束条件,TextFormField的大小可能会受到限制或扩展。
  2. 父级部件的约束条件:如果TextFormField的父级部件也设置了约束条件,可能会影响到TextFormField的大小。在这种情况下,需要确保父级部件的约束条件与ConstrainedBox的约束条件相互兼容。

为了解决这个问题,可以按照以下步骤进行操作:

  1. 确保正确设置ConstrainedBox的约束条件:在ConstrainedBox的constraints属性中,可以使用BoxConstraints类来设置最小和最大宽度和高度。例如,可以使用BoxConstraints.tightFor(height: 50.0)来设置ConstrainedBox的高度为50.0。
  2. 检查父级部件的约束条件:如果TextFormField的父级部件也设置了约束条件,需要确保父级部件的约束条件与ConstrainedBox的约束条件相互兼容。例如,如果父级部件设置了固定高度,那么ConstrainedBox的高度应该小于或等于父级部件的高度。
  3. 调试和测试:如果以上步骤都没有解决问题,可以使用调试工具来检查和测试布局。可以使用Flutter DevTools或调试器来查看部件树和布局信息,以确定是否存在其他因素导致TextFormField的大小不符合预期。

总结起来,要解决TextFormField上的Flutter ConstrainedBox未按预期设置高度的问题,需要确保正确设置ConstrainedBox的约束条件,并检查父级部件的约束条件。如果问题仍然存在,可以使用调试工具进行进一步的排查。

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

相关·内容

Flutter | ConstrainedBox & UnconstrainedBox 组件

ConstrainedBox 首先我们来说一下 ConstrainedBox,从名字我们也能解读个大概:「约束盒」。 没错,就是约束盒,他是用来干嘛?...在其 child 添加约束 widget。 例如,如果你希望 child 最小高度为 50.0 像素,可以用 BoxConstraints(minHeight: 50.0) 来进行约束。...: BoxConstraints,这里也简单说一下约束: 约束是由最小宽度、最大宽度、最小高度、最大高度四个方面构成;尺寸大小则由特定宽度和高度两个方面构成。...可以看到,这个时候 Container 宽高完全是按照 ConstrainedBox 约束来设定。 2....在我们开头举例子,为什么我设置 200*200 Container默认是屏幕宽度? 因为ListView这种类型组件会根据滑动方向来设置约束。

92110

Flutter你竟是这样布局

如果为了精确局部布局,Container和ConstrainedBox会是一个可行修饰布局。 Examples 下面的29个示例,将演示Flutter布局思想。...ConstrainedBox将来自其约束参数附加约束施加到其子对象。 Container必须介于70到150像素之间。它希望有10个像素,所以最终有70个像素(最小)。 Example 11 ?...ConstrainedBox将来自其约束参数附加约束施加到其子对象。 Container必须介于70到150像素之间。它希望有1000个像素,所以最终有150个(最大)。...将来自其约束参数附加约束施加到其子对象。...当然,屏幕是通过将tight constraint传递给Container来实现。 另一方面,宽松约束设置了最大宽度和高度,但使小部件尽可能小。

2.3K20

flutter系列之:深入理解布局基础constraints

掌握了constraints才算对layout有了真正了解,但是flutterconstraints和我们熟悉HTML中constraints区别比较大,所以我们还是需要深入了解flutter...这四个属性所能限制就是宽度和高度范围。 根据这两个属性范围不同,constraints可以分为tight constraints和loose constraints。...子widget会有自己定义大小,那么子widget会根据自己定义大小来设置自己大小,并将结果反馈跟父widget,父widget会最终根据所有子widget大小来设置自己大小。...,指定了四个constraints属性,但是这个ConstrainedBox并不会应用到child,所以最终得到界面还是全部蓝色。...,所以这里ConstrainedBox是生效,如下: flutter中除了ConstrainedBox,还有一个UnconstrainedBox,它作用和ConstrainedBox是相反,大家可以自行尝试

46620

Flutter 初学者必读高级布局规则

接下来,widget 一个个确定 子项 位置(在 x 轴确定水平位置,在 y 轴确定垂直位置)。 最后,widget 将其自身大小告知父项(当然这个大小也要符合原始约束)。...widget不知道,也无法确定自己在屏幕位置,因为它位置是由父项决定。 由于父项大小和位置又取决于上一级父项,因此只有考虑整个树才能精确定义每个 widget 大小和位置。...Container 会根据子项大小设置自己大小,但同时会考虑自己 padding。...换句话说,严格约束最大宽度等于其最小宽度,并且其最大高度等于最小高度。...当然,屏幕是将 严格 约束传递给 Container 来实现这一点。 另一方面,宽松 约束可设置 最大 宽度 / 高度,但允许 widget 自由取小于这个值大小。

1.6K20

Flutter之drawer详细分析(你要操作都有)

简介 这篇文章主要讲解有关drawer一切。 另:接Flutter相关项目,需要私信或通过QQ:708959817,联系我 2....image.png 可以看到: Container=>限制高度(默认高度+状态栏高度) BoxDecoration=> 底部添加毫无用处分割线 AnimatedContainer =>动画版Container...添加默认内边距+顶部状态栏高度内边距 嗯,感觉没错啊,这是怎么肥事,MediaQuery.of(context).padding.top是获取状态栏高度,然后自身高度加上状态栏高度,应该是显示蓝色才对...代码基础修改_kWidth值,把它暴露给用户自己去定制,让他能传入一个double类型宽度百分比,弹出根据屏幕百分之几Drawer,该值只允许传入大于0小于1值,默认为0.7 下面我们将上面的...就是控制弹出跟关闭一个部件 那么,到这里,我们基本想要监听drawer弹出跟关闭就是死路一条了。

3.9K20

Flutter Form表单控件超全总结

[1240] 注意:无特殊说明,Flutter版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Form、FormField、TextFormField...TextFormField TextFormField继承自FormField,是一个输入框表单,因此TextFormField中有很多关于TextField属性,TextFormField基本用法...,如果Formautovalidate设置为true,TextFormField忽略此参数。...在使用Form时候需要设置其key,通过key获取当前FormState,然后可以调用FormStatesave、validate、reset等方法,一般通过如下方法设置: final _formKey...欢迎加入Flutter微信交流群(mqd_zzy),让我们一起学习,一起进步,开始我们故事,生活不止眼前苟且,还有诗和《远方》。

3.1K00

Flutter布局指南之深入理解BoxConstraints

强烈建议先看下这篇文章——Flutter你竟是这样布局 不管你是Android开发,还是Flutter开发,当你开始使用Flutter茫茫多Widget时,可能会猜测Widget在屏幕尺寸和位置...,但事实,你会经历多次错误和失败,FlutterWidget并不会总是像你想象那样进行布局。...如果不了解Widget约束条件是如何应用,就很难预测Widget尺寸。很多时候,你根本不知道为什么一个Widget尺寸比你预期要大,或者比你想象要小。...然后,MyApp在它孩子MaterialAppWidget设置约束,而后者又在它孩子ContainerWidget设置约束。...Widget中,例如,列父Widget对它设置了Unbounded约束,而这个column中一个子Widget高度设置为double.infinity,即无界高度约束,那么Flutter将出错

2K20

Flutter 专题】66 图解基本约束 Box (一)

和尚在学习过程中,为了调整或适配 Widget 大小时,会设置 Widget 或嵌套使用一些约束 Widget;和尚针对性学习一下这一系列约束 Box; SizedBox 源码分析 class...const BoxConstraints.tightFor({ double width, double height, }) // 创建需要给定宽度或高度框约束,除非它们是无限...BoxConstraints() BoxConstraints 构造方法可以设置最大最小宽度和高度四个属性,在实际场景中可以灵活运用;其约束大小按照 minWidth <= child.width...最小宽高为 0.0;若设置宽高则以设置尺寸进行约束; return ConstrainedBox(constraints: BoxConstraints.tightFor(height: 110.0),...---- Flutter 提供了多种约束 Box,所谓条条大路通罗马,同一种效果可以有多种实现方式,但和尚认为还是应该多多了解,尽量尝试最优方案;和尚对 Box 系列研究还很浅显,有错误地方请多多指导

70341

Flutter Widgets大全】电子书开源

Flutter Widgets大全】是老孟耗费大量精力整理,总共有330多个组件详细用法,开源到Github,希望可以帮助到大家,开源不易,转发一下可不可以?。...Flutter Widgets 【Flutter Widgets 大全】 为 Flutter 老孟 网站项目,共收录 330 多个 Widgets,此电子书并不适合入门(一个一个组件学习),适合当作手册...,需要时候进行查阅。...为了方便对比学习,我将相近或相反功能组件整理到一个文件中,比如所有的 Button 类组件、弹出类组件等。 如果想系统学习入门知识,请到 Flutter 老孟 实战 查看。...ClipOval 在线查看 ClipPath 在线查看 ClipRRect 在线查看 ClipRect 在线查看 CloseButton 在线查看 ColorFiltered 在线查看 Column 在线查看 ConstrainedBox

1.2K10

探究Flutter和传统浏览器布局原理异同。

二、从Web到Native 小程序是采用xml dom+wxss来定义UI界面的,它本质只是在标准dom和css包装了一层,翻译起来非常直观。...里,我们用ConstrainedBox来容纳最大最小宽度约束。...在书写xml过程中,我们可以很直观地得到一颗dom树,但为了把它渲染出来,需要知道每个盒子在屏幕位置坐标,以及它长宽高,颜色信息等等。...(Constraints go down) 3.小黄没有定义自身尺寸,但它拥有5像素padding,于是它决定它对子元素约束变成,宽度不超过290,高度不超过75。 6.下面轮到小紫了。...从而保证转换后布局结果符合预期。 具体方案还在探索中,to be continued。 参考资料 1. Flutter中文开发文档 https://flutter.cn/docs 2.

1.8K2513

Flutter Form表单控件超全总结

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 Form、FormField、TextFormField是表单相关控件...TextFormField TextFormField继承自FormField,是一个输入框表单,因此TextFormField中有很多关于TextField属性,TextFormField基本用法...,如果Formautovalidate设置为true,TextFormField忽略此参数。...在使用Form时候需要设置其key,通过key获取当前FormState,然后可以调用FormStatesave、validate、reset等方法,一般通过如下方法设置: final _formKey...,此方法会调用每一个FormFieldvalidator回调,此回调需要字符串表示数据验证不通过,将会在改表单下显示返回字符串,具体可查看下TextFormField介绍。

2.1K20

Flutter 视图布局-前言

CustomMultiChildLayout 使用一个委托来对多个子元素进行设置大小和定位小部件。 每一种 Widget 所实现布局方式都不一样,都有一个主要实现场景,以及对子元素展示方式。...IntrinsicHeight 一个 Widget,它将它子元素高度调整其本身实际高度。 AspectRatio 一个 Widget,试图将子元素大小指定为某个特定长宽比。...ConstrainedBox 对其子项施加附加约束 Widget。 FittedBox 按自己大小调整其子元素大小和位置。 LimitedBox 一个当其自身不受约束时才限制其大小盒子。...如果宽度或高度为NULL,则此 Widget 将调整自身大小以匹配该维度中孩子大小。...此外我还考虑为了方便各位少侠小伙伴们更直观学习和参考,我还将 Flutter 系列 MyApp 项目同步到了 Github ,以后如有文章更新都会将文章内代码同步更新到 Github 项目里。

2.2K110

Flutter》-- 5.Flutter页面布局

Flutter提供尺寸限制类容器可以用于限制容器大小,并提供了多种约束容器组件,常见ConstrainedBox、SizedBox和UnconstrainedBox。...5.1.1 ConstrainedBox 用来对子组件添加额外约束。...Flutter中使用Wrap来实现流式布局,支持属性如下: 1)direction:主轴方向,默认是Axis.horizontal; 2)alignment:子组件在主轴对齐方式; 3)runAlignment...:流式布局会自动换行或换列,runAlignment属性指的是每行或每列对齐方式; 4)runSpacing:每行或每列间距,默认是0.0; 5)crossAxisAlignment:子组件在交叉轴对齐方式...无定位子组件不被Positioned组件嵌套,需要设置alignment属性来确定自己在父组件里面的位置。

96820

Flutter 组件集录】Divider | 8 月更文挑战

一、认识 Divider 组件 Divider 组件大家都很熟悉,就是一根水平分割线,可以指定高度、粗细、颜色、边距。...那这些属性默认是什么,如何统一设置默认值,Divider 组件源码又是如何实现呢?本文就来详细介绍一下。 1....4.Divider 默认属性 如果一个应用中需要指定默认 Divider 样式,每次使用都设置一下显然很麻烦。...Flutter 中有相关主题组件 DividerTheme ,其中维护了 DividerThemeData 数据。我们可以通过 该组件使其子节点 Divider 按照默认样式进行展现。...另外注意一下,在构造方法断言中,四个数字属性都不能为负数。 build 方法也比较简单,首先通过 DividerTheme 获取数据,可以看出如果没有设置主体,默认高度是 16 逻辑像素。

87920
领券