提供声明性

API#xff0c;让您可在不以命令方式改变前端视图的情况下呈现应用界面#xff0c;从而使编写和维护应用界面变得更加容易。

”

以上是Compose官网中对于Compose这套全新的Androi…前言

“Jetpack

API让您可在不以命令方式改变前端视图的情况下呈现应用界面从而使编写和维护应用界面变得更加容易。

”

以上是Compose官网中对于Compose这套全新的Android

UI库的介绍Compose的到来为Android引入了声明式、响应式的全新开发方式直接以函数调用的形式使用组件取代了原先冗长的Activity定义以及.xml文件编写这一点也是当前TDF团队Kuikly框架同样所具备的能力给予声明式、响应式的特性加速用户开发并且Kuikly直接复用了Android的view体系与Compose以全新的Composable以及Compose树而言一定程度上可以加速新用户对于底层的理解。

​​​​​​​

Compose执行生命周期

我们继续ComposeCompose在声明式函数的基础上引入了重组的能力结合后续的度量策略Compose

UI在发生变化时会被系统的快照系统SnapManager监测到并使用协程管道的方式获取信息然后执行重组动作重组动作会对状态变更的UI元素进行重新渲染而不修改状态未改变的其余UI元素。

Compose程序的执行之后一直到页面渲染出结果以及后续的持续UI变更共可以分为4个阶段分别是“组合

重组”

因此我们不难理解Compose仍然是采用了树型结构作为UI加载、布局、渲染的底层结构但是有所变更的是如今的Compose树的节点类型为ComposeUiNode在组件树真正开始被载入时会变成LayoutNode类型的节点。

LayoutNode是ComposeUiNode的子类其继承了ComposeUiNode中所有组件设置的属性。

对应的Row、Image、Column以及Text组件所形成的LayoutNode树显示如下

因此我们可以明确了第一点即组合阶段就是产生所有组件的LayoutNode树为后续布局阶段提供遍历的内容。

相关源码展示如下setContent中内部的函数调用在此不做展示可以结合流程图去检索源码即可了解其中的调用链。

private

{super.onCreate(savedInstanceState)setContent

{Text(Hello

ComponentActivity.setContent(parent:

CompositionContext?

window.decorView.findViewByIdViewGroup(android.R.id.content).getChildAt(0)

as?

{setParentCompositionContext(parent)setContent(content)}

else

attachsetParentCompositionContext(parent)setContent(content)//

Set

presentsetOwners()setContentView(this,

DefaultActivityContentLayoutParams)}}

布局阶段

作为输入计算每个布局节点在界面树中的测量和放置位置此过程中将遍历每个LayoutNode节点执行子节点测量、自我测量以及放置子节点三个过程。

1、Row

采用深度遍历的方式执行LayoutNode树的遍历基于constrains约束树上每个组件所在的位置在遍历完成后都将计算完成即完成布局阶段等待后续的渲染阶段。

而布局阶段中Modifier类已经开始在遍历的时候就被加载并在宽高计算时被认为是待度量的因素。

具体各组件的度量策略我附上一张表格。

!!!

设置组件大小.background(Color.LightGray)

设置背景颜色.offset(x

以此代码为例Surface组件使用Modifier伴生对象基于链式调用的方式声明了多个属性也正如此Modifier是Compose中修饰

interface

Modifier、内部子接口Modifier.Element、CombinedModifier。

伴生对象

Modifier.Element当我们使用Modifier.xxx()时其内部实际会创建一个Modifier

时内部会创建一个

而类似LayoutModifier的中间类显示如下不同的中间Modifier.Element子类将使得Modifier链建立时使用CombinedModifier来链接

then()

size属性定义时建立的SizeModifier实例被当作参数传入

then()

Modifier.size(100.dp).background(Color.Red)fun

Color,shape:

而此时Modifier链也将引入新的类型CombinedModifier来链接所对应的中间Modifier.Element子类不一致时的Modifier

interface

至此Modifier链已经构建完成而在LayoutNode遍历时会基于nodes属性访问管理Modifier链的Nodechain类

internal

innerCoordinator是指最内层的协调器直接与LayoutNode关联负责处理Modifier链的内部操作包括处理内部Modifier、管理LayoutNode子LayoutNode协助他们的度量工作以及传递事件

outerCoordinator是指最外层的协调器负责处理Modifier链的外部操作包括处理外部Modifier协调Modifier的调用顺序以及管理LayoutNode父节点

Modifier

是指那些主要影响组件的布局和测量的修饰符。

这些修饰符通常在LayoutNode的内部进行操作改变组件的尺寸、位置和布局行为。

(

padding,

是指那些主要影响组件的绘制和偏移的修饰符。

这些修饰符通常在LayoutNode的外部进行操作改变组件的外观、透明度和位置偏移等。

(

background,

而其中访问Modifier链的过程将基于foldin与foldout方法取到Modifier上所有的设置信息从而将外部

height上并最后在父节点的constrains限制下输出最大的width和height

fun

LayoutNode、Modifier、MeasurePolicy汇总