一架梯子,一头程序猿,仰望星空!

Flutter布局教程


Flutter 布局的核心机制是 widgets。在 Flutter 中,几乎所有东西都是 widget —— 甚至布局模型都是 widgets。你在 Flutter 应用程序中看到的图像,图标和文本都是 widgets。此外不能直接看到的也是 widgets,例如用来排列、限制和对齐可见 widgets 的行、列和网格。

你可以通过组合 widgets 来构建更复杂的 widgets 来创建布局。比如,下面截图上有 3 个图标,每个图标下面都有一个标签:

1. Widget树

传递给runApp函数的第一个widget就是树根,其他widget作为根widget的子widget,这样就构成了一个棵widget树。 在flutter app中ui界面布局都是由widget树组成。

提示:widget树,类似html中的dom树。

下图是上面UI对应的一颗widget树,树根是Container (flutter自带的一种矩形widget组件), 下图所有的圆形图形都代表一种widget, 图形中的名字代表widget的类型。

下面解读下这棵widget树,从树根开始:

  • 树根是Container (树根会铺满整个屏幕,Container就是一种矩形的组件)
  • 树根Container包含一个Row子节点(Row是一种行布局的widget组件)。
  • Row节点包含三个Column节点(Column是一种列布局的widget组件),意思就是一行三列的布局。
  • 每一个Column节点,包含两个子节点icon和Container (icon代表一个图标widget)。
  • Container包含一个Text组件(Text widget用来展示文本)

通过这棵widget树,就可以绘制出,前面给出的UI布局。

2. 常用布局widget

我们一般组合各种复杂的布局,需要一些专门用于布局的组件,例如:网格布局、列表布局、行布局、列布局等等。

下面widget常用的布局widget:

  • Container - 是一个矩形的布局组件,可以设置矩形的背景,边框,或阴影,内边距,外边距等等。
  • Row - 水平布局,也可以叫行布局,默认将子widget按水平方向排列。
  • Column - 垂直布局,默认将子widget按垂直方向排列。
  • GridView - 将 widget 展示为一个可滚动的网格
  • ListView - 将 widget 展示为一个可滚动的列表。
  • Stack - 将 widget 覆盖在另一个的上面。

Material 常用布局widget:

  • Card - 将相关信息整理到一个有圆角和阴影的盒子中。
  • ListTile -将最多三行的文本、可选的导语以及后面的图标组织在一行中。

通过这些布局组件,组合其他基础widget组件,就可以组合出各种复杂的UI界面。

后续的教程会单独介绍这些组件。