Flutter Column 子组件高度充满（BoxConstraints forces an infinite height）

最新推荐文章于 2024-03-24 12:04:37 发布
最新推荐文章于 2024-03-24 12:04:37 发布
阅读量6.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Flutter学习与记录 文章标签： flutter android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013937668/article/details/122256577
本文探讨了Flutter应用中遇到的BoxConstraints forces infinite height错误，重点在于如何在Column布局中适当地使用Expanded填充剩余空间，同时给出了自定义LoadStateLayout充满底部的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写布局遇到了一个bug，BoxConstraints forces an infinite height

2021-12-31 14:53:54.959 23302-23398/com.example.my_fllutter_test I/flutter: 错误信息1：BoxConstraints forces an infinite height.
    These invalid constraints were provided to RenderConstrainedBox's layout() function by the following function, which probably computed the invalid constraints in question:
      RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:277:14)
    The offending constraints were:
      BoxConstraints(w=360.0, h=Infinity)
2021-12-31 14:53:54.960 23302-23398/com.example.my_fllutter_test I/flutter: 错误信息2：#0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:517:9)
    #1      BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:561:11)
    #2      BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:565:6)
    #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1758:24)
    #4      RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:277:14)
    #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1858:7)
    #6      ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
    #7      RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:829:43)
    #8      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
    #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1858:7)
    #10     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart

在column中某个的组件的高度想充满整个剩余的位置，但是如果你不设置高度的话就会报以上这个错误，类似下面这种，就被报错

LoadStateLayout是我自己定义的一个加载页面，这个页面需要充满底部的高度，如何实现呢，用Expanded即可。

 

使用Expanded 包围整个的子组件，就可以撑满剩下的屏幕区域了

