Compose Modifier

一、Modifier简单使用

我们先拿XML中的FrameLayout做下对比，如下，我们在xml文件中定义了一个宽度填充满父容器，高度200dp，背景为黑色，内容边距为16dp的 FrameLayout：

    <FrameLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#000000"android:padding="16dp" ><-- 可配置子级元素 --></FrameLayout>

那么在Compose中如何实现这样的UI呢？直接来看结果，了解下Modifier是如何配合Composable函数实现的：

@Composable
fun BoxDemo() {Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(Color.Black).padding(16.dp),) {//可配置子级元素}
}

Modifier是有顺序的，不同执行顺序会有不同效果

二、Modifier的链式结构

Modifier是个接口，他有三个直接的实现类

伴生对象Modifier
内部子接口Modifier.Element
- 像size操作符，对应的就是SizeModifier，其实现的接口是LayoutModifier，LayoutModifier的父接口就是Modifie.Element
CombinedModifier
- Compose内部维护的数据结构，用于连接Modifier链中的每个Modifier结点

的每个操作符都是对应一个

Modifier.Element

通过then函数将Modifier添加到Modifier的链条里

如果这个是第一个Modifier，那就直接加这个Modifier
如果Modifier的链条size>0，那把当前的Modifier和要添加的Modifier组合进CombinedModifier的数据结构中

每个Modifier（CombinedModifier）都会实现foldIn，通过foldIn来遍历Modifier链条中的所有成员

Modifier.size(100.dp)fun Modifier.size(size: Dp) = this.then( // 关键方法SizeModifier(...)
)

interface Modifier {infix fun then(other: Modifier): Modifier =if (other === Modifier) this else CombinedModifier(this, other)
}class CombinedModifier(private val outer: Modifier,private val inner: Modifier
) : Modifier

对于以下代码

Modifier.size(100.dp).background(Color.Red).padding(10.dp).pointerInput(Unit) {...}

此时Modifier链的数据结构

当Modifier链的长度大于等于2时，返回的Modifier实际上是一个CombinedModifier实例

foldIn()：正向遍历Modifier链，SizeModifier-> Background -> PaddingModifier

foldOut()：反向遍历 Modifier 链, 、PaddingModifier -> Background ->SizeModifier

foldOut()与foldIn()是需要传递参数的。这里涉及到两个参数initial，operation

fun <R> foldIn(initial: R, operation: (R, Element) -> R): R
fun <R> foldOut(initial: R, operation: (Element, R) -> R): R

initial：初始值

operation：每遍历到一个Modifier时的回调，这个lambda又有两个参数，R类型与Element类型

foldIn方法类似于for (int i = initial; ; operation()) 。设置initial参数类似为i设置初始值，而operation返回值将作为值的更新。

也就是说遍历当前Modifier时执行的operation的返回值将作为链中下一个Modifier的operation的R类型参数传入。这么说可能比较晦涩难懂，在这里简单举个例子，比如说我们希望统计Modifier链中有Modifier的数量。

val modifier = Modifier.size(100.dp).background(Color.Red).padding(10.dp).pointerInput(Unit) {}
val result = modifier.foldIn<Int>(0) { currentIndex, element ->Log.d("compose_study", "index: $currentIndex , element :$element")currentIndex + 1
}

设计者一定会将一系列的Modifier设计成一个类似链表的结构，并且希望我们从Modifier的 companion实现开始进行构建链表。

如果结合注释，我们可以获知：Modifier会通过 then 组成一个链表，并且 any 和 all 是对链表的元素运行判断表达式，foldIn，foldOut 则会对链表的元素执行operation。

Modifier就是类似装饰器模式，但不是

概述 - Jetpack Compose

类似于Rx装饰器模式那样（类似，但是不是准确有待验证）

修饰函数并不是简单修改了某个组件内部的参数，而是给这个组件套上了一层又一层的修饰器，

所以会有顺序的问题

每个Modifier都是调用了Modifiier的then方法，把这个Modifier扩展函数对应的一个Modifier的实现类通过then与原Modifier组合起来

CombinedModifier 持有了我们新增的修饰器和原有的修饰器，并且将其组合为一个新的 Modifier。

可以看到，Modifier 的实现非常类似于一个链表，当我们给一个组件添加一个修饰函数时，它会创建一个 CombinedModifier 将旧的和新的Modifier组合在一起，合成为一个单独的 Modifie

fun Modifier.padding(all: Dp) =this.then(PaddingModifier(//参数，这里省略))

infix fun then(other: Modifier): Modifier =if (other === Modifier) this else CombinedModifier(this, other)

class CombinedModifier(private val outer: Modifier,private val inner: Modifier
) : Modifier {override fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R =inner.foldIn(outer.foldIn(initial, operation), operation)override fun <R> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R =outer.foldOut(inner.foldOut(initial, operation), operation)override fun any(predicate: (Modifier.Element) -> Boolean): Boolean =outer.any(predicate) || inner.any(predicate)override fun all(predicate: (Modifier.Element) -> Boolean): Boolean =outer.all(predicate) && inner.all(predicate)override fun equals(other: Any?): Boolean =other is CombinedModifier && outer == other.outer && inner == other.inneroverride fun hashCode(): Int = outer.hashCode() + 31 * inner.hashCode()override fun toString() = "[" + foldIn("") { acc, element ->if (acc.isEmpty()) element.toString() else "$acc, $element"} + "]"
}

三、FoldIn流程

compose中Modifier链会使用foldOut方法进行遍历从而生成LayoutNodeWrapper链

interface Modifier {//...interface Element : Modifier {override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R =operation(initial, this)override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R =operation(this, initial)override fun any(predicate: (Element) -> Boolean): Boolean = predicate(this)override fun all(predicate: (Element) -> Boolean): Boolean = predicate(this)}
}

CombinedModifier中的foldIn：

class CombinedModifier(private val outer: Modifier,private val inner: Modifier
) : Modifier {...override fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R =inner.foldIn(outer.foldIn(initial, operation), operation)
}

这里举一个栗子来看 foldIn 和 foldOut 的递归：

class A : Modifier.Element
class B : Modifier.Element
class C : Modifier.Elementfun Modifier.a() = this.then(A())
fun Modifier.b() = this.then(B())
fun Modifier.c() = this.then(C())

那么 Modifier.a().b().c() 的到的是什么呢？为了看起来直观点，我们以 CM 代指 CombinedModifier

CM (outer = CM (outer = A(),inner = B()),inner = C()
)

Modifier.a().b().c().foldIn(initial, operation)

所得到的执行过程为：

val ra = operation.invoke(initial,A())
val rb = operation.invoke(ra,B())
return operation.invoke(rb,C())

结合前面的知识，这里举个例子来说明operation和initial两者的关系

val initial = StringBuilder()
val operation: (StringBuilder, Element) -> StringBuilder = { builder, e ->builder.append(e.toString()).append(";")builder
}

可以看出，operation 就是不断将每个Element的内容加到initial中，并且返回值就是这个添加了自身Element内容的initial，作为下一个operation的initial

Modifier链后续还会使用foldOut方法进行遍历从而生成LayoutNodeWrapper链