使用者可透過清單功能,從 Wear OS 裝置上的一組選項中選取所需項目。
由於許多 Wear OS 裝置都採用圓形螢幕,導致使用者難以查看螢幕頂端和底部附近的清單項目,因此,Compose for Wear OS 納入了名為 ScalingLazyColumn
的 LazyColumn
類別版本,藉此支援縮放和淡出效果。使用者只要將項目朝畫面中央移動,即可將其放大並提升不透明度。
以下動畫展示元素沿著螢幕移動時,大小和透明度會如何變化:
下列程式碼片段說明如何建立包含各項目文字的清單:
val contentModifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
@Composable
fun WearApp() {
WearAppTheme {
// Hoist the list state to remember scroll position across compositions.
val listState = rememberScalingLazyListState()
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
autoCentering = AutoCenteringParams(itemIndex = 0),
state = listState
) {
item { TextItem(contentModifier, stringResource(R.string.first)) }
item { TextItem(contentModifier, stringResource(R.string.second)) }
}
}
}
@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
Text(
modifier = modifier,
textAlign = TextAlign.Center,
text = contents
)
}
新增貼齊與快速滑過效果
您可以針對使用者套用至 ScalingLazyColumn
物件的手指手勢,新增貼齊與快速滑過效果。這種效果可讓使用者更精準地瀏覽清單項目,也可讓他們更快速地瀏覽較長清單。
如要在應用程式的清單或挑選器中加入這個效果,請在 ScalingLazyColumn
定義中加入 flingBehavior
參數,如以下程式碼片段所示:
ScalingLazyColumn(
modifier = modifier ...,
flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
state = listState,
snapOffset = 0
// Exponential decay by default. You can also explicitly define a
// DecayAnimationSpec.
) {
// Contents of the list here.
}
如要在使用者與旋轉錶盤互動時,將類似的貼齊和快速滑過效果套用至 ScalingLazyColumn
,請使用 RotaryWithSnap
(可在 GitHub 上的 Horologist 中取得)。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- Compose for Wear OS 程式碼研究室
- 清單和格線
- 在 Compose 中使用 View