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(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值