一个例子学会使用Jetpack Compose Modifier

Text(

“Hello, World!”,

Modifier.padding(16.dp) // Outer padding; outside background

.background(color = Color.Green) // Solid element background color

.padding(16.dp) // Inner padding; inside background, around text

)

复制代码

如上，调用链上的两个padding不是覆盖关系，而是按照顺序发挥作用。

padding创建PaddingModifier，

class PaddingModifier(val start: Dp, val top : d’p…) : Modifier.Element

fun Modifier.padding(all: Dp) = this.then(PaddingModifier(start = all, top = all, xxx))

复制代码

then用来组合两个Modifier并保持顺序执行。

open infix fun then(other: Modifier): Modifier

复制代码

Modifier类似RxJava的Observable，基于函数式编程思想，将操作符串联成一组可执行函数，在Composable渲染的时候才执行。

[](()3. 使用Modifier装饰Composable

========================================================================================

Modifier的操作符（API）虽然数量多，但是语义明确，上手不难。下面通过一个例子带大家体验一下如何使用Modifier装饰我们的Composable。

我们试着用Compose实现一个关注列表的Item，如下