开发适用于不同屏幕尺寸的功能块

应用的功能块应在各种尺寸的 Wear OS 设备上都能正常运行，在有额外空间时应加以利用，同时在较小的屏幕上也能呈现精美外观。本指南提供了有关如何实现这种用户体验的建议。

如需详细了解自适应布局的设计原则，请参阅设计指南。

通过断点提供差异化体验

ProtoLayout Material 库中的布局具有自适应性，可确保元素放置位置和可见性正确无误。不过，在某些情况下，您可能需要调整可见元素的数量，以获得最佳效果。例如，您可能希望在较小的显示屏上显示 3 个按钮，而在较大的显示屏上显示 5 个按钮。

如需实现这种差异化体验，请使用屏幕尺寸断点。在屏幕尺寸超过 225 dp 时显示其他布局：

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

设计指南中介绍了更多机会。

使用预览功能测试不同屏幕尺寸下的功能块

务必针对不同的屏幕尺寸测试布局。将 Tile Preview 注解与 TilePreviewHelper 和 TilePreviewData 类搭配使用：

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

这样一来，您就可以直接在 Android Studio 中预览功能块布局。

如需查看完整示例，请参阅 GitHub 上的计时器功能块示例。