作者 / 開發者關係工程師 Jeremy Walker
在今年的 Google I/O 大會 上，我們宣佈將 Jetpack Compose 的優秀特性引入 Wear OS。在順利發佈多個 alpha 版本之後，Wear OS 版 Compose 現已推出開發者預覽版。
Compose 能 簡化並加速 UI 開發，Wear OS 版 Compose 也是如此，藉助內置的 Material You 支持，您可以用更少的代碼構建更精美的應用。
除此之外，您在使用 Jetpack Compose 構建移動應用的經驗，也可以直接運用在 Wear OS 版本上。就像在移動設備上一樣，歡迎您立即着手測試，我們也希望在發佈 Beta 版前，將您的 反饋 納入庫的早期迭代中。
本文將回顧我們構建的幾個主要可組合項，並介紹幫助您開始使用的多種資源。
現在就開始吧！
依賴項
您對 Wear 設備作出的大部分更改都將位於頂部 架構分層。
這就意味着面向 Wear OS 設計時，您搭配 Jetpack Compose 使用的許多依賴項不會發生變化。例如，UI、運行時間、編譯器和動畫依賴項都將保持不變。
不過，您需要使用合適的 Wear OS Material、導航及基礎開發庫，這與您之前在移動應用中所使用的開發庫是不一樣的。
下方是相關對比，可幫助您區分兩者差異:
| Wear OS 依賴項 (androidx.wear.*) | 對比 | 移動依賴項 (androidx.)* |
|---|---|---|
| androidx.wear.compose:compose-material | 替換 | androidx.compose.material:material¹ |
| androidx.wear.compose:compose-navigation | 替換 | androidx.navigation:navigation-compose |
| androidx.wear.compose:compose-foundation | 額外添加 | androidx.compose.foundation:foundation |
1. 開發者可以繼續使用其他與 Material 相關的開發庫，如 Material 漣漪和通過 Wear Compose Material 開發庫進行擴展的 Material 圖標。
儘管從技術上說，可以在 Wear OS 上使用移動依賴項，但我們還是建議您使用專用於 Wear 的版本以獲取最佳體驗。
注意: 我們將在未來版本中添加更多 Wear 可組合項。如果您認爲有任何遺漏，歡迎與我們分享。
下面是一份示例 build.gradle 文件:
// Example project in app/build.gradle file
dependencies {
// Standard Compose dependencies...
// Wear specific Compose Dependencies
// Developer Preview starts with Alpha 07, with new releases coming soon.
def wear_version = "1.0.0-alpha07"
implementation "androidx.wear.compose:compose-material:$wear_version"
implementation "androidx.wear.compose:compose-foundation:$wear_version"
// For navigation within your app...
implementation "androidx.wear.compose:compose-navigation:$wear_version"
// Other dependencies...
}
在添加了正確的 Wear Material、基礎及導航依賴項後，您就可以着手開始了。
可組合項
我們來了解一些可以立即着手使用的可組合項。
一般來說，許多相當於移動版本的 Wear 可組合項可使用相同代碼。樣式 顏色、排版及使用 MaterialTheme 的形狀的代碼亦如此。
例如，要創建 Wear OS 按鈕，您的代碼如下所示:
Button(
modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
onClick = { /*...*/ },
enabled = enabledState
) {
Icon(
painter = painterResource(id = R.drawable.ic_airplane),
contentDescription = "phone",
modifier = Modifier
.size(24.dp)
.wrapContentSize(align = Alignment.Center),
)
}
以上代碼與移動端代碼十分相似，但該庫創建了 Wear OS 優化版本的按鈕，即由 ButtonDefaults 確定大小的圓形按鈕，以遵循 Wear OS Material 準則。
以下是開發庫中一些可組合項的示例:
除此之外，我們還引入了許多可提升 Wear 體驗的全新可組合項:
我們還爲列表提供了一個針對 Wear 優化的可組合項 ScalingLazyColumn，擴展了 LazyColumn並添加了縮放和透明度更改，以更好地支持圓形界面。您可在下方應用中看到，內容在屏幕頂部和底部被縮減和淡化，以提高可讀性:
查看代碼，您可看到代碼與 LazyColumn 相同，只是名稱不同。
val scalingLazyListState: ScalingLazyListState =
rememberScalingLazyListState()
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(6.dp),
state = scalingLazyListState,
) {
items(messageList.size) { message ->
Card(/*...*/) { /*...*/ }
}
item {
Card(/*...*/) { /*...*/ }
}
}
滑動關閉
Wear 有自己的 Box 版本，即 SwipeToDismissBox。此版本添加了對開箱即用的滑動關閉手勢的支持 (類似於移動設備中的返回按鈕/手勢)。
下面是代碼的一個簡單示例:
// Requires state (different from Box).
val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
modifier = Modifier.fillMaxSize(),
state = state
) { swipeBackgroundScreen ->
// Can render a different composable in the background during swipe.
if (swipeBackgroundScreen) {
/* ... */
Text(text = "Swiping Back Content")
} else {
/* ... */
Text( text = "Main Content")
}
}
下面是更爲複雜的一個示例:
導航
最後，我們還提供了導航可組合項 SwipeDismissableNavHost，該可組合項與移動設備中 NavHost 的工作原理很像，不過也支持開箱即用的滑動關閉手勢 (實際在後臺使用 SwipeToDismissBox)。下面是一個示例 (代碼)。
Scaffold
Scaffold 提供了佈局結構，以幫助您像移動設備一樣，用常見模式排列屏幕，但並非應用欄、懸浮操作按鈕 (FAB) 或抽屜式導航欄等模式。Scaffold 可支持 Wear 專屬佈局，並提供時間、曲線文本樣式及滾動/位置指示器等頂層組件。
這部分代碼 與您在移動應用上使用的代碼十分相似。
開始使用吧！
我們很高興將 Jetpack Compose 引入 Wear OS，使手錶開發更加快捷輕鬆。如要直接體驗並創建應用，歡迎查看我們的 快速入門指南。
若想查看可行示例 (簡單與複雜皆有)，您可以訪問 我們的示例 repo:
您的反饋有助於我們在開發者預覽版中增加和改進 API，歡迎您向我們 分享您的反饋，或 加入 Slack #compose-wear 頻道與我們分享！也歡迎您持續關注 "Android 開發者" 微信公衆號瞭解更多最新內容。
歡迎您 點擊這裏 向我們提交反饋，或分享您喜歡的內容、發現的問題。您的反饋對我們非常重要，感謝您的支持！