Flutter 基础 - 010 - Flex 弹性布局

Flutter 中的 Flex 弹性布局是一种强大的工具，可以帮助您创建响应式、美观的 UI。它允许您指定小部件如何在主轴和交叉轴上排列，并控制它们的大小。

要使用 Flex 弹性布局，您需要创建一个 Flex 组件，并将您要排列的小部件作为其子组件。Flex 组件有几个属性可以控制子组件的排列方式，包括 direction、mainAxisSize 和 crossAxisAlignment。

• direction 属性指定主轴的方向。它可以是 Axis.horizontal 或 Axis.vertical。
• mainAxisSize 属性指定主轴的长度。它可以是 MainAxisSize.min、MainAxisSize.max 或 MainAxisSize.stretch。
• crossAxisAlignment 属性指定交叉轴的对齐方式。它可以是 CrossAxisAlignment.start、CrossAxisAlignment.center、CrossAxisAlignment.end 或 CrossAxisAlignment.stretch。

Flex 组件还可以包含 Expanded 组件。Expanded 组件允许您指定子组件在主轴上占用的空间量。Expanded 组件有几个属性可以控制其大小，包括 flex 和 fit。

• flex 属性指定子组件相对于其他子组件的相对大小。
• fit 属性指定子组件在主轴上是否应该拉伸以填充可用空间。它可以是 FlexFit.tight 或 FlexFit.loose。

Flex 和 Expanded 组件可以组合使用以创建复杂的布局。例如，您可以使用 Flex 组件在水平方向上排列小部件，然后使用 Expanded 组件在垂直方向上按比例分配小部件的高度。

以下是一个示例，演示如何使用 Flex 和 Expanded 组件创建简单的行布局：

Column(
  children: [
    Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ],
);

此代码将创建一个水平排列的三列布局。红色、绿色和蓝色列的宽度相等，并且将填满可用空间。

Flex 和 Expanded 组件是创建响应式、美观的 UI 的强大工具。通过了解如何使用这些组件，您可以创建适合任何屏幕尺寸和设备的布局。