多形态设备
多形态设备 · androidx.wear.compose
Wear Compose：围绕可滚动屏幕组织 UIWear 1.7.0-alpha07
用 AppScaffold、ScreenScaffold 和 TransformingLazyColumn 组成 Wear Material 3 页面。
最后更新 2026-08-01
复制即用
@Composable
fun WearList(items: List<String>) {
val state = rememberTransformingLazyColumnState()
val transformation = rememberTransformationSpec()
AppScaffold {
ScreenScaffold(state) { contentPadding ->
TransformingLazyColumn(
state = state,
contentPadding = contentPadding,
) {
items(items) { label ->
Button(
onClick = {},
modifier = Modifier
.fillMaxWidth()
.transformedHeight(this, transformation),
transformation = SurfaceTransformation(transformation),
) { Text(label) }
}
}
}
}
}三个 Scaffold 的职责
| 组件 | 职责 |
|---|---|
AppScaffold | 应用级覆盖层（顶层导航、时间显示位置） |
ScreenScaffold | 单屏滚动状态、时间文字、位置指示器 |
TransformingLazyColumn | 列表项按弧形视口位置变换（缩放/淡出） |
不要只换一个 Wear Button 就认为页面已经适配圆屏——三层结构缺一不可。
屏幕外沿安全区
ScreenScaffold(
state = state,
timeText = { TimeText() },
positionIndicator = { PositionIndicator(state) },
) { contentPadding ->
// contentPadding 已经考虑圆屏边缘
}contentPadding 自动包含屏幕边缘安全区，列表内容不能画到圆弧外。
手势与导航
- 返回手势：
SwipeDismissableNavHost（Wear Compose Navigation）或 Navigation 3 集成。 - 滚动手势：
TransformingLazyColumn自带旋转表冠支持。 - 真机/模拟器验证：返回手势与表冠滚动在手机 Preview 无法验证。
常见陷阱
- 预览不代表真机：圆屏裁剪、表冠手势只能真机验证。
- 内容画到边缘外：不用
ScreenScaffold的 contentPadding。 - 复用手机 Composable：手机页面里
LazyColumn等不感知弧形视口。
要点
- 三层职责：AppScaffold（应用级）/ ScreenScaffold（单屏）/ TransformingLazyColumn（弧形变换）。
contentPadding处理圆屏安全区；位置指示器用 PositionIndicator。- 返回与滚动必须真机/模拟器验证。