本文链接：https://blog.csdn.net/u013032788/article/details/137072509

Flex 组件具体用法

Flex 组件可让您使用 flexbox 布局来排列子组件。您可以使用 flexDirection、justifyContent、alignItems 和 flex 属性来控制 flexbox 布局。

基本用法

以下是一个使用 Flex 组件将三个文本组件水平排列的示例：

Flex(
  flexDirection: FlexDirection.row,
  justifyContent: JustifyContent.center,
  alignItems: Alignment.center,
  children: [
    Text("Hello, world!"),
    Text("This is another text component."),
    Text("And this is the third text component."),
  ],
)

此代码将创建一个水平 flexbox 布局，其中包含三个文本组件。三个文本组件将在 flexbox 布局的中心对齐。

更多用法

1. 使用 flexDirection 属性控制主轴方向

您可以使用 flexDirection 属性来控制 flexbox 布局的主轴方向。以下是一些常用的 flexDirection 属性值：

FlexDirection.row：主轴方向为水平方向。
FlexDirection.column：主轴方向为垂直方向。

以下是一个使用 flexDirection 属性将 flexbox 布局的主轴方向设置为垂直方向的示例：

Flex(
  flexDirection: FlexDirection.column,
  justifyContent: JustifyContent.center,
  alignItems: Alignment.center,
  children: [
    Text("Hello, world!"),
    Text("This is another text component."),
    Text("And this is the third text component."),
  ],
)

2. 使用 justifyContent 属性控制子组件在主轴方向的对齐方式

您可以使用 justifyContent 属性来控制子组件在主轴方向的对齐方式。以下是一些常用的 justifyContent 属性值：

JustifyContent.start：将子组件在主轴的起始位置开始排列。
JustifyContent.end：将子组件在主轴的末尾位置开始排列。
JustifyContent.center：将子组件在主轴的中心位置开始排列。
JustifyContent.spaceBetween：将子组件均匀分布在主轴上，并在首尾两端留出间距。
JustifyContent.spaceAround：将子组件均匀分布在主轴上，并在子组件之间留出间距。
JustifyContent.spaceEvenly：将子组件均匀分布在主轴上，并在子组件之间以及首尾两端留出相同的间距。

以下是一个使用 justifyContent 属性将三个文本组件在主轴方向上均匀分布的示例：

Flex(
  flexDirection: FlexDirection.row,
  justifyContent: JustifyContent.spaceEvenly,
  alignItems: Alignment.center,
  children: [
    Text("Hello, world!"),
    Text("This is another text component."),
    Text("And this is the third text component."),
  ],
)

3. 使用 alignItems 属性控制子组件在非主轴方向的对齐方式

您可以使用 alignItems 属性来控制子组件在非主轴方向的对齐方式。以下是一些常用的 alignItems 属性值：

Alignment.start：将子组件在非主轴的起始位置开始排列。
Alignment.end：将子组件在非主轴的末尾位置开始排列。
Alignment.center：将子组件在非主轴的中心位置开始排列。
Alignment.stretch：将子组件的高度扩展到容器的高度。

以下是一个使用 alignItems 属性将三个文本组件在非主轴方向上扩展到容器高度的示例：

Flex(
  flexDirection: FlexDirection.column,
  justifyContent: JustifyContent.center,
  alignItems: Alignment.stretch,
  children: [
    Text("Hello, world!"),
    Text("This is another text component."),
    Text("And this is the third text component."),
  ],
)

4. 使用 flex 属性控制子组件的 flex

您可以使用 flex 属性来控制子组件的 flex

Flex(
  flexDirection: FlexDirection.row,
  justifyContent: JustifyContent.center,
  alignItems: Alignment.center,
  children: [
    Text("Hello, world!", flex: 1),
    Text("This is another text component.", flex: 2),
    Text("And this is the third text component.", flex: 3),
  ],
)

此代码将创建一个水平 flexbox 布局，其中包含三个文本组件。第一个文本组件将占据 flexbox 布局的 1/6，第二个文本组件将占据 flexbox 布局的