原文链接
MAD 技能:Compose 布局 和 修饰符 的第 2 集
在之前的 MAD 技能文章 中,您了解了开箱即用的 API,即 Jetpack Compose 供给的用于编写精巧 app 的功能。在本文中,咱们将创建一个思想模型,了解这些 API 怎么将数据实际地转化为 UI。
您也能够将本文作为 MAD 技能视频观看:youtu.be/0yK7KoruhSM
由于 Compose 是一个声明式工具箱,咱们在基本层面上知道它将数据转化为 UI。此转化过程中的 三个阶段 是:
- 组合: 显现什么
- 布局: 放在哪里
- 制作: 怎么渲染它
这三个阶段是逐一履行的:
三个阶段
三个阶段
在 组合阶段,Compose 运转时会履行您的可组合函数。它输出代表您的 UI 的树数据结构。此 UI 树由布局节点组成。这些布局节点一起持有完结下一阶段所需的一切信息。
Composition(组合) 阶段履行可组合函数并创建代表您的 UI 的树。
然后,在布局阶段,树中的每个元素丈量其子元素(假如有)并将它们放置在可用的 2D 空间中:
布局阶段,丈量每个布局节点,并将其放置在 UI 树中。
终究,在 制作阶段,树中的每个节点都在屏幕上制作其像素:
制作阶段,在屏幕上制作像素。
组合阶段
让咱们扩大并只重视屏幕的底部,在这儿您能够看到文章的作者、宣布日期和阅览时刻:
在组合阶段,咱们将可组合函数转化为 UI 树。 由于咱们只检查 author 元素,咱们能够扩大咱们的代码和 UI 树的一个子部分:
在这种情况下,咱们代码中的每个可组合函数都映射到 UI 树中的单个布局节点。这是一个十分简略的示例,但您的可组合项能够包括逻辑和控制流,然后在给定不同状态的情况下生成不同的树。
布局阶段
当咱们进入布局阶段时,咱们运用这个 UI 树作为输入。布局节点的集合包括终究决议每个节点在 2D 空间中的巨细和位置所需的 一切信息。
在布局阶段,运用以下 3 步算法遍历树:
- 丈量子节点: 一个节点会丈量它的子节点,假如有的话。
- 决议自己的巨细: 基于这些丈量,节点决议自己的巨细。
- 放置子节点: 每个子节点都相对于节点本身的位置进行放置。
在该阶段结束时,每个布局节点都将分配一个宽度和高度,以及一个应该制作的x、y 坐标。
因而,对于咱们的可组合项,这将按如下方式工作:
-
Row
丈量其子项. - 首先,丈量
Image
。它没有任何子项,因而它决议自己的巨细并将其陈述回Row
。 - 其次,丈量
Column
。它需要先丈量自己的子项。 - 第一个
Text
被丈量。它没有任何子项,因而它决议自己的巨细并将其陈述回Column
。 - 第二个
Text
被丈量。它没有任何子项,因而它决议自己的巨细并将其陈述回Column
。 -
Column
运用子丈量值来决议自己的巨细。它运用最大子宽度及其子项的高度之和。 -
Column
将其子项放置在相对于本身的位置,将它们垂直放置在互相下方。 -
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 集:高档布局概念