【Flutter 问题系列第 28 篇】Container 嵌套 Container 时，明明指定了子组件的宽高，为什么不起作用 ？_flutter container 包裹container

这是【Flutter 问题系列第 28 篇】，如果觉得有用的话，欢迎关注专栏。

一：问题描述

想要实现一个大 Container 嵌套一个小 Container 的布局，如下图所示

这样的布局实现起来想着也很简单，代码如下所示

 Container(
   width: 200,
   height: 200,
   color: Colors.red,
   child: Container(
     width: 50,
     height: 50,
     color: Colors.blue,
   ),
),
1
2
3
4
5
6
7
8
9
10

但运行后的实际效果却是这样的

明明已经指定了子组件的宽高，为什么没有效果呢？而且从实际的效果图来看，子组件完全充满了父组件，这又是什么原因呢？

二：问题分析

这是因为 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 进行布局时，很多问题都会迎刃而解了。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

---

结束语

Google 的 Flutter 越来越火，截止 2021年7月11日 GitHub 标星已达 124K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。