Compose 的阶段

118 阅读1分钟

From data to UI: Compose phases - MAD Skills

了解 Jetpack Compose 如何将数据转换为界面。

1. Transforming Data into UI

image.png

Compose 将数据转换为 UI。这个过程包含三个阶段:

  • Composition(what to show)

  • Layout(where to place it)

  • Drawing(how to render it)

Composition(what to show)

image.png

Layout(where to place it)

image.png

Drawing(how to render it)

image.png

2. A closer look at the phases

Composition(what to show)

image.png

Layout(where to place it)

image.png

Each node is visited only once。

只访问了每个节点一次。

image.png

image.png

image.png

Drawing(how to render it)

image.png

3. Modifiers

Composition

image.png

Modifier 生成包装节点包装包装节点或者布局节点

Layout

image.png

Drawing

image.png

4. It's modifiers all the way down

image.png

5. Summary

  • Each node is visited only once。

  • Modifiers wrap a single modifier or layout node。