一:问题描述
想要实现一个大 Container 嵌套一个小 Container 的布局,如下图所示
这样的布局实现起来想着也很简单,代码如下所示
````js
Container(
width: 200,
height: 200,
color: Colors.red,
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),
),
``````
但运行后的实际效果却是这样的
明明已经指定了子组件的宽高,为什么没有效果呢?而且从实际的效果图来看,子组件完全充满了父组件,这又是什么原因呢?
二:问题分析
这是因为 Container 的宽高计算机制造成的,因为 Container 在计算宽高的时候,不仅需要考虑 width 和 height 属性,还要遵循父组件的尺寸约束,即 BoxConstraints 。
BoxConstraints 有四个属性,分别为 minWidth、maxWidth、minHeight、maxHeight。默认情况下,minWidth 和 maxWidth 的默认值为屏幕宽度,minHeight 和 maxHeight 的默认值为屏幕高度。
父组件通过设置 BoxConstraints 来约束子组件的最小和最大尺寸,如果子组件的 width 和 height 不在父组件 Constraints 限制的范围内,则子组件的尺寸会被强制设置为符合父组件 Constraints 约束的值。
给子组件设置的宽高都为 50 ,而父组件约束的最小宽高分别为屏幕宽度和高度,子组件的宽高不满足父组件的约束,所以当我们给子组件设置了宽高时,并没有起到作用,所以子组件会充满父组件。
三:如何解决
解决的方式有多种,其中最简单的就是在子组件外层套 Center 组件,查看 Center 组件的源码可知,被 Center 组件包裹的子组件,该子组件将不再受父组件的尺寸约束。Center 组件又是继承自 Align 组件的,所以用 Align 组件嵌套子组件也是可以的。
另外,你也可以使用布局组件 Row 和 Column ,这两个组件也是受 BoxConstraints 约束的,但 minWidth 和 minHeight 的最小值可以为 0 ,maxWidth 和 maxHeight 分别为屏幕宽度和无穷大。所以子组件设置的宽度满足这个约束,子组件的 width 和 height 自然就生效了。
这个问题相信很多人都会碰到,最重要的是需要知道 Container 的宽高计算机制,了解了这个,再使用 Container 进行布局时,很多问题都会迎刃而解了。
————————————————
版权声明:本文为CSDN博主「Allen Su」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_42351033/article/details/118653585