Jetpack Compose 道具输入

Question

我正在寻找一种优雅的方式来键入可组合函数参数。我习惯了 React，你可以在其中传递一个 props 参数，而不必拥有一百万个参数。

作为参考，什么是最干净的方法来处理这样的事情

interface MyCompProps {
   foo: string
   bar: number
} 

function MyComp(props: MyCompProps) {...}

使用 Compose？

我是否必须创建一个 class 并在构建道具时实例化一个？我使用地图吗？是不是思路不对？

现在我正在做类似

的事情

class ProjectListItemProps(
    val imageUrl: String,
    val projectName: String,
    val createdAt: String
)

@Composable
fun ProjectListItem(props: ProjectListItemProps) {...}

Answer 1

是的。在 Android 中，建议创建数据 classes 以将数据对象表示为实体。

例如，在笔记应用中，您可以创建一个笔记数据 class，如下所示：

data class Note(
    var id: String = "",
    var dateAdded: Long = 0,
    var title: String = "",
    var textContent: String = "",
    var isFavorite: Boolean = false,
)

然后在 compose 中，您可以创建一个代表 UI:

中的注释的可组合项

@Composable
fun Note(note: Note){
    //child composables
}

但是如果参数不代表一个实体，比如是否显示ProgressBar，你不应该把它放在class.

请记住，在 Kotlin 中您可以使用默认参数，然后当您调用函数时，只有当您想要传递一个不同于默认值的值时才传递参数。

示例：

@Composable
fun Page(showProgressBar: Boolean = false){
    //child composables
}

如果你在没有传递任何参数的情况下调用 Page，它不会显示进度条，因为默认情况下 showProgressBar = true。但是如果想显示它你传递 true 来覆盖默认值：

Note() /*progress bar is hidden.*/
Note(showProgressBar = true) /*progress bar is shown*/

Answer 2

我认为检查框架提供的 Composables 的设计是个好主意。例如：

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}

简而言之，是的，这是个好主意，我会用它来对属性进行分组。

Jetpack Compose 道具输入

Jetpack Compose props typing

android

android-jetpack

android-jetpack-compose