Flutter Widget 之LimitedBox

一些widget根据父级定义的约束来设置它们的大小，但是ListView，Row或Column等widget很难使其子项的大小保持平衡。

当一个widget没有父级来限制它的大小时，如何给它一个默认的大小呢？

使用LimitedBox widget！

仅当LimitedBox的父级未绑定时，LimitedBox才会为其子级提供默认大小

当窗口widget的父级约束大小时，LimitedBox无效

例如，外部容器已为其子容器设置约束，此时将包装在LimitedBox中不会执行任何操作

Container(
    height: 300,
    widget: 300,
    child: LimitedBox(
        maxHeight: 150,
        maxWidth: 150,
        child: Container(
            color: Colors.green,
        )
    )
)

与滚动方向无限制的ListView一起使用时，LimitedBox的潜力将变得无限

假设你想要一哥通常会匹配父级大小的widget列表—在这样的列表中，也是不可行的

将容器放在ListView中时不会显示任何内容，因为容器在不受约束时，将其大小设置为零

ListView(
    children: [
        for (var i = 0; i < 10; i++) {
            Container(
                color: randomColor(),
            ),
        }
    ]
)

这一次，将容器包装在LimitedBox中，会在每个容器上强加Limited的最高高度

ListView(
    children: [
        for (var i = 0; i < 10; i++) {
            LimitedBox(
                maxHeight: 200,
                child: Container(
                    color: randomColor(),
                ),
            ),
        }

LimitedBox为其自己在无限制环境中提供了自然的纬度。

如果想了解有关AspectRatio的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址