所有数据均摘抄自官网，自用记录

Compose 工具

Android Studio 引入了许多专用于 Jetpack Compose 的新功能。它支持使用代码优先方法，同时提高了开发者的工作效率，因为开发者不必在设计界面或代码编辑器之间二选一。

Compose 不依赖 View 来呈现其可组合项这种架构方法，Android Studio 为 Jetpack Compose 提供了扩展功能，让其不必像 Android View 一样打开模拟器或连接到设备，从而加快了开发者实现其界面设计的迭代过程。

debugImplementation "androidx.compose.ui:ui-tooling:1.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"

可组合项预览

可组合项由函数定义，并使用 @Composable 进行注解：

@Composable
fun testComposable() {
    Text("Hello World")
}

实现此可组合项的预览 @Composable 和 @Preview 进行注解的可组合项，便可以达到可预览效果

@Preview
@Composable
fun ComposablePreview() {
    testComposable()
}

`@Preview` 功能

LocalInspectionMode

LocalInspectionMode CompositionLocal 来确认可组合项是否正在预览中呈现。这可让您执行诸如在预览窗口中显示占位符图片之类的操作，而不是显示实际数据。如果可组合项在预览中呈现，LocalInspectionMode.current 的结果为 true。

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

互动模式

互动模式被隔离在沙盒环境中,预览中点击元素并输入用户输入；预览甚至还可以播放动画

限制

无法访问网络
无法访问文件
有些 Context API 不一定完全可用

需要手动启动

部署预览

点击 @Preview 注解旁边或预览顶部的 Deploy to Device 图标，Android Studio 会将该 @Preview 部署到连接的设备或模拟器上。

Multipreview 注解

使用 Multipreview 时，您可以定义一个注解类，该类本身可具有多个采用不同配置的 @Preview 注解。将此注解添加到一个可组合函数后，系统会自动同时呈现所有不同的预览。例如，您可以使用此注解同时预览多个设备、字体大小或主题，而无需为每一个可组合项重复这些定义。

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

定义多个注解类，可以在预览界面进行多种样式的编写，都是独立运行的

代码导航和可组合项大纲

您可以将鼠标悬停在预览上，以查看其中包含的可组合项的大纲。点击可组合项大纲会触发您的编辑器视图，从而导航到其定义

复制 @Preview 呈现

通过右键点击呈现的每个预览，即可将其作为图像来复制。

设置背景颜色

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)

默认情况下，您的可组合项将以透明背景来显示。如需添加背景，请添加 showBackground 和 backgroundColor 参数。请注意，backgroundColor 是 ARGB Long，而不是 Color 值：

尺寸

@Preview(widthDp = 50, heightDp = 50)

默认情况下，系统会自动选择 @Preview 尺寸来封装其内容。如需手动设置尺寸，可以添加 heightDp 和 widthDp 参数。请注意，这些值已解释为 Dp，您无需在值末尾添加 .dp：

语言区域

@Preview(locale = "fr-rFR")

如需测试不同的用户语言区域，您需要添加 locale 参数：

系统界面

@Preview(showSystemUi = true)

如需在预览中显示状态栏和操作栏，请添加 showSystemUi 参数：

@PreviewParameter

您可以使用 @PreviewParameter 注解来添加参数，以将示例数据传递给某个可组合项预览函数。

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

如需提供示例数据，请创建一个可实现 PreviewParameterProvider 并以序列形式返回示例数据的类。

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

您可以为多个预览使用相同的提供程序类。如有必要，可通过设置 limit 参数来限制呈现的预览数量。

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

界面模式

参数 uiMode 可接受任意 Configuration.UI_* 常量，并允许您相应地更改预览的行为。例如，您可以将预览设置为夜间模式，看看主题如何响应。

编辑器操作

实时模板

Android Studio 添加了下面这些与 Compose 相关的实时模板，您可以通过输入相应的模板缩写来输入代码段，以实现快速插入：

comp，用于设置 @Composable 函数
prev，用于创建 @Preview 可组合函数
paddp，用于以 dp 为单位添加 padding 修饰符
weight，用于添加 weight 修饰符
W、WR、WC，用于通过 Box、Row 或 Column 容器设置当前可组合项的呈现效果

边线图标

边线图标是边栏中可见的上下文操作，位于行号旁边。Android Studio 引入了多个 Jetpack Compose 专用边线图标，以便开发者更轻松地使用。

颜色选择器

无论是在可组合项内部还是外部定义颜色，边线上都会显示其预览。您可以点击颜色，通过颜色选择器进行更改

图像资源选择器

无论是在可组合项内部还是外部定义可绘制对象、矢量或图像，边线上都会显示其预览。您可以点击它，通过图像资源选择器进行更改

迭代代码开发

实时修改字面量

Android Studio 可以实时更新在预览、模拟器和实体设备中的可组合项中使用的一些常量字面量。下面是一些受支持的类型：

Int
String
Color
Dp
Boolean

通过“Live Edit of Literals”界面指示器启用字面量修饰功能，无需进行编译即可查看触发实时更新的常量字面量：

注意：“Live Editing of Literals”界面指示器会显示在 Code/Split/Design 旁边，前提是与模拟器或实体设备上正在运行的应用保持有效连接

实时编辑

Apply Changes

Apply Changes 可让您更新代码和资源，而不必将应用重新部署到模拟器或实体设备上，不过，这项功能存在一些限制。

每当您添加、修改或删除可组合项时，您只需点击一下此按钮，即可更新应用，而不必重新部署：

布局检查器

借助布局检查器，您可以在模拟器或实体设备上检查正在运行的应用中的 Compose 布局。

获取重组次数

您可以使用布局检查器检查某个可组合项的重组频率或跳过重组的频率。如果界面呈现效果不佳，通常是因为出现编码错误，导致界面过度重组。另一方面，某些编码错误可能会在界面需要重组时阻止其重组，这意味着界面更改将不会呈现在屏幕上。跟踪重组有助于发现这两类问题。

如需跟踪重组，请在视图选项中启用 Show Recomposition Counts：

动画

Android Studio 允许您从动画预览中检查动画。如果您在可组合项预览中描述了动画效果，则可以检查每个动画值在给定时间点的确切值，并且可以暂停、循环播放、快进或放慢动画，以便在动画过渡过程中调试动画：

动画预览会自动检测可检查的动画，即带有 Start Animation Inspection 图标 “Run”图标的动画

动画预览目前支持 [updateTransition] API。如需将动画预览与 updateTransition 搭配使用，请使用 Compose 版本 1.0.1 或更高版本。

启用实验性功能

有些功能只有在 Android Studio 偏好设置的“Experimental”部分中手动启用后才能使用：File > Settings > Experimental（在 Mac 上：Android Studio > Preferences > Experimental）。

Android Compose学习 工具