【Flutter】页面布局：弹性布局（Flex）

在 Flutter 开发中，布局是非常重要的部分。布局系统允许开发者控制和管理界面上的组件如何排列和展示。弹性布局（Flex）是其中一个非常强大且常用的布局组件，它能够在水平方向或垂直方向上灵活调整子组件的空间分配比例。Row 和 Column 是 Flex 的特化实现，用于处理水平和垂直方向的布局。而 Flex 则更加通用，允许在多种场景下灵活配置。

本文将详细介绍 Flex 的使用场景、工作原理以及一些常见的使用方法，并通过实例展示如何使用弹性布局来构建灵活的 Flutter 界面。

什么是弹性布局？

在 Flutter 中，弹性布局（Flex）是一种容器类的布局组件，它允许将子组件按一定比例分配空间。与 Row 和 Column 类似，Flex 也能让子组件在水平或垂直方向上排列，不同的是，Flex 允许更灵活地设置每个子组件的空间占比。

`Flex` 的两个重要属性：

direction: 决定 Flex 布局的主轴方向，即子组件是水平排列还是垂直排列。它接受 Axis.horizontal 和 Axis.vertical 两个值，分别表示水平和垂直方向。
children: 一个 Widget 列表，表示 Flex 容器中的子组件。

Flex 的子组件通常会嵌套 Expanded 或 Flexible 来表示各个子组件在主轴方向上所占的空间比例。

`Flex` 的基本使用

Flex 允许开发者自由地决定组件的排列方向，并对子组件的布局进行灵活控制。下面通过一个简单的示例演示如何使用 Flex 实现弹性布局。

基本示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flex 示例')),
        body: Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
                height: 100,
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
                height: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，Flex 容器的主轴方向为 Axis.horizontal，表示水平布局。Expanded 被用来控制子组件的空间比例。第一个 Container 组件的 flex 值为 2，表示它将占用 2 份空间，而第二个 Container 的 flex 值为 1，占用 1 份空间。因此，红色的 Container 宽度是绿色的两倍。

`Flex` 的核心属性

`direction`

direction 决定 Flex 的主轴方向，它是一个枚举类型 Axis，可以取以下两个值：

Axis.horizontal: 水平方向排列子组件，类似于 Row。
Axis.vertical: 垂直方向排列子组件，类似于 Column。

`mainAxisAlignment`

控制子组件在主轴方向的排列方式。与 Row 和 Column 中的 mainAxisAlignment 属性相同，Flex 提供了一些常用的对齐方式：

MainAxisAlignment.start: 从主轴起始位置开始排列（默认）。
MainAxisAlignment.end: 从主轴末尾开始排列。
MainAxisAlignment.center: 子组件在主轴上居中排列。
MainAxisAlignment.spaceBetween: 子组件在主轴上平均分布，首尾组件紧贴两端。
MainAxisAlignment.spaceAround: 子组件之间的间距相同，两端的间距是中间间距的一半。
MainAxisAlignment.spaceEvenly: 子组件之间的间距均等。

`crossAxisAlignment`

控制子组件在交叉轴方向的对齐方式。常见的对齐方式包括：

CrossAxisAlignment.start: 子组件在交叉轴起始位置对齐。
CrossAxisAlignment.end: 子组件在交叉轴结束位置对齐。
CrossAxisAlignment.center: 子组件在交叉轴上居中对齐（默认）。
CrossAxisAlignment.stretch: 拉伸子组件以占满交叉轴。

`mainAxisSize`

控制 Flex 在主轴方向的尺寸大小。它有两个取值：

MainAxisSize.max: 占满主轴上的所有可用空间（默认）。
MainAxisSize.min: 根据子组件的尺寸调整布局，只占据最小空间。

使用 `Expanded` 和 `Flexible`

在 Flex 布局中，Expanded 和 Flexible 是两个常用的子组件，它们允许开发者灵活控制子组件在主轴方向上的空间分配。

`Expanded`

Expanded 组件用于让子组件在 Flex 布局中占据尽可能多的空间，并且可以通过 flex 属性来控制占用比例。flex 属性的默认值是 1，表示等分空间。

Expanded(
  flex: 2,
  child: Container(
    color: Colors.blue,
  ),
),
Expanded(
  flex: 1,
  child: Container(
    color: Colors.red,
  ),
),

上面的代码中，第一个 Expanded 组件的 flex 值为 2，第二个的 flex 值为 1，表示第一个 Container 将占据两倍于第二个 Container 的空间。

`Flexible`

Flexible 与 Expanded 类似，但它允许子组件在主轴方向上有灵活的尺寸。Flexible 组件不会强制子组件填满可用空间，而是允许它根据自身内容调整大小。通过 fit 属性，Flexible 组件可以指定是尽可能填满空间还是根据内容包裹大小：

FlexFit.tight: 子组件占满所有剩余空间（类似 Expanded）。
FlexFit.loose: 子组件可以根据自身大小调整，剩余空间不强制占满。

Flexible(
  fit: FlexFit.loose,
  child: Container(
    color: Colors.green,
  ),
),

`Flex` 的复杂布局实例

通过 Flex，可以轻松实现复杂的界面布局。下面是一个较为复杂的示例，展示如何使用 Flex、Expanded 和 Flexible 来创建自适应布局。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('复杂 Flex 布局示例')),
        body: Column(
          children: <Widget>[
            // 第一行，两个等分的子组件
            Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.red,
                    height: 100,
                    child: Center(child: Text('左边', style: TextStyle(color: Colors.white))),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    height: 100,
                    child: Center(child: Text('右边', style: TextStyle(color: Colors.white))),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20), // 空间分隔
            // 第二行，三等分的子组件
            Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.green,
                    height: 100,
                    child: Center(child: Text('左边', style: TextStyle(color: Colors.white))),
                  ),
                ),
                Expanded(
                  flex: 2, // 占用两倍空间
                  child: Container(
                    color: Colors.orange,
                    height: 100,
                    child: Center(child: Text('中间', style: TextStyle(color: Colors.white))),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.purple,
                    height: 100,
                    child: Center(child: Text('右边', style: TextStyle(color: Colors.white))),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20), // 空间分隔
            // 第三行，使用 Flexible 创建灵活布局
            Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    color: Colors.teal,
                    height: 100,
                    child: Center(child: Text

('左边', style: TextStyle(color: Colors.white))),
                  ),
                ),
                Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    color: Colors.pink,
                    height: 100,
                    child: Center(child: Text('右边', style: TextStyle(color: Colors.white))),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

总结

Flex 是 Flutter 中非常灵活和强大的布局组件，它允许开发者通过设置 direction、mainAxisAlignment 和 crossAxisAlignment 等属性，轻松实现复杂的布局。同时，结合 Expanded 和 Flexible，可以控制子组件在主轴方向上的空间分配和布局方式。

掌握 Flex 及其相关属性和组件的使用，是构建响应式 Flutter 界面的关键。在实践中，开发者会经常使用 Row、Column 和 Flex 来创建布局结构，这些组件为构建灵活的 UI 提供了强大的支持。