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() - firstBaseline
        //从组件占有的高度为应摆放的顶部高度加上实际内部的高度
        val height = placeable.height + placeableY
        //仅是高度发生了改变
        layout(placeable.width, height) {
            ...
        }
    }
)

LayoutComposable

LayoutModifier可以类比于定制单元View，如果想在Compose中类似定制"ViewGroup"，就需要使用LayoutComposable了。

源码定义如下：

package androidx.compose.ui.layout

@Suppress("ComposableLambdaParameterPosition")
@UiComposable
@Composable inline fun Layout(
    content: @Composable @UiComposable () -> Unit,
    modifier: Modifier = Modifier,
    measurePolicy: MeasurePolicy
) {...}

• Modifier表示是由外部传入的修饰符，不难理解。
• content就是我们声明的子组件信息。
• measurePolicy表示测量策略，默认场景下只实现measure即可，如果还想实现固有特性测量，还需要重写Intrinsic系列方法。

如果想自定义一个 Column，示例如下：

@Composable
fun MyOwnColumn(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Layout(modifier = modifier, content = content) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            //测量每个子组件
            measurable.measure(constraints)
        }
        var positionY = 0
        //布局
        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = positionY)
                positionY += placeable.height
            }
        }
    }
}

固有特性测量Intrinsic

固有特性测量为我们提供了预先测量所有子组件来确定自身constraints（布局约束）的能力，并在正式测量阶段对子组件的测量产生影响。

使用内置组件的固有特性测量

目前许多内置组件已经实现了固有特性测量，绝大多数内置组件都是用LayoutComposable实现的，LayoutComposable中需要传入一个measurePolicy，默认只需实现measure，但如果要实现固有特性测量，就需要额外重写Intrinsic系列方法。

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {   //**这里使用了固有特性测量**
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1,
            fontSize = 16.sp    //字体大小不一样,高度不一样
        )

        Divider(color = Color.Black, modifier = Modifier.fillMaxHeight().width(1.dp))  //高度为父布局最大高度
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2,
            fontSize = 30.sp    //字体大小不一样,高度不一样
        )
    }
}

//使用
Surface(border = BorderStroke(1.dp, Color.Blue) ) {
    TwoTexts(text1 = "Hi,kotlin", text2 = "Hello,World")
}

此时仅使用Modifier.height(IntrinsicSize. Min)为高度设置了固有特性测量

自定义固有特性测量

要自定义固有特性测量，需要实现MeasurePolicy接口，实现相应的 minIntrinsicXX 或者 maxIntrinsicXX 方法即可。

SubcomposeLayout

SubcomposeLayout允许子组件的组合阶段延迟到父组件的布局阶段进行，为我们提供了更强的测量定制能力。利用SubcomposeLayout，可以做到将某个子组件的组合阶段延迟至其所依赖的同级子组件测量结束后进行，从而可以定制子组件间的组合、布局阶段顺序，以取代固有特性测量。

@Composable
@UiComposable
fun SubcomposeLayout(
    state: SubcomposeLayoutState,
    modifier: Modifier = Modifier,
    measurePolicy: SubcomposeMeasureScope.(Constraints) -> MeasureResult
) {...}

• state用于跟踪子组合的状态的对象，包括已分配的标签和测量信息。通过此参数，可以访问或修改子组合的状态。
• measurePolicy一个 lambda 函数，定义了子组合的测量策略。此函数接收 SubcomposeMeasureScope 和 Constraints 作为参数，返回 MeasureResult 对象，表示子组合的测量结果。SubcomposeMeasureScope 提供一些用于测量的便捷函数和属性，而 Constraints 描述了父布局对子组合的测量要求。

特别注意：SubcomposeLayout具有更强的灵活性，然而性能上不如常规Layout，因为子组件的组合阶段需要延迟到父组件布局阶段才能进行，因此还需要额外创建一个子Composition，因此SubcomposeLayout可能并不适用在一些对性能要求比较高的UI部分。

绘制

绘制阶段主要是将所有LayoutNode实际绘制到屏幕之上，也可以对绘制阶段进行定制。

Canvas Composable

Canvas Composable是官方提供的一个专门用来自定义绘制的单元组件。之所以说是单元组件，是因为这个组件不可以包含任何子组件，可以看作是传统View系统中的一个单元View。

@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) =
    Spacer(modifier.drawBehind(onDraw))   //所有的绘制逻辑最终都传入drawBehind()修饰符方法里

查阅Canvas组件的实现，可以发现其本质上就是一个Spacer，所有的绘制逻辑最终都传入drawBehind()修饰符方法里。这个API字面意思很明确，绘制在后面即绘制在底部图层。由于该修饰符方法修饰在Spacer上，这表明我们其实是在Spacer的底部图层上完成的定制绘制。由于Spacer背景是透明的，所以绘制的内容就完全展示出来了。

DrawModifier

DrawModifier类修饰符方法共有三个，drawWithContent，drawBehind，drawWithCache

drawWithContent

drawContent的作用就是绘制组件本身的内容。例如Text，组件本身会绘制一串文本。

drawBehind

drawBehind首先调用了我们传入的定制绘制逻辑，之后调用drawContent来绘制组件内容本身。

drawWithCache

• 有时在DrawScope中绘制时，会用到一些与绘制有关的对象（如ImageBitmap、Paint、Path等），当组件发生重绘时，由于DrawScope会反复执行，这其中声明的对象也会随之重新创建，实际上这类对象是没必要重新创建的。如果这类对象占用内存空间较大，频繁多次重绘意味着这类对象会频繁地加载重建，从而导致内存抖动等问题。
• 为解决这个问题，Compose为我们提供了drawWithCache方法，就是支持缓存的绘制方法。