Jetpack Compose如何复用@Composable列表容器适配多类型条目

解决方案 #

核心思路是利用 Compose 泛型 + 内容插槽的特性，抽离公共列表逻辑，把差异化的条目渲染逻辑作为参数传入通用容器。

1. 定义通用列表容器组件

// 泛型T适配不同的数据类类型，itemContent参数接收对应条目的渲染逻辑
@Composable
fun <T> CommonSection(
    list: List<T>,
    itemContent: @Composable (T) -> Unit
) {
    Column {
        list.forEach { item ->
            itemContent(item)
        }
    }
}

2. 替换原有条件分支的调用逻辑

when (tabToDisplay) {
    TabCategory.1 -> CommonSection(
        list = listOf<Object1>()
    ) { item ->
        // 传入Object1对应的条目组件
        UiItem1(item)
    }
    TabCategory.2 -> CommonSection(
        list = listOf<Object2>()
    ) { item ->
        // 传入Object2对应的条目组件
        UiItem2(item)
    }
}

可选优化 #

如果列表数据量较大，可直接将通用组件内的Column替换为LazyColumn获得条目复用能力，外层调用逻辑无需改动。

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