调试您的 Compose UI

Android Studio 中提供了用于调试 Compose UI 的工具。

布局检查器

布局检查器可让您在模拟器或真机上检查正在运行的应用中的 Compose 布局。您可以使用布局检查器来检查可组合项重新组合或跳过的频率,这有助于识别应用中的问题。例如,某些编码错误可能会导致 UI 过度重新组合,从而导致性能不佳。某些编码错误可能会阻止您的 UI 重新组合,从而阻止您的 UI 更改显示在屏幕上。如果您不熟悉布局检查器,请查看有关如何运行它的指南

获取重新组合计数

在调试 Compose 布局时,了解可组合项何时重新组合对于理解您的 UI 是否正确实现至关重要。例如,如果它重新组合次数过多,您的应用可能正在执行不必要的工作。另一方面,当您预期它们重新组合时却没有重新组合的组件可能会导致意外行为。

当您与应用互动时,布局检查器会显示布局层次结构中离散的可组合项何时重新组合或跳过。在 Android Studio 中,您的重新组合会被高亮显示,以帮助您确定 UI 中可组合项的重新组合位置。

图 1. 布局检查器中高亮显示的重新组合。

高亮显示的部分在布局检查器的图像部分显示可组合项的渐变叠加层,并逐渐消失,以便您了解 UI 中重新组合次数最高的可组合项所在的位置。如果一个可组合项的重新组合频率高于另一个可组合项,则第一个可组合项会收到更强的渐变叠加颜色。如果您双击布局检查器中的可组合项,您将被带到相应的代码进行分析。

图 2. 布局检查器中的组合和跳过计数器。

打开 布局检查器 窗口并连接到您的应用进程。在 组件树 中,布局层次结构旁边会显示两列。第一列显示每个节点的组合次数,第二列显示每个节点的跳过次数。选择一个可组合节点会显示该可组合项的尺寸和参数,除非它是内联函数,在这种情况下无法显示参数。当您从 组件树布局显示 中选择一个可组合项时,您还可以在 属性 窗格中看到类似的信息。

重置计数可以帮助您了解在与应用进行特定互动期间的重新组合或跳过。如果要重置计数,请点击 组件树 窗格顶部附近的 重置

Enable the composition and skip counter in Layout
Inspector

图 3. 在布局检查器中启用组合和跳过计数器。

Compose 语义

在 Compose 中,语义以另一种方式描述您的 UI,使无障碍服务和测试框架能够理解。您可以使用布局检查器检查 Compose 布局中的语义信息。

Semantic information displayed using the Layout Inspector.
图 4. 使用布局检查器显示的语义信息。

选择 Compose 节点时,使用 属性 窗格检查它是否直接声明语义信息、从其子级合并语义,或两者兼有。要快速识别哪些节点包含语义(无论是声明的还是合并的),请使用 组件树 窗格中的 视图选项 下拉菜单并选择 高亮显示语义层。这只会高亮显示树中包含语义的节点,您可以使用键盘在它们之间快速导航。

Compose UI 检查

为了帮助您在 Jetpack Compose 中构建更具适应性和无障碍性的 UI,Android Studio 在 Compose 预览中提供了 UI 检查模式。此功能类似于视图的无障碍扫描器

当您在 Compose 预览中激活 Compose UI 检查模式时,Android Studio 会自动审核您的 Compose UI,并建议改进措施,使您的 UI 更具无障碍性和适应性。Android Studio 会检查您的 UI 是否在不同屏幕尺寸下都能正常工作。在 问题 面板中,该工具会显示它检测到的问题,例如在大屏幕上文本拉伸或颜色对比度低。

要访问此功能,请点击 Compose 预览上的 UI 检查图标

图 5. UI 检查模式的入口。

UI 检查会自动预览您的 UI 在不同配置下的显示效果,并高亮显示在不同配置中发现的问题。在 问题 面板中,当您点击某个问题时,可以看到问题的详细信息、建议的修复方案以及高亮显示问题区域的渲染效果。

图 6. 正在运行的 UI 检查模式。