/**
* 修改纪要:
* - 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