flutter 页面布局 SizedBox ConstrainedBox LimitedBox AspectRatio FractionallySizedBox

 

SizedBox 使用说明

/**
 * SizedBox 是一个简单的盒子，可以具有指定的宽度和高度。
 *
 * - width：控制宽度。
 * - height：控制高度。
 * - child：盒子里的子组件。
 */

SizedBox(
  width: 200.0,
  height: 200.0,
  child: Container(
    color: Colors.red,
    width: 100.0,
    height: 300.0,
  ),
)

ConstrainedBox 使用说明

/**
 * ConstrainedBox 允许你给子组件设置最大和最小的宽度和高度。
 */

ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 100.0,
    minHeight: 100.0,
    maxWidth: 150.0,
    maxHeight: 150.0,
  ),
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.red,
  ),
)

LimitedBox 使用说明

/**
 * LimitedBox 允许你设置子组件的最大宽度和高度。
 */

LimitedBox(
  maxWidth: 150.0,
  child: Container(
    color: Colors.blue,
    width: 250.0,
  ),
)

AspectRatio 使用说明

/**
 * AspectRatio 允许你按照指定的宽高比调整子组件的大小。
 */

Container(
  height: 200.0,
  child: AspectRatio(
    aspectRatio: 1.5,
    child: Container(
      color: Colors.red,
    ),
  ),
)

FractionallySizedBox 使用说明

/**
 * FractionallySizedBox 允许你按照百分比设置子组件的宽度和高度。
 */

Container(
  color: Colors.blue,
  height: 150.0,
  width: 150.0,
  padding: const EdgeInsets.all(10.0),
  child: FractionallySizedBox(
    alignment: Alignment.topLeft,
    widthFactor: 1.5,
    heightFactor: 0.5,
    child: Container(
      color: Colors.red,
    ),
  ),
)