使用者可透過清單功能,從 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
,請使用 GitHub 上 Horologist 提供的 RotaryWithSnap
。