在Jetpack Compose中创建惊艳的3D边框效果

大家好！今天我要分享一个超酷的技巧——如何在Jetpack Compose中创建 3D边框效果 。这种效果可以应用于任何视图和任何形状，我们还会用它来打造一个 漂亮的搜索框 。让我们开始吧！

凸起边框效果

首先，我们定义一个 convexBorder 扩展函数，用于在 Modifier 上绘制凸起边框。

ConvexStyle类

为了更清晰地表示边框的凸起效果样式，我们先创建一个 ConvexStyle 数据类：

data class ConvexStyle(    val blur: Dp = 3.dp,    val offset: Dp = 2.dp,    val glareColor: Color = Color.White.copy(0.64f),    val shadowColor: Color = Color.Black.copy(0.64f)

主函数定义

现在我们可以定义主函数了：

fun Modifier.convexBorder(    color: Color,    shape: Shape,    strokeWidth: Dp = 8.dp,    convexStyle: ConvexStyle = ConvexStyle())

参数说明：

• color - 边框颜色
• shape - 边框形状
• strokeWidth - 边框宽度
• convexStyle - 应用于边框的凸起效果样式

实现细节

绘制阴影和高光

在实现 convexBorder 函数之前，我们需要定义一个辅助函数 drawConvexBorderShadow ，用于绘制创建凸起效果的阴影。

fun DrawScope.drawConvexBorderShadow(    outline: Outline,    strokeWidth: Dp,    blur: Dp,    offsetX: Dp,    offsetY: Dp,    shadowColor: Color) = drawIntoCanvas { canvas ->    // 创建并设置Paint对象    val shadowPaint = Paint().apply {        this.style = PaintingStyle.Stroke        this.color = shadowColor        this.strokeWidth = strokeWidth.toPx()    }        // 保存当前图层    canvas.saveLayer(size.toRect(), shadowPaint)        val halfStrokeWidth = strokeWidth.toPx() / 2    // 平移画布以适应边界    canvas.translate(halfStrokeWidth, halfStrokeWidth)    // 绘制阴影轮廓    canvas.drawOutline(outline, shadowPaint)        // 应用混合模式和模糊效果    shadowPaint.asFrameworkPaint().apply {        xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)        maskFilter = BlurMaskFilter(blur.toPx(), BlurMaskFilter.Blur.NORMAL)    }        // 设置裁剪颜色    shadowPaint.color = Color.Black    // 平移画布并绘制阴影裁剪轮廓    canvas.translate(offsetX.toPx(), offsetY.toPx())    canvas.drawOutline(outline, shadowPaint)    // 恢复画布原始状态    canvas.restore()}

convexBorder实现

有了 drawConvexBorderShadow 函数，我们现在可以定义主函数来绘制凸起边框了。

fun Modifier.convexBorder(    /* 参数... */) = this.drawWithContent {    // 调整大小以适应画布边界    val adjustedSize = Size(size.width - strokeWidth.toPx(), size.height - strokeWidth.toPx())    // 根据形状和调整后的大小创建轮廓    val outline = shape.createOutline(adjustedSize, layoutDirection, this)        // 绘制可组合内容的原始内容    drawContent()        // 平移画布以适应边界    translate(halfStrokeWidth, halfStrokeWidth) {        // 绘制主边框轮廓        drawOutline(            outline = outline,            color = color,            style = Stroke(width = strokeWidth.toPx())        )    }        with(convexStyle) {        // 绘制阴影轮廓        drawConvexBorderShadow(outline, strokeWidth, blur, -offset, -offset, shadowColor)        // 绘制高光轮廓        drawConvexBorderShadow(outline, strokeWidth, blur, offset, offset, glareColor)    }}

恭喜你！我们已经成功实现了3D边框效果。现在，让我们看看如何利用这个函数创建一个漂亮的搜索框。

实战示例

让我们进入今天的实战部分。要编写一个自定义样式的 TextField ，我们可以利用 BasicTextField 的 decorationBox 参数。

// 保存文本输入的可变状态var text by remember { mutableStateOf("") }BasicTextField(    value = text,    onValueChange = { text = it },    singleLine = true,    keyboardOptions = KeyboardOptions(        capitalization = KeyboardCapitalization.Sentences,        imeAction = ImeAction.Search    ),    textStyle = LocalTextStyle.current.copy(        fontSize = 16.sp,        fontWeight = FontWeight.Medium    ),    decorationBox = { innerTextField ->        Row(            modifier = Modifier                .size(350.dp, 60.dp)                // 设置背景颜色和形状                .background(Color(0xFF7F2DBF), CircleShape)                // 应用相同颜色和形状的凸起边框                .convexBorder(Color(0xFF7F2DBF), CircleShape)                .padding(horizontal = 20.dp),            verticalAlignment = Alignment.CenterVertically,            horizontalArrangement = Arrangement.spacedBy(8.dp)        ) {            // 添加搜索图标            Icon(                imageVector = Icons.Rounded.Search,                contentDescription = null            )            Box {                // 当输入文本为空时显示占位符                if (text.isEmpty()) {                    Text(                        text = "Search...",                        style = LocalTextStyle.current.copy(color = Color(0xFF242424))                    )                }                // 显示实际的文本字段                innerTextField()            }        }    })

最终效果

感谢 阅读这篇文章！ 如果你觉得它 有趣 且 有价值 ，请点击点赞并关注获取更多精彩内容