从API获取数据时，如何预览带参数的Jetpack Compose布局？

当你的可组合函数需要接收外部参数时，预览工具无法自动生成参数值，因此会触发报错。以下是几种实用的解决方式：

方法一：给参数添加默认模拟数据 #

直接给data参数设置默认值，用模拟的Data对象填充，这样预览工具可以直接调用该函数：

@Preview
@Composable
fun MatchesRow(data: Data = Data(
    // 按需填充Data类的模拟字段，比如：
    id = 1,
    matchName = "英超测试赛",
    // 其他必填字段都需要补上
)) {
    Card(
        modifier = Modifier
            .height(180.dp),
        backgroundColor = MaterialTheme.colors.background
    ) {
        // 这里添加Card内部的UI内容
    }
}

方法二：编写独立的预览专用函数 #

保留原业务函数的纯净性，单独写一个带@Preview注解的函数，在其中传入模拟数据调用原函数：

// 原业务可组合函数，不带预览注解
@Composable
fun MatchesRow(data: Data) {
    Card(
        modifier = Modifier
            .height(180.dp),
        backgroundColor = MaterialTheme.colors.background
    ) {
        // 业务UI逻辑
    }
}

// 预览专用函数
@Preview
@Composable
fun MatchesRowPreview() {
    val mockMatchData = Data(
        id = 1,
        matchName = "英超测试赛",
        // 其他字段
    )
    MatchesRow(data = mockMatchData)
}

方法三：使用@PreviewParameter（Compose 1.2+支持） #

如果需要预览多种数据场景，可以通过@PreviewParameter指定一个参数提供器，让预览工具自动加载多组测试数据：

// 定义参数提供器，返回多组模拟数据
class MatchDataPreviewProvider : PreviewParameterProvider<Data> {
    override val values = sequenceOf(
        Data(id = 1, matchName = "英超测试赛1"),
        Data(id = 2, matchName = "欧冠测试赛2")
    )
}

// 在预览函数中使用参数提供器
@Preview
@Composable
fun MatchesRow(@PreviewParameter(MatchDataPreviewProvider::class) data: Data) {
    Card(
        modifier = Modifier
            .height(180.dp),
        backgroundColor = MaterialTheme.colors.background
    ) {
        // UI逻辑
    }
}

场景选择建议 #

• 快速实现单一场景预览：选方法一
• 希望业务代码与预览逻辑分离：选方法二
• 需要预览多组不同数据的UI表现：选方法三

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