Compose for Wear OS 的清單功能

使用者可透過清單功能,從 Wear OS 裝置上的一組選項中選取所需項目。

由於許多 Wear OS 裝置都採用圓形螢幕,導致使用者難以查看螢幕頂端和底部附近的清單項目,因此,Compose for Wear OS 納入了名為 ScalingLazyColumnLazyColumn 類別版本,藉此支援縮放和淡出效果。使用者只要將項目朝畫面中央移動,即可將其放大並提升不透明度。

以下動畫展示元素在畫面上移動時,大小和透明度的變化:

下列程式碼片段說明如何建立包含各項目文字的清單:

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