Flutter 布局组件

编辑于2018年10月17日

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

持续更新~~~~🔥

Container

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

container

查看源码

Padding

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

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

padding

Align 和 Center

TODO

Row/Column

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

row_column

查看源码

Expanded

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

expanded-2

查看源码

PageView

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

page_view

查看源码

希望对您能有帮助,打赏随意