多个组件的容器

Column

• Column 在垂直方向排列其子组件

Column(
      mainAxisAlignment: MainAxisAlignment.center, // 主轴上的对齐方式：居中对齐
      mainAxisSize: MainAxisSize.max, // 主轴尺寸：尽可能占据可用空间
      crossAxisAlignment: CrossAxisAlignment.start, // 交叉轴上的对齐方式：顶部对齐
      children: [],
    );

Flex

Flex(
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(
        height: 100.0,
        color: Colors.red,
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        height: 100.0,
        color: Colors.green,
      ),
    ),
    Flexible(
      flex: 3,
      child: Container(
        height: 100.0,
        color: Colors.blue,
      ),
    ),
  ],
);

• 可以让子组件根据设置的比例来占据可用空间

Flow

Flow(
  delegate: MyFlowDelegate(),
  children: <Widget>[
    Container(
      width: 80,
      height: 80,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
  ],
);

• 可以根据自己的需求来布局子组件

ListView

• ListView在后台进行了大量优化，只绘制屏幕上当前的对象，无法配合RepaintBoundary实现长截图

ListView(
      scrollDirection: Axis.vertical, // 滚动方向：垂直方向
      padding: const EdgeInsets.all(4.0), // 内边距
      shrinkWrap: true, // 根据子组件尺寸调整自身尺寸
      children: [],
    );

Row

• Row 在水平方向排列其子组件

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [],
)

Stack

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
);

• 绝对定位，可以将子组件堆叠在一起

Wrap

Wrap(
  spacing: 8.0,
  runSpacing: 8.0,
  children: <Widget>[
    Chip(
      label: Text('Tag 1'),
      backgroundColor: Colors.red,
    ),
    Chip(
      label: Text('Tag 2'),
      backgroundColor: Colors.green,
    )
  ],
);

• 可以让子组件根据可用空间自动换行