您的应用应在各种尺寸的 Wear OS 设备上都能顺畅运行，充分利用额外的空间（如有），并且在较小的屏幕上也能完美呈现。 本指南提供了实现这种用户体验的建议。
如需详细了解自适应布局的设计原则，请参阅设计指南。
使用 Material 3 构建自适应布局
布局应具有基于百分比的边距。在 Wear Compose Material 3 中，ScreenScaffold 会自动计算基于百分比的内边距，并向其内容 lambda 提供 contentPadding；将此 contentPadding 参数传递给 TransformingLazyColumn。
以下代码段使用 TransformingLazyColumn 组件创建在各种 Wear OS 屏幕尺寸上都非常美观的内容：
val columnState = rememberTransformingLazyColumnState() val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
此示例还演示了 ScreenScaffold 和 AppScaffold。
这些组件在应用和各个屏幕（导航路线）之间进行协调，以确保正确的滚动行为和 TimeText 定位。
对于顶部和底部内边距，还请注意以下事项：
- 使用
Modifier.minimumVerticalContentPadding（例如ListHeaderDefaults.minimumTopListContentPadding和ButtonDefaults.minimumVerticalListContentPadding），以便在这些项显示在列表边缘时，TransformingLazyColumn至少使用建议的顶部和底部内边距。 - 对列表中的第一项使用
ListHeader，而不是普通的Text可组合项。
如需查看完整规格，请参阅 Figma 设计套件。如需了解详情和示例，请参阅：
- Horologist 库 - 提供辅助工具，帮助为 Wear OS 构建经过优化且具有差异化的应用。
- ComposeStarter 示例 - 一个展示本指南中所述原则的示例。
- JetCaster 示例 - 一个更复杂的示例，展示了如何使用 Horologist 库构建可适应不同屏幕尺寸的应用。
在应用中使用滚动布局
在实现屏幕时，请使用滚动布局（如本页前面所示）作为默认选择。这样，无论显示偏好设置或 Wear OS 设备屏幕尺寸如何，用户都可以访问应用的组件。
不同设备尺寸和字体缩放的效果
对话框
对话框也应可滚动，除非有非常充分的理由不这样做。
AlertDialog 组件具有自适应能力，如果内容超出视口高度，默认情况下可滚动。
自定义屏幕可能需要非滚动布局
有些屏幕可能仍适合采用非滚动布局。几个示例包括媒体应用中的主播放器屏幕和健身应用中的锻炼屏幕。
在这些情况下，请查看 Figma 设计套件中提供的规范指南，并使用正确的边距实现可根据屏幕尺寸自适应的设计。
通过断点提供差异化体验
在较大的显示屏上，您可以引入更多内容和功能。如需实现这种差异化体验，请使用屏幕尺寸断点，在屏幕尺寸超过 225 dp 时显示不同的布局：
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
设计指南中展示了更多此类机会。
使用预览功能测试屏幕尺寸和字体大小的组合
Compose 预览可帮助您针对各种 Wear OS 屏幕尺寸进行开发。 同时使用设备和字体缩放预览定义可查看以下内容：
- 屏幕在极端尺寸下的外观，例如，最大字体与最小屏幕搭配。
- 差异化体验在不同断点处的表现。
确保您使用 WearPreviewDevices 和 WearPreviewFontScales 为应用中的所有屏幕实现预览。如需详细了解如何配置 Wear OS 预览、自定义硬件规格和预览滚动列表，请参阅在 Compose for Wear OS 中预览界面。
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
截屏测试
除了预览测试之外，屏幕截图测试还可让您针对一系列现有硬件尺寸进行测试。当您可能无法立即使用这些设备，并且问题可能不会在其他屏幕尺寸上出现时，此功能尤其有用。
屏幕截图测试还有助于您识别代码库中特定位置的回归问题。
我们的示例使用 Roborazzi 进行屏幕截图测试：
@RunWith(ParameterizedRobolectricTestRunner::class) class ComposeListScreenTest( override val device: WearDevice ) : WearScreenshotTest() { override val tolerance = 0.02f @Test fun myScreenTest() = runTest { AppScaffold { ComposeList() } } companion object { @JvmStatic @ParameterizedRobolectricTestRunner.Parameters fun devices() = WearDevice.entries } }
需要注意的一些重要事项：
WearDevice.entries包含大多数热门 Wear OS 设备的定义，以便在具有代表性的屏幕尺寸范围内运行测试。
生成黄金映像
如需为屏幕生成图片，请在终端中运行以下命令：
./gradlew recordRoborazziDebug
验证图片
如需根据现有映像验证更改，请在终端中运行以下命令：
./gradlew verifyRoborazziDebug
如需查看屏幕截图测试的完整示例，请参阅 ComposeStarter 示例。