如何在Jetpack Compose的LazyColumn中实现自定义双列布局

问题背景 #

我希望在Jetpack Compose的LazyColumn的item中使用自定义双列布局展示音乐记录列表，已实现TwoColumnsLayout布局组件及使用它的ExpandableCard可组合项，但布局渲染异常，无法看到SongItem，求正确的实现方式。

初始实现代码 #

初始TwoColumnsLayout

@Composable
fun TwoColumnsLayout(
    modifier: Modifier = Modifier,
    content: @Composable ()-> Unit
){
    Layout(//the basic building block for custom layout
        modifier = modifier,
        content = content
    ){measurables, constraints->
        layout(constraints.maxWidth, constraints.maxHeight){

            val placeables = measurables.map { measurable ->
                // Measure each children
                measurable.measure(constraints)
            }

            // Set the size of the layout as big as it can
            layout(constraints.maxWidth, constraints.maxHeight) {
                // Track the y co-ord we have placed children up to
                var xPosition = 0
                var yPosition = 0
                var index = 0

                // Place children in the parent layout
                placeables.forEach { placeable ->
                    // Position item on the screen
                    placeable.placeRelative(x = xPosition, y = yPosition)

                    if(index % 2 == 0){
                        xPosition += placeable.width
                    }else{
                        xPosition -= placeable.width
                        yPosition += placeable.height
                    }
                    index ++
                }
            }
        }
    }
}

初始ExpandableCard

@Composable
fun ExpandableCard(dataList: Map<String, List<Song>>) {

    val expandedStates = remember {
        mutableStateMapOf(
            *dataList.keys.map { it to false }.toTypedArray()
        )
    }

    LazyColumn(
        Modifier.padding(horizontal = 8.dp, vertical = 0.dp)
    ) {

        for ((category, songList) in dataList) {

            item {
                expandedStates[category]?.let { boolState ->
                    CategoryHeader(
                        category,
                        boolState,
                        animateFloatAsState(if (expandedStates[category] == true) 180f else 0f).value
                    ) { bool -> expandedStates[category] = !bool }
                }
            }

            if (expandedStates[category] == true) {
                item {
                    TwoColumnsLayout {
                        { for (song in songList) {SongItem(song)} }
                    }
                }
            }
        }
    }
}

问题原因 #

1. 嵌套layout调用：初始TwoColumnsLayout中嵌套两层layout函数，导致子元素放置逻辑被包裹在无效内层，无法正常渲染。
2. 子元素宽度未限制：直接使用父级constraints测量子元素，每个子元素占满父宽度，双列布局失效。
3. 内容传递错误：ExpandableCard中TwoColumnsLayout的content嵌套了额外Lambda，导致SongItem未被正确生成。

修正方案 #

1. 修复ExpandableCard的内容传递 #

移除额外嵌套的Lambda，直接遍历生成SongItem：

@Composable
fun ExpandableCard(dataList: Map<String, List<Song>>) {

    val expandedStates = remember {
        mutableStateMapOf(
            *dataList.keys.map { it to false }.toTypedArray()
        )
    }

    LazyColumn(
        Modifier.padding(horizontal = 8.dp, vertical = 0.dp)
    ) {

        for ((category, songList) in dataList) {

            item {
                expandedStates[category]?.let { boolState ->
                    CategoryHeader(
                        category,
                        boolState,
                        animateFloatAsState(if (expandedStates[category] == true) 180f else 0f).value
                    ) { bool -> expandedStates[category] = !bool }
                }
            }

            if (expandedStates[category] == true) {
                item {
                    TwoColumnsLayout {
                        // 直接遍历生成SongItem，无需额外Lambda
                        songList.forEach { song ->
                            SongItem(song)
                        }
                    }
                }
            }
        }
    }
}

2. 使用修正后的TwoColumnsLayout #

解决嵌套layout问题，正确限制子元素宽度并计算布局高度：

@Composable
fun TwoColumnsLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
){
    Layout(
        modifier = modifier,
        content = content
    ){measurables, constraints ->

            val placeables = measurables.map { measurable ->
                // 限制子元素宽度为父宽度的一半，构建双列基础
                measurable.measure(constraints.copy(maxWidth = constraints.maxWidth / 2))
            }

            // 计算每行高度：双元素行取最大高度，单独元素行取自身高度
            val rowsHeight = mutableListOf<Int>()
            for(i in placeables.indices) {
                when {
                    i % 2 != 0 -> {
                        rowsHeight.add(maxOf(placeables[i-1].height, placeables[i].height))
                    }
                    i == placeables.size - 1 -> {
                        rowsHeight.add(placeables[i].height)
                    }
                }
            }
            
            // 设置布局总高度为所有行高度之和
            layout(constraints.maxWidth, rowsHeight.sum()) {
                var xPosition = 0
                var yPosition = 0
                var index = 0
                var firstPlaceableHeight = 0

                placeables.forEach { placeable ->
                    placeable.placeRelative(x = xPosition, y = yPosition)

                    if(index % 2 == 0){
                        firstPlaceableHeight = placeable.height
                        xPosition += placeable.width
                    }else{
                        xPosition = 0
                        yPosition += maxOf(firstPlaceableHeight, placeable.height)
                    }
                    index ++
                }
            }
    }
}

关键修正说明 #

• 移除嵌套layout：保留一层layout函数，确保布局尺寸和子元素放置逻辑正常执行。
• 限制子元素宽度：通过constraints.copy将子元素宽度限制为父容器的一半，保证双列布局的基础结构。
• 动态计算布局高度：根据子元素高度计算每行高度，让TwoColumnsLayout的总高度适配内容，避免LazyColumn中出现空白或裁剪。
• 修复内容传递逻辑：直接在TwoColumnsLayout的content中生成SongItem，确保子元素被正确添加到布局树中。

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