首页
学习
活动
专区
工具
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这种类型的组件会根据滑动方向来设置约束。

98510

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

    56220

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

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

    1.7K20

    Flutter Form表单控件超全总结

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

    3.3K00

    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的弹出跟关闭就是死路一条了。

    4.4K21

    【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布局指南之深入理解BoxConstraints

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

    2.1K20

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

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

    73841

    探究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.9K2513

    Flutter Form表单控件超全总结

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

    2.3K20

    Flutter 视图布局-前言

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

    2.3K110

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

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

    1K20

    《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属性来确定自己在父组件里面的位置。

    1K20
    领券