自定义 Compose Modifier

在上一篇文章中，我们了解了 Modifier 的基本概念和使用方式。Modifier 为我们提供了定制 UI 的强大能力，但是官方提供的 Modifier 毕竟是有限的，难免无法满足所有场景的需求。幸运的是，Jetpack Compose 允许我们自定义 Modifier，实现更加个性化的 UI 效果。本篇博客将带你一步步学习如何创建自己的 Modifier。

自定义Modifier的基本步骤

要自定义一个 Modifier，我们需要创建一个 Lambda 表达式，该表达式接收当前的 Composable 实例作为参数，并非返回一个新的 Composable 实例。在这个过程中，我们可以对原始的 Composable 进行任何想要的修改和封装。

以下是自定义 Modifier 的基本步骤：

创建一个扩展函数，该函数接收一个 Lambda 表达式作为参数。
在 Lambda 表达式中，获取当前的 Composable 实例。
根据需求，对 Composable 进行修改和包装，生成一个新的 Composable 实例。
将新的 Composable 实例返回。

下面是一个简单的示例，我们将创建一个名为MyBorderModifier的 Modifier，为 Composable 添加一个边框：

kotlin 复制代码

fun Modifier.myBorder(
    width: Dp = 1.dp,
    color: Color = Color.Black,
) = this.drawBehind {
    val strokeWidth = width.toPx()
    val rect = Rect(
        left = strokeWidth / 2,
        top = strokeWidth / 2,
        right = size.width - strokeWidth / 2,
        bottom = size.height - strokeWidth / 2
    )
    drawRect(
        color = color,
        topLeft = rect.topLeft,
        size = rect.size,
        style = Stroke(width = strokeWidth)
    )
}

让我们逐步解释这段代码：

fun Modifier.myBorder(...): 这是一个扩展函数，用于为Modifier添加一个名为myBorder的新方法。width和color是该方法的两个参数，分别用于指定边框的宽度和颜色，并提供了默认值。
this.drawBehind { ... }: drawBehind是 Compose UI 框架中Modifier的一个方法，它允许你在指定的组件的背后绘制一些内容。在这里，我们将在组件的背后绘制一个边框。drawBehind方法接受一个 lambda 表达式作为参数，该 lambda 表达式中的代码将在绘制过程中执行。
val strokeWidth = width.toPx(): 将边框宽度从Dp转换为实际的像素值，因为绘制操作需要使用实际的像素值。
val rect = Rect(...): 定义了一个Rect对象，表示边框的实际绘制区域。左上角坐标为(strokeWidth / 2, strokeWIdth / 2)、右下角坐标为(size.width - strokeWidth / 2, size.height - strokeWidth / 2)。这样做是为了确保边框绘制在组件内部，而不是超出组件的边界。size.width和size.height表示组件的实际大小。
drawRect(...): 调用DrawScope接口的drawRect方法来绘制矩形边框。
- color参数指定边框的颜色
- topLeft参数指定矩形的左上角坐标，使用rect.topLeft来确保边框位于正确的位置。
- size参数指定矩形的大小，使用rect.size来确保边框的大小正确。
- style餐食指定绘制的样式，这里使用Stroke(width = strokeWidth)来绘制一个空心的矩形边框，而不是填充的矩形。strokeWidth指定了边框的宽度。

使用自定义 Modifier 非常简单，只需要像使用其他 Modifier 一样，将它链接到 Composable 上即可：

kotlin 复制代码

@Preview(showBackground = true)
@Composable
private fun TestModifierBorder() {
    Box(
        modifier = Modifier
            .myBorder(width = 4.dp, color = Color.Red)
            .padding(16.dp)
    ) {
        Text("Hello Modifier")
    }
}

通过上面的代码，我们为 Box 添加了一个看都为

自定义Modifier的高级用法

虽然上面的实例比较简单，但是自定义 Modifier 的能力远不止于此。事实上，我们可以在 Modifier 中执行任何想要的逻辑，包括状态管理、动画效果、事件处理等等。下面是一些高级用法的示例：

1. 状态管理

我们可以在 Modifier 中维护一个状态变量，并根据状态的变化来改变 UI 的效果。例如，下面的代码可以实现了一个可点击的边框效果：

kotlin 复制代码

fun Modifier.clickableBorder(
    initialColor: Color = Color.Gray,
    clickedColor: Color = Color.Blue,
): Modifier = composed {
    var clicked by remember { mutableStateOf(false) }
    val borderColor by animateColorAsState(
        label = "borderColor",
        targetValue = if (clicked) clickedColor else initialColor
    )
    
    this.border(2.dp, borderColor)
        .clickable {
            clicked = !clicked
        }
}

这段代码中，我们创建了一个clicked，它维护了一个borderColor状态，当用户点击时，边框的颜色会通过动画过渡到clickedColor。在 Modifier 中管理装填，可以让我们实现各种复杂的 UI 效果。

2、动画效果

Modifier 中不仅可以管理状态，还可以实现动画效果。例如，下面的代码实现了一个呼吸灯效果：

kotlin 复制代码

fun Modifier.breathingLight(
    color: Color = Color.Red,
    duration: Int = 1000
): Modifier = composed {
    val infiniteTransition = rememberInfiniterTransition()
    val alpha by infiniteTransition.animateFloat(
        initialValue = 0.3f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = duration, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ), label = "alpha"
    )
    
    val scale by infiniteTransition.animateFloat(
        initialValue = 1f,
        targetValue = 2f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = duration),
            repeatMode = RepeatMode.Reverse
        ), label = "scale"
    )
    
    this.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }.background(color.copy(alpha = alpha))
}

在这个示例中，我们使用了rememberInfiniteTransition来创建一个无限循环的动画。通过animateFloat函数，我们可以获得一个在 1f 到 2f 之间循环变化的缩放值，然后我们在graohicsLayout中应用这个缩放值，一个在0.3f 到 1f 之间循环变化的透明度值，然后我们在background中应用这个透明度值，从而实现了上面的呼吸效果。