原文链接

MAD 技能：Compose 布局 和 修饰符 的第 2 集

在之前的 MAD 技能文章 中，您了解了开箱即用的 API，即 Jetpack Compose 供给的用于编写精巧 app 的功能。在本文中，咱们将创建一个思想模型，了解这些 API 怎么将数据实际地转化为 UI。

您也能够将本文作为 MAD 技能视频观看：youtu.be/0yK7KoruhSM

由于 Compose 是一个声明式工具箱，咱们在基本层面上知道它将数据转化为 UI。此转化过程中的 三个阶段 是：

1. 组合： 显现什么
2. 布局： 放在哪里
3. 制作： 怎么渲染它

这三个阶段是逐一履行的：

三个阶段

三个阶段

在 组合阶段，Compose 运转时会履行您的可组合函数。它输出代表您的 UI 的树数据结构。此 UI 树由布局节点组成。这些布局节点一起持有完结下一阶段所需的一切信息。

Composition（组合） 阶段履行可组合函数并创建代表您的 UI 的树。

然后，在布局阶段，树中的每个元素丈量其子元素（假如有）并将它们放置在可用的 2D 空间中：

布局阶段，丈量每个布局节点，并将其放置在 UI 树中。

终究，在 制作阶段，树中的每个节点都在屏幕上制作其像素：

制作阶段，在屏幕上制作像素。

组合阶段

让咱们扩大并只重视屏幕的底部，在这儿您能够看到文章的作者、宣布日期和阅览时刻：

在组合阶段，咱们将可组合函数转化为 UI 树。 由于咱们只检查 author 元素，咱们能够扩大咱们的代码和 UI 树的一个子部分：

在这种情况下，咱们代码中的每个可组合函数都映射到 UI 树中的单个布局节点。这是一个十分简略的示例，但您的可组合项能够包括逻辑和控制流，然后在给定不同状态的情况下生成不同的树。

布局阶段

当咱们进入布局阶段时，咱们运用这个 UI 树作为输入。布局节点的集合包括终究决议每个节点在 2D 空间中的巨细和位置所需的 一切信息。

在布局阶段，运用以下 3 步算法遍历树：

1. 丈量子节点： 一个节点会丈量它的子节点，假如有的话。
2. 决议自己的巨细： 基于这些丈量，节点决议自己的巨细。
3. 放置子节点： 每个子节点都相对于节点本身的位置进行放置。

在该阶段结束时，每个布局节点都将分配一个宽度和高度，以及一个应该制作的x、y 坐标。

因而，对于咱们的可组合项，这将按如下方式工作：

1. Row丈量其子项.
2. 首先，丈量 Image。它没有任何子项，因而它决议自己的巨细并将其陈述回 Row。
3. 其次，丈量 Column。它需要先丈量自己的子项。
4. 第一个 Text 被丈量。它没有任何子项，因而它决议自己的巨细并将其陈述回 Column。
5. 第二个 Text被丈量。它没有任何子项，因而它决议自己的巨细并将其陈述回Column。
6. Column 运用子丈量值来决议自己的巨细。它运用最大子宽度及其子项的高度之和。
7. Column 将其子项放置在相对于本身的位置，将它们垂直放置在互相下方。
8. Row 运用子尺寸来决议自己的尺寸。它运用最大子高度和子宽度的总和。然后它放置它的子项。

这儿的一个要害点是咱们只拜访了每个节点一次。经过UI树的一次遍历，咱们就能够丈量和放置一切节点。这对功能来说是极好的。当树中节点的数量添加时，遍历它所花费的时刻以线性方式添加。相比之下，假如咱们多次拜访每个节点，遍历时刻将呈指数级添加。

制作阶段

已然咱们知道了一切布局节点的巨细和x，y坐标，咱们就能够继续制作阶段了。从上到下再次遍历树，每个节点顺次在屏幕上制作自己。因而，在咱们的比如中，首先Row 将制作它或许具有的任何内容，例如背景色。然后Image将制作自己，然后是 Column，然后是第一个和第二个Text：

修饰符

太棒了！ 咱们已经了解了怎么为咱们的可组合项履行这三个阶段。但咱们抄了些近道儿。

假如咱们回到组合阶段，咱们说过咱们履行代码并构建 UI 树。

但仔细观察代码，咱们能够看到它实际上运用了 modifiers（修饰符） 来改变一些可组合项的外观。在咱们的 UI 树中，咱们能够将这些可视化为布局节点的包装节点：

当咱们链接多个修饰符时，每个修饰符节点包裹链的其余部分和其中的布局节点。 例如，当咱们链接一个 clip 和一个 size 修饰符时，clip 修饰符节点包裹 size 修饰符节点，然后包裹 Image 布局节点。

在布局阶段，咱们用来遍历树的算法坚持不变，但每个修饰符节点也会被拜访。这样，修饰符能够更改其包裹的 修饰符 或 布局节点 的 巨细要求 和 位置。

现在，有趣的是，假如咱们看一下 Image 可组合项的实现，咱们实际上能够看到它本身由包裹单个布局节点的修饰符链组成。类似地，Text 可组合项也是经过包括布局节点的修饰符链实现的。终究，Row 和 Column 的实现只是描述怎么安置其子节点的布局节点：

一路向下都是修饰符！

咱们将在稍后的博文中回到这一点，但现在最好将修饰符视为包裹单个修饰符或布局节点，而布局节点能够布局多个子节点 .

总结

那么，有了这个思想模型，您现在能够更好地了解 Compose 的不同阶段是怎么工作的。

在下一篇文章中，咱们将更深入地讨论布局阶段，并学习推理 布局 和 修饰符 终究怎么影响子元素的丈量和放置。

这篇博文是系列博文的一部分：

第 1 集：Compose 布局和修饰符的基础知识
第 2 集：Compose 的各个阶段
第 3 集：束缚和修饰符顺序
第 4 集：高档布局概念