在 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 控制哪个页面可见,此外还可以控制页面内容的偏移量。