Flutter系列之Flex布局详解

最新推荐文章于 2025-09-07 13:36:30 发布

原创

最新推荐文章于 2025-09-07 13:36:30 发布 · 7.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #跨平台 #dart #flex #Row

本文介绍了Flutter中的Flex布局。Flutter是Google推出的跨平台UI框架，Flex布局在前端、小程序开发中广泛使用。文中讲解了Flex基础、常用设置，如direction、mainAxisAlignment等，还介绍了Row和Column、Expanded和Flexible、Spacer的使用。

PS：想做一件事很容易，真正去做一件事很困难。

同系列文章如下：

Flutter 是 Google 推出的跨平台 UI 框架，可以快速地在 Android 和 IOS 上构建高质量的应用程序，其主要特点是 Flutter 具有快速开发的能力、富有表现力和灵活的 Ui 以及良好的原生性能，本篇文章主要介绍 Flutter 中的 Flex 布局，如下：

Flex基础
Flex常用设置
Row和Column
Expanded和Flexible
Space
总结

Flex基础

Flex 布局方式已经广泛使用在前端、小程序开发之中，如果之前已经学习过 Flex 布局，那么在 Flutter 中也是大同小异的，Flexible Box 示意图如下：

关于这张图的介绍请查看前面这篇文章：

微信小程序之Flex容器详解

Flex Widget 可以设置主轴方向，如果知晓主轴方向，可以直接使用 Row 或者 Column，Flex Widget 不能滚动，如果涉及到滚动可以尝试使用 ListView，Flex Widget 的内容超过其宽度和高度，则显示黄黑相间的警告条纹，以水平方向为例出现的报错信息如下：

I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (14749): The following assertion was thrown during layout:
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.

报错显示如下：

Flex常用设置

Flex 常用属性如下：

direction
mainAxisAlignment
mainAxisSize
crossAxisAlignment
verticalDirection
textBaseline

1. direction

设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。

2. mainAxisAlignment：

设置子 Widget 沿着主轴方向的排列方式，默认 MainAxisAlignment.start，可设置的方式如下：

MainAxisAlignment.start：左对齐，默认值;
MainAxisAlignment.end：右对齐;
MainAxisAlignment.center：居中对齐;
MainAxisAlignment.spaceBetween：两端对齐;
MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
MainAxisAlignment.spaceEvently：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等.

对比效果如下：

mainAxisAlignment

3. mainAxisSize

设置主轴的大小，默认 MainAxisSize.max，可设置的值如下：

MainAxisSize.max：主轴的大小是父容器的大小；
MainAxisSize.min：主轴的大小是其资 Widget 大小之和。

对比效果如下：

mainAxisSize

将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。

4. crossAxisAlignment

设置子 Widget 沿着交叉轴方向的排列方式，默认 CrossAxisAlignment.center，可设置的方式如下：

CrossAxisAlignment.start：与交叉轴的起始位置对齐；
CrossAxisAlignment.end：与交叉轴的结束位置对齐；
CrossAxisAlignment.center：居中对齐；
CrossAxisAlignment.stretch：填充整个交叉轴；
CrossAxisAlignment.baseline：按照第一行文字基线对齐。

对比效果如下：

crossAxisAlignment

5. verticalDirection

设置垂直方向上的子 Widget 的排列顺序，默认为 VerticalDirection.down，设置方式如下：

VerticalDirection.down：start 在顶部，end 在底部；
VerticalDirection.up：start 在底部，end 在顶部。

对比效果如下：

verticalDirection

注意观察交叉轴设置的 CrossAxisAlignment.end，在此基础上垂直方向上的变化。

6. textBaseline

设置文字对齐的基线类型，可设置的值如下：

TextBaseline.alphabetic：与字母基线对齐；
TextBaseline.ideographic：与表意字符基线对齐；

使用时当 crossAxisAlignment 设置为 baseline 时，必须设置 textBaseline 属性的值，使用方式如下：

// textBaseline
class FlexSamplePage extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: Text("Flex Sample"),
        centerTitl