Flutter 尺寸限制类容器组件

Flutter 尺寸限制类容器组件

简述

Flutter中尺寸限制类容器组件包含：Container、ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimiteBox等，这些组件可以约束子组件的尺寸。

Container

ConstrainedBox

对子组件尺寸限制，可以设置最大值、最小值。

ConstrainedBox(
    constraints: const BoxConstraints(
        minWidth: 50,
        minHeight: 50,
        maxHeight: 100,
        maxWidth: 100,
    ),
    child: Container(
        width: 10,
        height: 10,
        color: Colors.red,
    ),
),
const SizedBox(height: 10),
ConstrainedBox(
    constraints: const BoxConstraints(
        minWidth: 50,
        minHeight: 50,
        maxHeight: 100,
        maxWidth: 100,
    ),
    child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
    ),
)

SizedBox

为子组件设置固定的宽高。功能上类似ConstrainedBox组件。

SizedBox(
    width: 50,
    height: 50,
    child: Container(color: Colors.green),
),
const SizedBox(height: 10),
SizedBox.fromSize(
    size: const Size(50, 50),
    child: Container(color: Colors.green),
)

UnconstrainedBox

用于去除父组件的约束，允许子组件按照自己的尺寸绘制。

红色文字部分只会在debug模式下显示，在release模式下只会显示蓝色区域。

SizedBox(
    width: 10,
    height: 10,
    child: UnconstrainedBox(
        child: Container(width: 100, height: 100, color: Colors.blue),
    ),
)

AspectRatio

固定宽高比得组件。

aspectRatio：表示宽高比。可以为分数形式或小数形式。

Container(
    width: 100,
    height: 100,
    alignment: Alignment.center,
    color: Colors.red,
    child: AspectRatio(
        aspectRatio: 2 / 1,
        child: Container(color: Colors.blue),
    ),
)

FractionallySizedBox

相对尺寸组件，控制子元素占父组件的百分比空间。

Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(color: Colors.red),
    ),
)