Compose | 一文理解神奇的Modifier

/**
* 修改纪要：
* - 2021-08-11 修正了部分措辞
**/

写在最前

Jetpack Compose的预览版出来已经有很长时间了，相信很多读者都进行了一番尝试。注意：下文如无特殊说明，Compose均指代Jetpack Compose

可以说，Compose在声明布局时，其风格和React的JSX、Flutter 等非常的相似。

而且有一个高频出现的内容： Modifier，即 修饰器，顾名思义，它是对某些内容进行修饰的， 在Compose的设计中，和UI相关的内容都涉及到它，例如：尺寸，形状 等

这一篇文章，我们一起学习两部分内容：

• Modifier的源码和设计
• SDK中既有的Modifier实现概览

当然，最全面的学习文档当属：官方API文档 ，
后续查询API的含义和设计细节等都会用到，建议收藏

文中的代码均基于 1.0.1 版本

先放大招，Modifier的45行代码

其实有效代码行大约20行。

先举个使用示例：

Modifier.height(320.dp).fillMaxWidth()

这里的 Modifier 是接口 androidx.compose.ui.Modifier 的匿名实现，这也是一个很有意思的实用技巧。

我们先简单的概览下源码，再进行解读：

interface Modifier {
   
    // ...
    companion object : Modifier {
   
        override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R = initial
        override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R = initial
        override fun any(predicate: (Element) -> Boolean): Boolean = false
        override fun all(predicate: (Element) -> Boolean): Boolean = true
        override infix fun then(other: Modifier): Modifier = other
        override fun toString() = "Modifier"
    }
}

而本身的接口则为：

package androidx.compose.ui

import androidx.compose.runtime.Stable

interface Modifier {
   

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

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

    fun any(predicate