Flutter 弹性布局

弹性布局 (Flex)

弹性布局允许子组件按照一定比例来分配父容器空间, 主要通过Flex和Expanded来配合实现。

Flex

定义, 相比Row、Column多了两个参数, 其实他们都是继承于Flex;

const Flex({
    // ...
    required this.direction, // 布局的方向: 水平、垂直方向
    // ...
    this.clipBehavior = Clip.none,
    // ...
  })

Expanded

Expanded 只能作为 Flex 的子组件，它可以按比例“扩伸”Flex子组件所占用的空间。因为 Row 和 Column 都继承自 Flex，所以 Expanded 也可以作为它们的孩子。

const Expanded({
    Key? key,
    int flex = 1,
    required Widget child,
})

参数:
flex参数为弹性系数，如果为 0 或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其 flex 的比例来分割主轴的全部剩余空间。

Spacer

占用指定比例的剩余空间, 是Expanded的一个包装类