Flutter中Padding、Row 、Column 、Expanded 组件详解
分享前端工程化、动效魔法与性能之舞！
12-20 1942
本文介绍了Flutter中常用的布局组件及其使用方法。Padding组件用于处理容器与子元素间距，通过EdgeInsets设置边距值。Row和Column组件分别实现水平和垂直布局，通过mainAxisAlignment和crossAxisAlignment属性控制对齐方式。Expanded组件类似Flex布局，可定义子组件在父组件中的占比，常用于实现自适应布局。文章通过多个代码示例展示了这些组件的具体应用，包括设置内边距、多元素对齐、比例分配空间等场景，并提供了一个综合布局实例，演示了如何组合使用这些组件
Flutter中设置TabBarView高度
AppBlog.CN全栈架构
05-07 1102
参考：https://stackoverflow.com/questions/52023610/getting-horizontal-viewport-was-given-unbounded-height-with-tabbarview-in-flutter。Flutter中TabBarView高度默认充满全屏，the TabBarView doesn’t have a bounded height. 本文记录设置TabBarView高度的方法。
Flutter报错:BoxConstraints forces an infinite width.
ulddfhv的专栏
12-23 1万+
今天遇到一个布局报错BoxConstraints forces an infinite width. 布局如图所示: 我把报错信息也贴一下: 在这里我们要注意,当Stack中使用Positioned的时候，要注意限制Positioned宽度为具体宽度，不能设置double.infinity之类的, 解决方法：1.如果能用Align替代 使用Align 我这里解决办法就是使用Align...
flutter的Column 的使用技巧(对齐、占满)
chuyouyinghe的专栏
07-02 1万+
//让子控件，水平居中右对齐 Column （ crossAxisAlignment: CrossAxisAlignment.start ） //让子控件，水平居中左对齐 Column （ crossAxisAlignment: CrossAxisAlignment.end ） //让子控件，水平居中对齐 Column （ crossAxisAlignment: CrossAxisAlignment.center ） //让子控件，水平占满父控件空间 Column （ .
flutter Column 中包含ListView高度设置问题
weixin_42354735的博客
11-03 1755
Column(children: <Widget>[ Text(“测试”), Container( width: ScreenUtil().setWidth(570), // height: ScreenUtil().setHeight(800), child: ListView.builder( scrollDirection: Axis.vertical, itemBuilder: (context...
flutter Column 中包含ListView高度设置问题
热门推荐
dalong3976的博客
03-24 2万+
Column(children: <Widget>[ Text(“测试”), Container( width: ScreenUtil().setWidth(570), // height: ScreenUtil().setHeight(800), child: ListView.builder( scrollDirectio...
Flutter之Column与Flex布局问题
Enl0ve的博客
01-13 900
Column与Flex布局的问题 原本的想法是在Column布局中使用Flex布局均分高度，最开始代码是这样写的： class demoA extends StatelessWidget{ @override Widget build(BuilderContext context){ return Column( children: [ Flex( children: [
Flutter实现容器组件、图片组件 的代码
08-25
7. `width`和`height`：分别设定容器的宽度和高度，可以设置为`double.infinity`使其充满父组件的相应方向。 8. `constraints`：添加额外的约束条件给子组件。 9. `margin`：围绕在装饰和子组件之外的外部空白区域...
flutter Stack中子widget填充
ok2547881370的博客
06-05 1639
记录一下 1. Stack的fit属性 默认是适应子widget大小 , 即如果没有定位的widget,Stack的宽高将以宽高最大的子widget为基础 如下,此时Stack的高度是100 Stack( children : <Widget>[ Container( width : 200, height : 100 ), Container( width : 100, height : 50, ), ], ) 在实际的开
Flutter 基础布局之Column
u013474690的博客
03-27 9818
Column意为垂直布局，可以使其包含的子控件按照垂直方向排列 代码如下： class _TestState extends State<DemoPage2> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( width: MediaQuery.of(context).siz
Flutter 使用Positioned 时异常BoxConstraints forces an infinite width.
u011050129的博客
02-26 3298
The following assertion was thrown during performLayout(): BoxConstraints forces an infinite width. These invalid constraints were provided to RenderSemanticsAnnotations's layout() function by the fo...
Flutter灵活布局要掌握的两个控件Expanded和Flexible
江上清风山间明月的博客
06-03 1395
在Flutter中，Expanded和Flexible是两个用于控制子组件尺寸的Widget，它们都可以用于实现灵活的布局。Expanded Widget会自动将子组件的尺寸扩展到父组件剩余的空间，而 Flexible Widget 则会自动调整子组件的尺寸以适应父组件的尺寸。具体来说，Expanded Widget 会尽可能地扩展子组件的大小，以使其占据父组件的所有可用空间。如果需要控制子组件的最大和最小尺寸，可以使用Expanded的child属性，将子组件包装在一个ConstrainedBox中。
flutter报错BoxConstraints forces an infinite width.
m0_47265814的博客
12-28 1656
使用场景是在stack下的position中使用宽度设置时报错的 child:Stack( children:<Widget>[ Positioned( width:double.infinity, height:150, child:Image.asset('images/zsbk.jpg',fit:BoxFit.fitWidth), ), ]) 所以，代码改为 final size = MediaQuery.of(context).size;// 获取屏幕尺寸 Positio
【译】Flutter _ 深入理解布局约束
最新发布
2401_83703866的博客
03-24 1103
我一直以来都有整理练习大厂面试题的习惯，有随时跳出舒服圈的准备，也许求职者已经很满意现在的工作，薪酬，觉得习惯而且安逸。不过如果公司突然倒闭，或者部门被裁减，还能找到这样或者更好的工作吗？我建议各位，多刷刷面试题，知道最新的技术，每三个月可以去面试一两家公司，因为你已经有不错的工作了，所以可以带着轻松的心态去面试，同时也可以增加面试的经验。我可以将最近整理的一线互联网公司面试真题+解析分享给大家，大概花了三个月的时间整理2246页，帮助大家学习进步。
Flutter控件--Row、Column和Stack
小天空的博客
06-17 2289
flutter控件练习demo地址：github
2、Flutter Widgets 之 Row和Column
wywinstonwy的专栏
12-23 4575
在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴），简单来说，MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴，比如Row的主轴是水平方向，交叉轴是垂直方向，而Column的主轴是垂直方向，交叉轴是水平方向。 Row和Column是多子控件的容器类控件，Row控件水平布局，Column控件垂直布局。 主轴对齐方式 Ro
Flutter——最详细的Column（纵向）布局使用
人生在世
11-30 7640
Column简介 排布方向为竖向（纵向）的布局，可容纳多个组件； 属性 作用 mainAxisAlignment 主轴对齐 crossAxisAlignment 横轴对齐 textBaseline 文字基线 textDirection 竖直方向 mainAxisSize 主轴尺寸 children 子布局单位：（数组） 创建一个纵向排列布局 class RowWidget extends StatelessWidget { @override Widg
Flutter TabBarView 子组件自动填充高度
05-27
要让Flutter TabBarView子组件自动填充高度，可以使用Expanded组件将子组件包裹起来并放置在ListView或Column中。例如： ```dart TabBarView( children: [ ListView( children: [ Expanded( child: Container...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值