Compose for Wear OS 的清單功能

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

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

以下動畫展示元素沿著螢幕移動時,大小和透明度會如何變化:

下列程式碼片段顯示如何使用 Horologist 的 「ScalingLazyColumn版面配置的版本, 在 Wear OS 螢幕上的顯示效果良好,例如 以下範例會在第一個和最後一個元素中新增必要的邊框間距 列在 ScalingLazyColumnscrollState 中設定的清單:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}

新增貼齊與快速滑過效果

您可以針對使用者套用至 ScalingLazyColumn 物件的手指手勢,新增貼齊與快速滑過效果。這種效果可讓使用者更精準地瀏覽清單項目,也可讓他們更快速地瀏覽較長清單。

如要在 Horologist 版本的「ScalingLazyColumn中加入這個效果,請 將 columnStaterotaryMode 參數設為 RotaryWithSnap,如以下程式碼片段所示:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}