布局预览

您可以在 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() 中创建该文本元素的相应行。

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

您可以通过向 @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 将创建一个包含该函数生成的界面的新 Activity，并将其部署到设备上您的应用中。这样，您无需重新安装整个应用并导航至其该界面所在位置，即可在实际设备上试用该界面。

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

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

互动式预览

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

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

@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. 当预览窗口处于互动模式下时，它会对用户点击做出响应。