第一个选项是将框和线作为可组合项并相应地对其进行布局，这对于开始布局和约束的人来说很容易。这将需要您添加NumberedBoxed和Dividers作为子可组合项。

@Composable
private fun DrawLineLayout(
    modifier: Modifier,
    content: @Composable () -> Unit
) {
    Layout(modifier = Modifier, 
           content = content) { measurables: List<Measurable>, constraints: Constraints ->

        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }

        // calculate max width and total height by offsetting 
        // VerticalDivider inside boxes
        // and x, y position of each Composable
        var totalHeight = 0
        val verticalPosition = mutableListOf<Int>()

        val maxWidth = placeables.maxOf { it.width }

        layout(maxWidth, totalHeight) {
            placeables.forEachIndexed() { index:Int, placeable: Placeable ->
                placeable.placeRelative(xPos, verticalPosition[index])
            }
        }
    }
}

字符串
第二个选项是使用SubcomposeLayout，我添加了样本here，这里是here和here，在使用SubcompoeLayout子合成并将这些位置传递给依赖内容后，将框绘制为mainConent并绘制覆盖。

@Composable
private fun LineDrawLayout(
    modifier: Modifier = Modifier,
    mainContent: @Composable () -> Unit,
    dependentContent: @Composable (List<Point>) -> Unit
) {

    SubcomposeLayout(modifier = modifier) { constraints ->
       // Implementation details
    }
}

enum class SlotsEnum { Main, Dependent }

型
并将框的中心返回到从属内容。然后，您可以在这些位置之间绘制线条，同时考虑文本的宽度。如果你愿意的话，你可以用文本（onTextLayout）和行高来做。

LineDrawLayout(
    mainContent = {
      // Your content is here
      NumberedBox(...)
      NumberedBox(...)
      ....
    },
    dependentContent = { points: List<Point> ->
      // This is overlay for drawing lines
      // Can be Canvas or Box with `Modifier.drawWithContent{}`
     
    }
)

型

我希望这对你有帮助。你需要根据自己的情况进行修改。[未测试]

@Composable
    fun ConnectedComposable(modifier: Modifier) {
        val data = listOf(
            NumberedBoxData(1, false, true),
            NumberedBoxData(2, true, true),
            NumberedBoxData(3, true, false)
        )
    
        LazyColumn(modifier = modifier) {
            items(data.size) { index ->
                NumberedBox(data[index])
                if (index < data.size - 1) {
                    VerticalDivider(Modifier.height(64.dp))
                }
            }
        }
    }
    
    data class NumberedBoxData(
        val number: Int,
        val topLine: Boolean,
        val bottomLine: Boolean
    )
    
    @Composable
    fun VerticalDivider(
        modifier: Modifier = Modifier
    ) {
        Divider(
            modifier = modifier
                .width(2.dp)
                .align(Alignment.CenterHorizontally),
            color = Color.Black
        )
    }
    
    @Composable
    fun NumberedBox(data: NumberedBoxData) {
        Surface(
            color = Color.LightGray,
            border = BorderStroke(1.dp, Color.Black),
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Column(
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxSize()
            ) {
                if (data.topLine) {
                    VerticalDivider(Modifier.fillMaxWidth())
                }
    
                Text(
                    data.number.toString(),
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .padding(vertical = 16.dp),
                    textAlign = TextAlign.Center
                )
    
                if (data.bottomLine) {
                    VerticalDivider(Modifier.fillMaxWidth())
                }
            }
        }
    }
    
    @Preview
    @Composable
    fun ConnectedComposable_Preview() {
        Scaffold {
            ConnectedComposable(
                Modifier
                    .padding(it)
                    .padding(16.dp)
            )
        }
    }

字符串