如何修改使用PreviewParameter的Compose预览名称

我想用PreviewParameter来预览同一个Composable的不同变体，不想为每种状态单独编写预览函数。

之前的写法（每个变体单独写预览函数） #

@Preview
@Composable
private fun VariantAPreview() {
    // 变体A的预览实现
}

@Preview
@Composable
private fun VariantBPreview() {
    // 变体B的预览实现
}

@Preview
@Composable
private fun VariantCPreview() {
    // 变体C的预览实现
}

改用PreviewParameter后的写法 #

@Preview
@Composable
private fun PreviewAll(@PreviewParameter(Provider::class) data: Data) {
    // 基于传入的data渲染对应变体
}

但问题在于：Android Studio设计视图中，单独函数的预览名称是VariantAPreview、VariantBPreview这类直观的名称；而使用PreviewParameter后，预览名称会变成PreviewAll (data 0)、PreviewAll (data 1)、PreviewAll (data 2)，很难区分不同变体。有没有办法给这些预览设置易识别的自定义名称？

解决方案 #

方法1：重写PreviewParameterProvider的getPreviewName方法 #

自定义PreviewParameterProvider时，重写getPreviewName方法，为每个参数实例指定专属名称，这是最直接的方案。

示例代码：

// 自定义PreviewParameterProvider
class DataPreviewProvider : PreviewParameterProvider<Data> {
    // 提供所有需要预览的Data实例
    override val values = sequenceOf(
        Data(/* 变体A的参数配置 */),
        Data(/* 变体B的参数配置 */),
        Data(/* 变体C的参数配置 */)
    )

    // 为每个索引对应的实例设置预览名称
    override fun getPreviewName(index: Int): String {
        return when(index) {
            0 -> "变体A"
            1 -> "变体B"
            2 -> "变体C"
            else -> super.getPreviewName(index)
        }
    }
}

// 使用自定义Provider的预览函数
@Preview
@Composable
private fun PreviewAll(@PreviewParameter(DataPreviewProvider::class) data: Data) {
    // 渲染你的Composable
}

设置完成后，Android Studio中的预览名称会变为PreviewAll (变体A)、PreviewAll (变体B)、PreviewAll (变体C)，清晰易区分。

方法2：通过CompositionLocalProvider设置预览名称 #

如果无法修改PreviewParameterProvider，可以在预览函数中根据Data实例的特征匹配名称，再通过LocalPreviewInfo设置预览显示名。

示例代码（假设Data是密封类）：

@Preview
@Composable
private fun PreviewAll(@PreviewParameter(Provider::class) data: Data) {
    // 根据Data的类型或特征匹配名称
    val previewName = when(data) {
        is Data.VariantA -> "变体A"
        is Data.VariantB -> "变体B"
        is Data.VariantC -> "变体C"
        else -> "未知变体"
    }

    // 注入预览名称
    CompositionLocalProvider(LocalPreviewInfo provides PreviewInfo(name = previewName)) {
        // 渲染你的Composable
    }
}

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