Jetpack Compose 如何更优实现带贯穿连接线的串联编号框布局

需要实现垂直连接线段可延伸至编号盒子内部的纵向串联布局，目标效果参考：

最初通过组合基础Composable与线段绘制能力实现该布局：为编号盒子组件传入布尔类型参数，控制盒子内部上端、下端的连接线是否显示；在相邻编号盒子之间单独绘制垂直分隔线作为外部连接段，该方案可实现预期渲染效果，效果参考：

对应实现代码如下：

@Composable
fun ConnectedComposable(modifier: Modifier) {
    Column(modifier = modifier) {
        NumberedBox(
            number = 1,
            topLine = false,
            bottomLine = true
        )
        VerticalDivider(Modifier.height(64.dp))
        NumberedBox(
            number = 2,
            topLine = true,
            bottomLine = true
        )
        VerticalDivider(Modifier.height(64.dp))
        NumberedBox(
            number = 3,
            topLine = true,
            bottomLine = false
        )
    }
}

@Composable
fun ColumnScope.VerticalDivider(
    modifier: Modifier = Modifier
) {
    Divider(
        modifier = modifier
            .width(2.dp)
            .align(Alignment.CenterHorizontally),
        color = Color.Black
    )
}

@Composable
fun NumberedBox(
    number: Int,
    topLine: Boolean,
    bottomLine: Boolean,
    modifier: Modifier = Modifier
) {
    Surface(
        color = Color.LightGray,
        border = BorderStroke(1.dp, Color.Black),
        modifier = modifier
            .size(100.dp)
            .fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .padding(horizontal = 16.dp)
                .fillMaxSize()
        ) {
            if (topLine) {
                VerticalDivider(
                    Modifier.weight(1f)
                )
            }
            else {
                Spacer(modifier = Modifier.weight(1f))
            }

            Text(
                number.toString(),
                modifier = Modifier
                    .align(Alignment.CenterHorizontally)
                    .padding(vertical = 16.dp),
                textAlign = TextAlign.Center
            )


            if (bottomLine) {
                VerticalDivider(
                    Modifier.weight(1f)
                )
            }
            else {
                Spacer(modifier = Modifier.weight(1f))
            }
        }
    }
}

@Preview
@Composable
fun ConnectedComposable_Preview() {
    Scaffold {
        ConnectedComposable(
            Modifier
                .padding(it)
                .padding(16.dp)
        )
    }
}

当前实现存在以下缺陷：

• 后续布局发生变更时代码维护难度较高
• 若NumberedBox组件尺寸不固定，实现复杂度会大幅上升
• 盒子内部、外部的线条位置计算逻辑需要手动保持同步
• 若连接线不采用居中布局，位置计算逻辑实现难度较高

是否存在其他更优、更易维护的方式实现该类布局？

回答 #

不要拆分盒子内、外的连接线分段绘制，直接在父容器层面统一完成测量和线条绘制，从根源上消除多段线条位置同步的问题，是这类布局的最优实现方式。
核心思路是把连接线的绘制逻辑完全从NumberedBox中剥离，子组件只负责渲染编号盒子本身，不需要感知连接线的存在；父布局通过自定义Layout拿到所有子项的位置、尺寸信息后，一次性绘制完整的连接线，自动对齐到每个盒子的数字中心。

实现代码 #

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Scaffold
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun ConnectedNumberColumn(
    modifier: Modifier = Modifier,
    lineWidth: Dp = 2.dp,
    lineColor: Color = Color.Black,
    spaceBetween: Dp = 64.dp,
    lineHorizontalOffset: Dp = 0.dp,
    content: @Composable () -> Unit
) {
    val density = LocalDensity.current
    val lineWidthPx = with(density) { lineWidth.toPx() }
    val spaceBetweenPx = with(density) { spaceBetween.toPx() }
    val lineOffsetPx = with(density) { lineHorizontalOffset.toPx() }

    var childLayoutData by remember { mutableStateOf(emptyList<ChildLayoutInfo>()) }

    Layout(
        content = content,
        modifier = modifier.drawBehind {
            if (childLayoutData.size < 2) return@drawBehind
            val lineX = size.width / 2 - lineWidthPx / 2 + lineOffsetPx
            for (i in 0 until childLayoutData.size - 1) {
                val current = childLayoutData[i]
                val next = childLayoutData[i+1]
                drawRect(
                    color = lineColor,
                    topLeft = Offset(lineX, current.contentCenterY),
                    size = Size(lineWidthPx, next.contentCenterY - current.contentCenterY)
                )
            }
        }
    ) { measurables, constraints ->
        val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
        val placeables = measurables.map { it.measure(looseConstraints) }
        val layoutInfoList = mutableListOf<ChildLayoutInfo>()
        var totalHeight = 0
        val maxWidth = placeables.maxOf { it.width }

        placeables.forEachIndexed { index, placeable ->
            if (index != 0) totalHeight += spaceBetweenPx.toInt()
            // 此处默认盒子内容垂直居中，若内容位置有调整可修改centerY计算逻辑
            val contentCenterY = totalHeight + placeable.height / 2f
            layoutInfoList.add(ChildLayoutInfo(topY = totalHeight, contentCenterY = contentCenterY))
            totalHeight += placeable.height
        }
        childLayoutData = layoutInfoList

        layout(maxWidth, totalHeight) {
            var currentY = 0
            placeables.forEachIndexed { index, placeable ->
                if (index != 0) currentY += spaceBetweenPx.toInt()
                placeable.placeRelative(0, currentY)
                currentY += placeable.height
            }
        }
    }
}

@Composable
fun NumberedBox(
    number: Int,
    modifier: Modifier = Modifier
) {
    Surface(
        color = Color.LightGray,
        border = BorderStroke(1.dp, Color.Black),
        modifier = modifier.size(100.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(
                text = number.toString(),
                textAlign = TextAlign.Center
            )
        }
    }
}

private data class ChildLayoutInfo(
    val topY: Int,
    val contentCenterY: Float
)

// 预览使用
@Preview
@Composable
fun ConnectedLayoutPreview() {
    Scaffold { innerPadding ->
        ConnectedNumberColumn(
            modifier = Modifier
                .padding(innerPadding)
                .padding(16.dp)
                .fillMaxWidth()
        ) {
            NumberedBox(1)
            NumberedBox(2)
            NumberedBox(3)
        }
    }
}

方案优势 #

• NumberedBox完全解耦，不需要新增任何控制线条显隐的参数，组件复用性更强
• 连接线一次性绘制完成，不存在多段线条对齐偏差的问题，不管盒子尺寸、间距如何调整，线条都会自动连接到每个盒子的内容中心
• 如果需要调整连接线位置（比如不居中、偏左/偏右），只需要修改lineX的计算逻辑，不需要改动任何子组件代码
• 后续新增、删除编号项时，直接在ConnectedNumberColumn作用域内增减NumberedBox即可，不需要手动添加分隔线、配置显隐参数，维护成本极低。

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