Flutter系列之Flex布局详解

最新推荐文章于 2025-03-10 20:13:04 发布

弯弯的小溪

最新推荐文章于 2025-03-10 20:13:04 发布

阅读量433

点赞数

文章标签： flutter android

原文链接：https://blog.youkuaiyun.com/jzman/article/details/111829520

版权

本文深入探讨Flutter中的Flex布局，包括Flex基础、常用设置、Row和Column的使用，以及Expanded和Flexible的空间管理和Space的布局应用。通过实例解析，帮助开发者理解如何在Flutter中实现灵活的界面布局，并解决因内容溢出导致的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同系列文章如下：

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.

报错显示如下：