如何在Jetpack Compose中设计带曲线连接的关卡冒险路径？

先看你想要的效果示例：

下面是具体实现方案，分为曲线路径绘制、可点击关卡组件和整体布局三部分：

1. 定义关卡数据模型 #

用数据类统一管理关卡状态：

data class Level(
    val id: Int,
    val iconRes: Int, // 关卡图标资源ID
    val isUnlocked: Boolean, // 是否解锁
    val isCurrent: Boolean // 是否为当前关卡
)

2. 绘制关卡间的连接曲线 #

使用Canvas结合Layout计算关卡位置并绘制贝塞尔曲线，灵活控制路径走向：

@Composable
fun LevelPath(levels: List<Level>, modifier: Modifier = Modifier) {
    Layout(
        content = {
            levels.forEach { level ->
                LevelCircle(level = level)
            }
        },
        modifier = modifier
    ) { measurables, constraints ->
        val placeables = measurables.map { it.measure(constraints) }
        val spacing = 120.dp.toPx() // 关卡横向间距，可按需调整
        val totalWidth = (placeables.size - 1) * spacing + placeables.first().width
        val totalHeight = placeables.maxOf { it.height }

        layout(totalWidth.toInt(), totalHeight.toInt()) {
            var xPos = 0f
            placeables.forEachIndexed { index, placeable ->
                // 居中放置关卡圆形
                placeable.placeRelative(
                    x = xPos.toInt(),
                    y = (totalHeight - placeable.height) / 2
                )

                // 绘制到下一个关卡的曲线
                if (index < placeables.size - 1) {
                    val nextX = xPos + spacing
                    val centerY = totalHeight / 2f
                    drawPath(
                        path = Path().apply {
                            moveTo(xPos + placeable.width / 2f, centerY)
                            // 二次贝塞尔曲线，调整控制点可修改曲线弧度
                            quadraticBezierTo(
                                xPos + spacing / 2f, centerY - 40f,
                                nextX, centerY
                            )
                        },
                        color = if (levels[index].isUnlocked) Color(0xFF6200EE) else Color.Gray.copy(alpha = 0.5f),
                        strokeWidth = 4.dp.toPx(),
                        style = Stroke()
                    )
                }
                xPos += spacing
            }
        }
    }
}

3. 可点击的圆形关卡组件 #

实现带状态的圆形点击组件，支持图标显示和解锁/锁定状态：

@Composable
fun LevelCircle(level: Level) {
    val size = 64.dp
    val borderColor = when {
        level.isCurrent -> Color(0xFF03DAC6)
        level.isUnlocked -> Color(0xFF6200EE)
        else -> Color.Gray
    }
    val contentAlpha = if (level.isUnlocked) 1f else 0.5f

    Box(
        modifier = Modifier
            .size(size)
            .clip(CircleShape)
            .border(2.dp, borderColor, CircleShape)
            .background(Color.White.copy(alpha = contentAlpha))
            .clickable(enabled = level.isUnlocked) {
                // 添加关卡点击逻辑，比如跳转教学页面
                // navigateToLevel(level.id)
            },
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = level.iconRes),
            contentDescription = "关卡 ${level.id}",
            modifier = Modifier.size(40.dp),
            alpha = contentAlpha
        )
    }
}

4. 页面集成示例 #

在屏幕中使用上述组件，传入关卡数据即可：

@Composable
fun AdventureLevelScreen() {
    val levels = listOf(
        Level(1, R.drawable.ic_level_1, isUnlocked = true, isCurrent = true),
        Level(2, R.drawable.ic_level_2, isUnlocked = true, isCurrent = false),
        Level(3, R.drawable.ic_level_3, isUnlocked = false, isCurrent = false),
        Level(4, R.drawable.ic_level_4, isUnlocked = false, isCurrent = false)
    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        LevelPath(levels = levels, modifier = Modifier.fillMaxWidth())
    }
}

可选优化建议 #

• 路径方向调整：如果需要纵向路径，修改Layout中的位置计算（横向spacing改纵向），并调整贝塞尔曲线控制点即可
• 动画增强：给解锁关卡添加淡入动画，给曲线添加绘制进度动画（用animateFloatAsState控制）
• 响应式适配：用constraints.maxWidth计算动态间距，适配不同屏幕宽度

内容的提问来源于stack exchange，提问作者Majid Ahmadi Jebeli