Jetpack Compose 道具打字答案

【问题标题】：Jetpack Compose props typingJetpack Compose 道具打字
【发布时间】：2021-04-22 16:27:19
【问题描述】：

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

作为参考，最干净的方法是什么

interface MyCompProps {
   foo: string
   bar: number
} 

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

使用 Compose？

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

现在我正在做类似的事情

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

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

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

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

例如，在笔记应用程序中，您将创建一个笔记数据类，如下所示：

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

然后在 compose 中，您可以创建一个代表 UI 中的笔记的 composeable：

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

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

请记住，在 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*/

【讨论】：

【解决方案2】：

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

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

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

【讨论】：