使用者可透過清單功能,從 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 = { } ) } } }
新增貼齊與快速滑過效果
您可以針對使用者套用至 ScalingLazyColumn
物件的手指手勢,新增貼齊與快速滑過效果。這種效果可讓使用者更精準地瀏覽清單項目,也可讓他們更快速地瀏覽較長清單。
如要在 Horologist 版本的「ScalingLazyColumn
」中加入這個效果,請
將 columnState
的 rotaryMode
參數設為
RotaryWithSnap
,如以下程式碼片段所示:
val columnState = rememberResponsiveColumnState( // ... // ... rotaryMode = ScalingLazyColumnState.RotaryMode.Snap ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { // ... // ... } }
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- Compose for Wear OS 程式碼研究室
- 清單和格線
- 在 Compose 中使用 View