第 1-12 课：基础布局详解（Row、Column、Flex、Expanded、Stack、IndexedStack）

这节课将继续讲解 Flutter 的常用基础布局组件，前面已经给大家介绍了几种常用的布局 Widget 及其特点与用法。这节课要讲解的布局 Widget 看起来很多，不过其中几个都具有相似的特点，用法类似。如 Row 和 Column 用于线性布局（横向或者纵向排列子元素）；Flex 和 Expanded 用于弹性布局（按照比例分配子元素所占大小空间）；Stack 和 IndexedStack 用于层叠布局（也可以叫帧布局，也就是布局里的元素有前后层级堆叠在一起的）。那么这节课就带领大家对 Flutter 的基础布局中的这几个 Widget 进行详细分析讲解，并结合案例进行详细的用法讲解。本文将主要介绍：

• Row 布局 Widget 用法详解
• Column 布局 Widget 用法详解
• Flex 布局 Widget 用法详解
• Expanded 布局 Widget 用法详解
• Stack 布局 Widget 用法详解
• IndexedStack 布局 Widget 用法详解

1 Row 布局 Widget 用法详解

Row 布局组件类似于 Android 中的 LinearLayout 线性布局，它用来做水平横向布局使用，里面的 children 子元素按照水平方向进行排列。

Row 的继承关系如下：

Row -> Flex -> MultiChildRenderObjectWidget -> RenderObjectWidget …

可以看出 Row 是 F