【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 {@overrideWidget 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 {@overrideWidget 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 提供了强大的支持。