Compose尝鲜体验（二）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

Compose尝鲜体验（二）

Compose的Modifier修饰符

在Compose中Modifier这个修饰符想必大家都不会陌生吧。在我们进行组件封装，布局编写，用户行为输入等的时候我们都会在对此进行操作。该修饰符我们主要用作于

• 更改可组合想的大小、布局、行为和外观
• 添加信息，如无障碍标签
• 处理用户的行为事件
• 添加组件的高级互动

下面会讲解Modifier常用修饰符

• padding 在元素周围留出空间
• fillMaxWidth()填充父项为它提供的最大宽度
• fillMaxHeight() 填充父项为它提供的最大高度
• fillMaxSize() 填充父项为它提供的最大宽度和高度
• background 背景颜色 border 边框 clip 剪切形状 blur 绘制模糊内容
• drawBehind 在内容的背后为其提供一个Cavans进行绘制

等等其他函数需要使用时可以根据自己的需要查看源码，这里就不一一列举

很多情况下我们Compose为我们提供的一些修饰符不能满足我们需求时 我们就可以利用Kotlin的扩展函数的语言特性进行自己封装，比如Compose为我们提供的clickable()修饰符在按下时会有一层阴影，这个时候我们需要自己封装一个没有按压效果的clickable()事件.

fun Modifier.noPressColorClick(onClick: () -> Unit): Modifier = composed(
    factory = {
        Modifier
            .clickable(indication = NoIndication,
                interactionSource = remember { MutableInteractionSource() }) {
                onClick()
            }
    }
)

比如事件的防抖

fun Modifier.throttleFirst(time : Int,onClick: () -> Unit):Modifier=composed(
    factory = {
        var lastClickTime :Long = 0
        Modifier.clickable {
            val currentTime :Long = System.currentTimeMillis()
            if(currentTime - lastClickTime > time){
                lastClickTime = currentTime
                onClick.invoke()
            }
        }
    }
)

在使用Modifier的时候需要特别注意的是：修饰符的顺序很重要。由于每个函数都会对上一个函数返回的Modifier进行更改，因此顺序会影响最终的结果 可以看以下例子：

 Box(modifier = Modifier
        .background(redFF0505)
        .clip(CircleShape))

Box(
    modifier = Modifier
        .size(57.hdp)
        .clip(CircleShape)
        .background(redFF0505)
)

同样的代码，不同的修饰顺序就会出现两种截然不同的结果，所以在我们开发的时候需要特别注意这一点。