参加 Jetpack Compose #AndroidDevChallenge 竞赛即有机会赢取奖品,我们提供 1000 多项奖品,其中包括 Google Pixel 5。了解详情

布局预览

您可以在 Android Studio 中预览 Jetpack Compose 组件,而无需将应用部署到设备或模拟器。您可以对某个可组合函数进行多次预览,每次预览采用不同的宽度和高度限制、字体缩放或主题背景。在您开发应用的过程中,预览会随之更新,帮助您更快地检查更改。

创建基本布局预览

如需创建布局预览,请编写一个不带任何参数的可组合函数,并添加 @Preview 注释。当您构建应用后,预览函数的界面会显示于 Studio 的 Preview 窗格中。

例如,假设您有一个用于向用户显示问候语的可组合函数:

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

如需预览此函数的界面,请编写一个不带参数的封装函数,并向该封装函数添加 @Preview 注释:

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

展示了一个简单的“hello world”可组合函数、一个调用该函数的预览函数以及一个预览窗口,窗口中显示了该预览函数生成的界面。

图 1. 预览窗口显示了由预览函数生成的界面。

如果您点击预览中的界面元素,Studio 会将您转到创建该元素的相应行。例如,如果您在此预览窗口中点击文本“Hello Android!”,Studio 就会将您转到 Greeting() 中创建该文本元素的相应行。

代码发生变化时,点击预览窗口中的刷新按钮 Android Studio Compose 预览刷新按钮 可更新预览。您可能需要重新构建您的项目才能更新预览;预览窗口将说明是否需要这样做。

您可以通过向 @Preview 注释传递参数来自定义预览。例如,默认情况下,预览的标签根据预览函数的名称而定,在本例中为 PreviewGreeting。您可以通过传递 name 参数来更改标签:

@Preview(name = "Android greeting")
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

如需查看可向 @Preview 传递的参数的完整列表,请参阅 @Preview 参考文档。

您可以定义多个预览函数,这些函数会全部一起显示于预览窗口中。例如,您可以编写用于测试各种不同输入内容的函数:

@Preview(name = "Long greeting")
@Composable
fun PreviewLongGreeting() {
    Greeting("my valued friend, whom I am incapable of "
    + "greeting without using a great many words")
}

@Preview(name = "Newline greeting")
@Composable
fun PreviewNewlineGreeting() {
    Greeting("world\nwith a line break")
}

显示了几种预览函数的预览窗口

图 2. 如果定义多个预览函数,其界面会全部显示于同一个预览窗口中。

将预览部署到设备

如需将预览部署到默认设备或模拟器,请点击部署按钮:Android Studio Compose 预览的“部署到设备”按钮。Android Studio 将创建一个包含该函数生成的界面的新 Activity,并将其部署到设备上您的应用中。这样,您无需重新安装整个应用并导航至其该界面所在位置,即可在实际设备上试用该界面。

Android 设备的屏幕截图,显示了一个预览函数

图 3. ComposeLongGreeting() 的预览,该预览已部署到虚拟设备。

互动式预览

Android Studio 提供互动式预览模式。当您处于互动式预览模式下时,您可以点击或输入界面元素,而界面会像在已安装的应用中那样进行响应。如需打开互动式预览,请点击任意预览窗口上的互动式按钮:Android Studio Compose 互动式预览按钮。预览面板将切换为该预览函数的互动模式,直到您退出该模式为止。

例如,请看会响应用户点击的以下函数:

@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
    Button(
        onClick = { updateCount(count + 1) },
        colors = defaultButtonColors(
            backgroundColor = if (count > 5) Color.Green else Color.White
        )
    ) {
        Text("I've been clicked $count times")
    }
}
@Preview
@Composable
fun PreviewCounter() {
    val counterState = remember { mutableStateOf(0) }

    Counter(
        count = counterState.value,
        updateCount = { newCount ->
            counterState.value = newCount
        }
    )
}

此函数的普通预览会向您显示界面元素的布局。但是,如果您点击按钮,按钮不会做出响应,而是由 Studio 将您转到创建该元素的相应行。

与之相比,在互动式预览模式下,当您点击该按钮时,计数器上的计数会递增;当计数达到 6 时,该按钮将变为绿色,响应过程与应用正在运行时相同:

预览窗口,展示了对点击做出响应的互动式预览

图 4. 当预览窗口处于互动模式下时,它会对用户点击做出响应。

注意:互动式预览模式不允许函数与设备存储或网络进行互动。如果您需要测试依赖于此类操作的功能,应提供相应的模拟。