一个例子学会使用Jetpack Compose Modifier，微信小程序页面跳转方式

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，如下

@Composable

fun Plain() {

Row(modifier = Modifier.fillMaxWidth()) {

Image(

modifier = Modifier.size(40.dp),

bitmap = imageResource(id = R.drawable.miku),

contentDescription = null, // decorative

)

Column(modifier = Modifier.weight(1f)) {

Text(text = name, maxLines = 1)

Text(text = desc, maxLines = 1)

}

Text(“Follow”, Modifier.padding(6.dp))

}

}

复制代码

接下来，我们一步步通过Modifier对其进行装饰，在文章最后，UI将达到下面第二张图片的效果。

3.1 整体布局

---