选择显示预览的设备，jetpack compose

Question

在View系统中我们可以为不同的设备选择XML预览，但是我找不到为Jetpack Compose选择预览设备的方法。我们如何在使用 Jetpack Compose 时为不同设备设置预览？

Answer 1

你可以这样做

@Preview(device = Devices.PIXEL_2_XL)
@Composable
fun DefaultPreview() {
    MyApplicationFooTheme {
        Greeting("Android")
    }
}

可用设备列表在这里

object Devices {
    const val DEFAULT = ""

    const val NEXUS_7 = "id:Nexus 7"
    const val NEXUS_7_2013 = "id:Nexus 7 2013"
    const val NEXUS_5 = "id:Nexus 5"
    const val NEXUS_6 = "id:Nexus 6"
    const val NEXUS_9 = "id:Nexus 9"
    const val NEXUS_10 = "name:Nexus 10"
    const val NEXUS_5X = "id:Nexus 5X"
    const val NEXUS_6P = "id:Nexus 6P"
    const val PIXEL_C = "id:pixel_c"
    const val PIXEL = "id:pixel"
    const val PIXEL_XL = "id:pixel_xl"
    const val PIXEL_2 = "id:pixel_2"
    const val PIXEL_2_XL = "id:pixel_2_xl"
    const val PIXEL_3 = "id:pixel_3"
    const val PIXEL_3_XL = "id:pixel_3_xl"
    const val PIXEL_3A = "id:pixel_3a"
    const val PIXEL_3A_XL = "id:pixel_3a_xl"
    const val PIXEL_4 = "id:pixel_4"
    const val PIXEL_4_XL = "id:pixel_4_xl"

    const val AUTOMOTIVE_1024p = "id:automotive_1024p_landscape"
}

Answer 2

要添加到 @Francesc 的答案，您还可以创建一个注释类并列出具有不同屏幕尺寸/密度的不同设备设置。如果您需要检查手机、平板电脑等不同设备上的一切情况，这会非常方便。

@Preview(name = "phone", device = "spec:shape=Normal,width=360,height=640,unit=dp,dpi=480")
@Preview(name = "pixel4", device = "id:pixel_4")
@Preview(name = "tablet", device = "spec:shape=Normal,width=1280,height=800,unit=dp,dpi=480")
annotation class DevicesPreview

然后在您的可组合项中您可以使用：

@DevicesPreview
@Composable
fun ExampleComposablePreview() {
    ...
}

在此示例中，您将看到一个小屏幕设备和一台平板电脑，但它是完全可定制的。希望能帮助到你 ：）