Compose for Wear OS 的清單功能

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

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

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

以下程式碼片段說明如何使用 Horologist 版本的 ScalingLazyColumn 版面配置建立清單，建立在各種 Wear OS 螢幕大小上呈現最佳效果的內容。舉例來說，以下範例會將必要的邊框間距新增到 ScalingLazyColumn 的 scrollState 中設定的清單第一個和最後一個元素：

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 = { }
            )
        }
    }
}
List.kt

新增貼齊與快速滑過效果

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

如要在 Horologist 的 ScalingLazyColumn 版本中加入這個效果，請將 columnState 的 rotaryMode 參數設為 RotaryWithSnap，如以下程式碼片段所示：

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