Compose 组件渲染流程
概述
在传统的view系统中,组件渲染可分为三步:测量,布局与绘制,Compose也遵循这样的分层设计,组件渲染流程分为:组合,布局,绘制。
当然也存在特例,比如LazyColumn、LazyRow、BoxWithConstraints等组件的子项合成可以延迟到这类组件的布局阶段进行
组合
组合阶段的主要目标是生成并维护LayoutNode视图树,重组过程可以自动维护 LayoutNode视图树,使其永远保持在最新的视图状态。
布局
- 布局阶段用来对视图树中每个LayoutNode进行宽高尺寸测量并完成位置摆放。
- Compose从框架层限制了每个LayoutNode测量次数,这样可以高效处理深度比较大的视图树(极端情况是退化成链表的树形结构)。
- 有些需求场景仍然需要多次测量LayoutNode, Compose为我们提供了固有特性测量与SubcomposeLayout作为解决方案。
LayoutModifier
layout修饰符是用来修饰LayoutNode的宽高与原有内容在新宽高下摆放位置的。
//源码
fun Modifier.layout(
measure: MeasureScope.(Measurable, Constraints) -> MeasureResult
) = this then LayoutModifierElement(measure)
//使用
Modifier.layout {
measurable, constraints ->
...
}
measurable表示被修饰LayoutNode的测量句柄,通过内部measure方法完成LayoutNode测量。而constraints表示来自父LayoutNode的布局约束。
如果想设定Text顶部到文本基线的高度,示例如下:
fun Modifier.firstBaselineToTop(firstBaselineToTop: Dp) = this.then (
Modifier.layout {
measurable, constraints ->
//采用布局约束对该组件完成测量,测量结果保存在Placeable实例中
val placeable: Placeable = measurable.measure(constraints)
//保证该组件是存在内容基线的
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
//获取基线的高度
val firstBaseline = placeable[FirstBaseline]
//应摆放的顶部高度为所设置的顶部到基线的高度减去实际组件内容顶部到基线的高度
val placeableY = firstBaselineToTop.roundToPx(