flutter Container嵌套使用给子控件设置大小后不起作用

本文探讨了在Flutter中,当大Container嵌套小Container时,子Container设置的宽高不起作用的问题。问题源于Container的尺寸计算会受到BoxConstraints约束。当子Container的宽高超出父Container的约束时,其尺寸将被强制调整。解决方案包括使用Center、Align组件或Row、Column布局,以避免尺寸约束的影响。理解Container的宽高计算机制对于解决此类布局问题至关重要。
摘要由CSDN通过智能技术生成

一:问题描述

想要实现一个大 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、m

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值