面试题：Flutter中Flex布局的原理及常见属性应用

Question

请详细阐述Flex布局在Flutter中的工作原理，包括主轴和交叉轴的概念。并举例说明如何使用`flex`属性来分配子组件在主轴上的空间。同时，解释`direction`属性不同取值（`Axis.horizontal` 和 `Axis.vertical`）对布局的影响。

Answer 1

Flex布局在Flutter中的工作原理

1. 整体概述：Flex布局是一种灵活的盒模型布局方式，它允许开发者在一个方向（主轴）上排列子组件，并能灵活地分配空间。在Flutter中，Row和Column组件都是基于Flex布局实现的。
2. 主轴和交叉轴：
   • 主轴：是子组件排列的主要方向。Flex布局沿着主轴方向分配子组件的空间。例如在Row中，主轴是水平方向；在Column中，主轴是垂直方向。
   • 交叉轴：与主轴垂直的方向。子组件在交叉轴方向上的对齐方式可以通过mainAxisAlignment（主轴对齐方式）和crossAxisAlignment（交叉轴对齐方式）等属性来控制。

使用flex属性分配子组件在主轴上的空间

flex属性用于指定子组件在主轴上所占据的空间比例。例如，有一个Row包含两个子组件，我们希望一个子组件占据主轴空间的三分之一，另一个占据三分之二，可以这样实现：

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 50,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 50,
      ),
    ),
  ],
)

在上述代码中，第一个Expanded子组件的flex值为1，第二个为2，所以它们在主轴（水平方向）上的空间分配比例为1:2。

direction属性不同取值对布局的影响

1. Axis.horizontal：当direction取值为Axis.horizontal时，通常用于Row组件。此时主轴为水平方向，子组件会从左到右依次排列（在从左到右阅读习惯的语言环境下）。例如：

Row(
  direction: Axis.horizontal,
  children: [
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.yellow,
      width: 100,
      height: 100,
    ),
  ],
)

两个Container会水平排列。 2. Axis.vertical：当direction取值为Axis.vertical时，通常用于Column组件。此时主轴为垂直方向，子组件会从上到下依次排列。例如：

Column(
  direction: Axis.vertical,
  children: [
    Container(
      color: Colors.purple,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.orange,
      width: 100,
      height: 100,
    ),
  ],
)

两个Container会垂直排列。