一个例子学会使用Jetpack Compose Modifier

Modifier是Compose中的重要概念，能够让UI呈现更加专业、好看的视觉效果。

1. 为什么使用Modifier？

常规的View体系中，控件以实例对象的形式存在，控件可以在实例化之后再动态配置属性，但是Composable本质上是函数，只能在调用的同时通过参数传递进行配置，如果没有Modifier，参数签名会变得很长（虽然Kotlin支持默认参数）。

使用Modiifer可以很好地解决这个问题，它就像Composable的配置文件，可以在此对Composable的样式和行为进行统一配置。

2. Modifier是一组有序的链式调用

Modifier通过链式调用“装饰”我们的Composable，为其添加Background、Padding、onClick事件等。

链上的每个操作符都创建一个Element，整个调用链是一组Element的有序执行单元：

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

@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将达到下面第二张图片的效果。