Jetpack Compose：如何绘制如图所示的两点连接路径？

基础圆点样式实现 #

如果是单纯的两个状态可控的圆点，可通过自定义可组合函数快速实现，支持激活/未激活状态切换：

@Composable
fun TwoDotIndicator(
    isFirstActive: Boolean,
    isSecondActive: Boolean,
    activeColor: Color = Color.Blue,
    inactiveColor: Color = Color.Gray,
    dotSize: Dp = 12.dp,
    spacing: Dp = 16.dp
) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(spacing),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .size(dotSize)
                .background(
                    color = if (isFirstActive) activeColor else inactiveColor,
                    shape = CircleShape
                )
        )
        Box(
            modifier = Modifier
                .size(dotSize)
                .background(
                    color = if (isSecondActive) activeColor else inactiveColor,
                    shape = CircleShape
                )
        )
    }
}

// 调用示例
@Composable
fun TwoDotDemo() {
    var firstActive by remember { mutableStateOf(true) }
    var secondActive by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TwoDotIndicator(isFirstActive = firstActive, isSecondActive = secondActive)

        Spacer(modifier = Modifier.height(24.dp))

        Button(onClick = {
            firstActive = !firstActive
            secondActive = !secondActive
        }) {
            Text("切换状态")
        }
    }
}

带连线的两点样式（步骤指示器） #

如果需要两点间带连线的样式（比如流程步骤标记），可扩展实现如下：

@Composable
fun TwoDotWithLineIndicator(
    isFirstActive: Boolean,
    isSecondActive: Boolean,
    activeColor: Color = Color.Blue,
    inactiveColor: Color = Color.Gray,
    dotSize: Dp = 12.dp,
    lineHeight: Dp = 2.dp,
    spacing: Dp = 32.dp
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .size(dotSize)
                .background(
                    color = if (isFirstActive) activeColor else inactiveColor,
                    shape = CircleShape
                )
        )

        Box(
            modifier = Modifier
                .width(spacing)
                .height(lineHeight)
                .background(
                    color = if (isSecondActive) activeColor else inactiveColor
                )
        )

        Box(
            modifier = Modifier
                .size(dotSize)
                .background(
                    color = if (isSecondActive) activeColor else inactiveColor,
                    shape = CircleShape
                )
        )
    }
}

核心技术参考点 #

• 利用Compose的Row布局实现横向排列，通过Arrangement.spacedBy控制间距
• 使用Box组件结合background属性绘制圆点和连线，CircleShape实现圆形效果
• 通过remember+mutableStateOf管理状态，实现样式的动态切换
• 自定义可组合函数的参数，提升组件复用性和灵活性

内容的提问来源于stack exchange，提问作者Diyorbek Hamdamov