初识 Jetpack Compose(三) ：修饰符（Modifier）

Modifier

modifier elements装饰或添加行为到 Compose UI 元素的有序的、不可变的集合。例如，背景、填充和单击事件侦听器装饰行、文本或按钮或向其添加行为。

正如其名，modifier主要为Compose组件提供修饰功能，包括但不限于 样式修改、事件监听等一系列对Compose组件的装饰。

有序的

需要注意官方描述的“有序的”一词，由于Modifier的使用方式是链式的，所以属性定义的先后顺序会影响到UI的展示效果。
比如：

@Composable

fun RoundButton() {

    Box(

        modifier = Modifier

            .width(300.dp)

            .height(90.dp)

            .background(Color(0xFF3ADF00), shape = RoundedCornerShape(50))

            .padding(20.dp),

        contentAlignment = Alignment.Center){

        Text(text = "RoundButton",color = Color.White)

    }

}

由于background在padding前，所以Modifier会先给Box设置背景，然后再设置边距，如图：

同理，将background与padding顺序替换，效果则如下：

通过查看Modifier的源码实现可以发现，在我们通过链式点点点叠加属性的过程中,Modifier会创建一个CombinedModifier将旧的和新的属性组合在一起，合成一个单独的Modifier，相当于给被修饰的组件套上了一层又一层的Modifier,这也是Modifier为有序的原因。

可拓展的

以Modifier.padding()源码为例：

@Stable

fun Modifier.padding(all: Dp) =

    this.then(

        PaddingModifier(

            start = all,

            top = all,

            end = all,

            bottom = all,

            rtlAware = true,

            inspectorInfo = debugInspectorInfo {

                name = "padding"

                value = all

            }

        )

    )

可以发现，padding()是Modifier的一个拓展函数，它调用了Modifier的 then() 函数，而这个 then() 需要接收一个Modifier对象，而PaddingModifier就是这个对象。

所以我们也当然可以为Modifier添加拓展函数，传入我们自定义的Modifier来达到一些特定的效果，比如以下这些属性我们会经常为不同的组件配置：

modifier = Modifier

    .width(300.dp)

    .height(90.dp)

    .padding(20.dp)

    .background(Color(0xFF3ADF00), RoundedCornerShape(50))

复制代码

为了方便调用，我们可以给Modifier添加一个拓展方法：

@Stable

fun Modifier.buttonDefault() = this.then(

    width(300.dp)

        .height(90.dp)

        .padding(20.dp)

        .background(Color(0xFF3ADF00), RoundedCornerShape(50))

)

这样在组件中，我们只需要这样使用就可以了。

modifier = Modifier.buttonDefault()

复制代码

Modifier 属性

Modifier可配置的属性多且杂，这里不一一列举了，具体可前往Andrid Developer查看




以下是根据职能分类列出的一些常用属性

宽&高

间距

绘制

背景&边框

行为

二、最后

好记性不如烂笔头，初识 Jetpack Compose 系列是我自己的学习笔记，在加深知识巩固的同时，也可以锻炼一下写作技能。文章中的内容仅作参考，如有问题请留言指正。

1. 参考

• 
  
• Android developers
  
• Jetpack Compose - Modifier入门篇