Jetpack Compose Modifier 使用入门

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

为什么使用Modifier？

---

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

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

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渲染的时候才执行。

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

整体布局

Modifier.padding

我们使用Row、Column对Item内的元素进行了基本布局，但是元素之间缺少间距

Compose通过Modifier在Composable之间添加Padding

@Composable
fun Decorated() {
    
    
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .preferredHeightIn(min = 64.dp)
            .padding(8.dp) //外间隙
            .border(1.dp, Color.LightGray, RoundedCornerShape(4.dp))
            .padding(8.dp) //内间隙

    ) {
    
    
      	...
    }
}

如上，我们对Item整体添加Padding。
border前后各有一个padding，分别表示对外和对内的间距。相对于传统布局有Margin和Padding区分，Modifier中只有padding，根据调用链中的位置不同发挥不同作用，使用更加简单。

Modifier.border

border用来定义边框，RoundedCornerShape是一个Shape类型，用来指定边框的形状为圆角矩形。

我们还可以调用两次background来实现border的效果：

modifier = Modifier
	.background(Color.LightGray) 
    .padding(1.dp) //两个backgound之间形成边框
    .background(Color.White)

Modifier.preferredHeight / Modifier.preferredHeightIn

preferedXXX等用来设置初始的size，例如preferedHeight可以设置Composable的默认高度，这个值可能被其他约束覆盖，若想要高度不被覆盖，就使用Modifier.height设置固定值

本例中使用preferedHeightIn，可以设置minHeight和maxHeight。

Modifier.fillMaxWidth

fillMaxWidth表示填充整个父容器，相当于传统布局的match_parent

参数中传入Modifier

填充Row中的内容，从左往右依次是，头像、文字、按钮

@Composable
fun Decorated() {
    
    
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .preferredHeight(64.dp)
            .padding(8.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(4.dp))
            .padding(8.dp)

    ) {
    
    

        Avatar( //头像部分
            modifier = Modifier
                .padding(4.dp)
                .align(Alignment.CenterVertically)
        )

        Info( //文字部分
            Modifier
                .weight(1f)
                .align(Alignment.CenterVertically)
        )

        FollowBtn( //按钮
            Modifier.align(Alignment.CenterVertically)
        )
    }
}

我们将具体实现抽成独立的Composable，在Row中调用并传入Modifier。

在Compose中定义Composable时，为Modifier预留参数位置是一个好习惯

Modifier为调用方提供了修改子元素样式的机会，但更重要的是有一些操作符只能在外部调用。

Modifier.align

Modifier的操作符都是扩展函数，并不是定义在一起。操作符定义在不同的空间中，可以限制某些操作符只能在特定父Comopsable中使用，避免误用。

interface RowScope {
    
    
    fun Modifier.align(alignment: Alignment.Vertical)
}

如上，align只能在Row中调用，用来设置子元素在垂直方向如何对齐。子元素不关心其在父容器中如何对齐，因此在外部设置align(Alignment.CenterVertically)后，传给子元素继续使用。

Modifier.weight

weight同样只能在Row中调用，为子元素分配在Row中的占比，类似于LinearLayout的layout_weight。本例中让中间的文字部分占据所有所有空间

头像图片

---

我们对头像图片做圆形处理并添加边框，提升整体视觉效果。

@Composable
fun Avatar(modifier: Modifier) {
    
    
    Image(
        modifier = modifier
            .size(50.dp)
            .clip(CircleShape)
            .border(
                shape = CircleShape,
                border = BorderStroke(
                    width = 2.dp,
                    brush = Brush.linearGradient(
                        colors = listOf(blue, teal200, green200, orange),
                        start = Offset( 0f, 0f),
                        end = Offset(100f,100f)
                    )
                )
            )
            .border(
                shape = CircleShape,
                border = BorderStroke(4.dp, SolidColor(Color.White))
            ),
        bitmap = imageResource(id = R.drawable.miku),
        contentDescription = null, // decorative
    )

}

Modifier.size

首先size(50.dp) 设置图片的整体大小

Modifier.clip

clip用来将图片裁剪成指定形状，例子中clip(CircleShape)将图片裁剪成圆形

Modifier.border调用顺序

图片的边框由两部分组成，外层带颜色的部分，和内层的白色边框，因此调用链中出现了两个border()。两个border的调用顺序需要特备注意，border表示为后面的调用添加边框，所以在前面调用的后生效。所以例子中的border调用顺序如下：

Modifier
.border() //2dp 颜色边框
.border() //4dp 白色边框

BorderStroke & Brush

border使用BorderStroke填充边框颜色。

外边框使用Brush.linearGradient填充多种颜色组成的渐变色，start和end表示颜色范围

BroderStroke(
	brush = Brush.linearGradient(
    	 colors = listOf(blue, teal200, green200, orange),
     	start = Offset( 0f, 0f),
     	end = Offset(100f,100f)
	)
)

内边框使用SolidColor填充固定颜色

BorderStroke(brush = SolidColor(Color.White))

文字部分

---

@Composable
fun Info(modifier: Modifier) {
    
    
    Column(modifier = modifier) {
    
    
        Text(
            text = name,
            color = Color.Black,
            maxLines = 1,
            style = TextStyle(
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp,
                letterSpacing = 0.15.sp
            )
        )
        Text(
            text = desc,
            color = Color.Black.copy(alpha = 0.75f),
            maxLines = 1,
            style = TextStyle( // here
                fontWeight = FontWeight.Normal,
                fontSize = 14.sp,
                letterSpacing = 0.25.sp
            )
        )
    }
}

许多字体的样式不借助Modifier，而是通过Text自身的属性以及TextStyle设置

文字颜色

color设置文字颜色，Compose的Color类功能强大， 例如这里可以设置透明度：Color.Black.copy(alpha = 0.75f)

TextStyle

TextStyle可以设置字体、字号等，例子中通过fontWeight设置了粗体

textDecoration

虽然本例中没有使用，但是Text还有一个重要属性textDecoration，对文字进行更有针对性的“装饰”，例如添加下划线、删除线等

textDecoration = TextDecoration.Underline

按钮

---

虽然有Compose提供了专门的Button实现按钮，使用Text同样可以实现按钮，而且可定制性更高。

@Composable
fun FollowBtn(modifier: Modifier) {
    
    
    val backgroundShape: Shape = RoundedCornerShape(4.dp)

    Text(
        text = "Follow",
        style = typography.body1.copy(color = Color.White),
        textAlign = TextAlign.Center,
        modifier =
        modifier
            .preferredWidth(80.dp)
            .clickable(onClick = {
    
    })
            .shadow(3.dp, shape = backgroundShape)
            .clip(backgroundShape)
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Red500,
                        orange700,
                    ),
                    startY = 0f,
                    endY = 80f
                )
            )
            .padding(6.dp)
    )
}

Modifier.background

为按钮添加了渐变的背景色以及阴影后，显得更加拟物、有质感
background中同样通过Brush添加渐变色

Modifier.shadow

shadow添加阴影，需要特别shadow在调用链中的位置，阴影本身也是占用面积的，所以要在background之前调用，避免阴影进入背景色区域中

Modifier.click

Text之所以可以替代Button实现按钮，是因为Modifier提供了click，可以让Composable处理onClick事件

最后

---

通过上面的例子，相信大家已经掌握了Modifier的基本使用方式，Modifier还有很多高级的API，后续有机会陆续分享给大家。Modifier在设计上吸取了装饰器模式、FP等多种编程思想，思路巧妙，值得大家学习。

更多API参考：

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier