重复使用 @Composable 容器作为项目列表

Question

data class object1()

data class object2()

在我的@Composable 屏幕中，我有 2 个选项卡，每个选项卡都显示一个包含项目的列表。

when (tabToDisplay) {
    TabCategory.1-> Section1(list = listOf<object1>())
    TabCategory.2-> Section2(list = listOf<object2>())
}

@Section1 和 @Section2 与

是相同的可组合项

 Column(){
    list.forEach {
       UiItem1()
   //or
       UiItem2()
    }
}

内部的唯一区别是我正在创建的项目类型。

问题：如何简化我的代码，使我的列表对象

只有 1 个 @Composable 部分

Answer 1

为两个模型创建一个父类，比方说ParentObjClazz

保留一个可组合的 @Section，它需要 TabCategory 和 ParentObjClazz

的列表

@Composable
fun Section(tabCategory: TabCategory, list: List<ParentObjClazz>) {
  //...
}

根据 tabCategory 或子 class type 检查

投射对象并填充视图

Answer 2

您可以将通用参数和内容生成器添加到您的 Section:

@Composable
fun<T> Section(list: List<T>, itemContent: @Composable (T) -> Unit) {
    Column(){
        list.forEach {
            itemContent(it)
        }
    }
}

那你可以这样:

when (tabToDisplay) {
    TabCategory.1 -> {
        Section(list = listOf<Object1>()) {
            UiItem1(it)
        }
    }
    TabCategory.2 -> {
        Section(list = listOf<Object2>()) {
            UiItem2(it)
        }
    }
}

p.s。根据 kotlin style guide，类应该以 PascalCase 命名。当你习惯了这一点，它会提高你的开发速度，因为你的眼睛会更容易识别代码中的 variable/class。大多数开发命令也需要它，所以最好马上习惯它。

重复使用 @Composable 容器作为项目列表

Reuse @Composable container for a list of items

android

kotlin

android-jetpack

android-jetpack-compose