Flutter 布局组件

在 Flutter 中，几乎所有东西都是一个 widget。无论是看得到的图像、图标和文件等，还是看不到的行（Row）、列（Column以及用来排列、约束和对齐这些可见 widget 的网格（Grid）等，这些全部都是 widget。我们可以通过 widget 的嵌套和组合来组成更加复杂的 widget，最终构成整个应用程序页面。这篇文章介绍了 Flutter 中常用的布局组件。

持续更新~~~~🔥

Container

Container 结合了其他的诸如绘制、定位、尺寸等组件，更便于使用。Container 包裹单个子组件，支持设置 padding、margin、边框、背景、前景、最大最小宽高约束、矩阵边框、子组件对齐。

查看源码

Padding

Padding 组件可以添加单一子组件，并设置内边距，与 Container.padding 属性提供的功能一样，两者没有什么差别，Container 内部就是使用的 Padding 组件。Flutter 中没有单独的 Margin 组件，在 Container 中有 margin 属性，内部由 padding 实现。布局属性：

• 当 child 为空时，会产生一个宽为 left+right，高为 top+bottom 的区域；
• 当 child 不为空时，Padding 会将布局约束传递给 child，根据设置的 padding 属性，缩小 child 的尺寸，然后自身大小等于 child 加上 pading 距离，最后 child 周围创建空白区域。

Align 和 Center

TODO

Row/Column

行（Row）、列（Column）顾名思义就是水平和垂直显示子组件的容器。Row/Column 不能滚动（子组件溢出范围通常被认为是错误），支持滚动使用 ListView。支持通过属性控制子组件在主轴和交叉轴上的的排列方式、顺序。

查看源码

Expanded

Expanded 组件可以使 Row、Column 或者 Flex 组件的子组件在其主轴方向上扩展并填充可用的空间。如果有多个子组件被扩展，它们占据的空间根据 flex 属性进行划分。 Expanded 必须是 Row、Column 或 Flex 的子孙组件，并且两者的路径上只能是 StatelessWidgets 或者 StatefulWidgets（不能是其他类型的组件，例如 RenderObjectWidget）。

查看源码

PageView

PageView 是控制其子组件一页页滚动的组件，类似轮播图效果。每一个子组件的大小都等于当前视口的大小。我们可以使用 PageController 控制哪个页面可见，此外还可以控制页面内容的偏移量。

查看源码