Android Compose实现CheckCircle图标间垂直连接线的技术问题

可以通过以下方式实现目标UI效果，核心思路是在父布局中通过绘制API添加连接线，同时获取图标位置确保线条对齐：

@Composable
fun ConnectedCheckList() {
    var topIconCenter by remember { mutableStateOf(Offset.Zero) }
    var bottomIconCenter by remember { mutableStateOf(Offset.Zero) }
    val iconSize = 16.dp
    val iconRadius = iconSize.toPx() / 2

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .drawBehind {
                // 确保两个图标坐标都已获取后再绘制线条
                if (topIconCenter != Offset.Zero && bottomIconCenter != Offset.Zero) {
                    drawLine(
                        color = Color.Gray,
                        start = Offset(topIconCenter.x, topIconCenter.y + iconRadius),
                        end = Offset(bottomIconCenter.x, bottomIconCenter.y - iconRadius),
                        strokeWidth = 2.dp.toPx()
                    )
                }
            }
    ) {
        // 第一行带图标和文本
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {
            Image(
                imageVector = Icons.Rounded.CheckCircle,
                contentDescription = "已完成",
                modifier = Modifier
                    .size(iconSize)
                    .onGloballyPositioned {
                        val bounds = it.boundsInParent()
                        topIconCenter = Offset(bounds.centerX(), bounds.centerY())
                    }
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = "abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd",
                fontSize = 16.sp,
                modifier = Modifier.weight(1f)
            )
        }

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

        // 第二行带图标和文本
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {
            Image(
                imageVector = Icons.Rounded.CheckCircle,
                contentDescription = "已完成",
                modifier = Modifier
                    .size(iconSize)
                    .onGloballyPositioned {
                        val bounds = it.boundsInParent()
                        bottomIconCenter = Offset(bounds.centerX(), bounds.centerY())
                    }
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = "abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd",
                fontSize = 16.sp,
                modifier = Modifier.weight(1f)
            )
        }
    }
}

关键说明： #

• 用Column作为父容器，统一管理两行内容和连接线的绘制区域。
• 通过onGloballyPositioned获取每个图标的中心坐标，用remember保存状态，保证布局更新时坐标同步刷新。
• 在drawBehind中计算线条的起点（第一个图标底部中心）和终点（第二个图标顶部中心），确保线条与图标垂直对齐。
• 给Text添加weight(1f)，让文本在宽度不足时自动换行，避免布局溢出。
• 可根据需求调整线条的color和strokeWidth参数，匹配设计风格。

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