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