在深入詳解 Jetpack Compose | 優(yōu)化 UI 構(gòu)建 中谷歌介紹了為什么要設(shè)計 Jetpack Compose 來完成原生 Android 的開發(fā)，如今 Jetpack Compose for Desktop 的誕生，也說明了 Google 對 Compose 開發(fā)的認(rèn)可和投入。

2020年11月5日 Jetpack Compose for Desktop 終于發(fā)布了第一個里程碑版本，作為新一代的 Kotlin UI 框架，Jetpack Compose 可快速地構(gòu)建高性能和美觀的用戶界面。

image

更輕松桌面 UI 開發(fā)

Compose for Desktop 提供了聲明式和響應(yīng)式的方法，通過使用 Kotlin 來創(chuàng)建用戶界面，它的 API 參考了其他現(xiàn)代框架（如 React 和Flutter ）。從本質(zhì)上講 Compose for Desktop 允許開發(fā)者通過組合函數(shù)在代碼中聲明桌面 UI，并且它會自動響應(yīng)應(yīng)用的狀態(tài)同步。

該項目是基于 Google 的 Jetpack Compose ，Jetpack Compose 一個用于在 Android 的 UI開發(fā)工具包，Compose for Desktop 可以讓在 Android上使用 Jetpack Compose 的能力直接轉(zhuǎn)移到 Compose for Desktop ，反之亦然。

由 Compose for Desktop 提供的所有核心 API 都與移動端的相同，包括修飾符、UI元素或布局單元等待。實(shí)際上 Compose for Desktop 的核心是與 Jetpack Compose 合作開發(fā)的，以確這兩種技術(shù)可以一起發(fā)展，這也使得在桌面和 Android 之間 UI 實(shí)現(xiàn)共享成為可能。

Compose for Desktop 的入門很簡單，設(shè)置項目依賴關(guān)系后，開發(fā)者就可以簡單的使用幾行代碼來表達(dá)一個簡單的有狀態(tài)用戶界面，并且有現(xiàn)成的 Material Design 元素庫可以幫助快速創(chuàng)建 UI。

import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.material.*
import androidx.compose.runtime.*

fun main() = Window(title = "Compose for Desktop") {
   var count by remember { mutableStateOf(0) }
   MaterialTheme {
       Button(onClick = { count++ }) {
           Text(if (count == 0) "Hello World" else "Clicked $count!")
       }
   }
}

[圖片上傳失敗...(image-88127b-1604643331045)]

但是 Compose for Desktop 不僅僅是UI元素，它基本上擁有的功能都可以在 Android 對應(yīng)版本中找到。

桌面特定的API

為了讓開發(fā)者的應(yīng)用能夠集成其他的桌面 UI，Compose for Desktop 附帶了桌面特有的API，這些 API 主要是用于特定的桌面功能，它們的結(jié)構(gòu)與其他 Compose API 一樣，可讓開發(fā)者的應(yīng)用程序?qū)κ髽?biāo)指針等事件做出反應(yīng)，查詢和操做應(yīng)用的窗口大小和位置，創(chuàng)建任務(wù)欄圖標(biāo)或菜單欄條目等。

fun main() {
   Window {
       var windowSize by remember { mutableStateOf(IntSize.Zero) }
       var windowLocation by remember { mutableStateOf(IntOffset.Zero) }
       AppWindowAmbient.current?.apply {
           events.onResize = { windowSize = it }
           events.onRelocate = { windowLocation = it }
       }
       Text(text = "Location: ${windowLocation}\nSize: ${windowSize}")
   }
}

[圖片上傳失敗...(image-1094f3-1604643331045)]

Google 希望這些 Desktop API 能盡快涵蓋所有相關(guān)功能，為此這里需要了解目前版本中最缺少哪些集成，因此 Google 可以優(yōu)先考慮這些接口的更新，歡迎反饋到：https://blog.jetbrains.com/cross-post/jetpack-compose-for-desktop-milestone-1-released/

快速遷移集成

就像 Kotlin 本身一樣，Compose for Desktop 也遵循簡單操作性和平穩(wěn)遷移的理念，這樣 Compose for Desktop 可以與 Swing 和 AWT集成在一起，這樣開發(fā)者的 Compose for Desktop 應(yīng)用程序就可以解鎖這些 Java 的圖形API，該集成還允許開發(fā)者逐漸將使用這些框架的應(yīng)用程序遷移到 Compose for Desktop 。

fun main() = Window(title = "JFrame properties") {
   var alwaysOnTop by remember { mutableStateOf(false) }
   onCommit(alwaysOnTop) {
       val jFrame = AppManager.focusedWindow?.window
       jFrame?.let {
           // Use JFrame-specific methods
           it.isAlwaysOnTop = alwaysOnTop
       }
   }
   MaterialTheme {
       Column {
           Button(onClick = { alwaysOnTop = !alwaysOnTop }) {
               Text("Toggle always on top")
           }
       }
   }
}

[圖片上傳失敗...(image-8e6c1a-1604643331045)]

為了讓開發(fā)更具備靈活性，Google 還公開了本機(jī) Skia 圖形庫提供的 API 部分，該 API 支持Compose for Desktop 進(jìn)行底層渲染，從而使開發(fā)者可以完全控制應(yīng)用程序的渲染方式。

學(xué)習(xí) Compose for Desktop

如果要嘗試一下，推薦通過閱讀閱讀入門教程，該教程介紹了如何設(shè)置和運(yùn)行由Compose for Desktop 所需的基本步驟，另外在這里也可以查看的其他教程，其中涵蓋了一系列主題，例如：操作圖像、處理鼠標(biāo)事件以及發(fā)送桌面通知等等。

這些內(nèi)容都可以在這里找到：https://jetbrains.com/lp/compose/?_ga=2.7908593.2107796495.1604632959-1270161530.1604632959

Android 開發(fā)人員門戶是 Jetpack Compose 的主要學(xué)習(xí)材料的來源，該門戶提供了很多有關(guān)核心API的概念的明，這些概念也隨著 Compose for Desktop 一起提供，有關(guān) Compose 的模型及其基本API的概述可以看Jetpack Compose Pathway，其中包括了文章，視頻等內(nèi)容主題。

如果想要了解更復(fù)雜的 Compose for Desktop 例子，可以查看 Google 的演示應(yīng)用程序，Demo 還包括了如何使用 Kotlin Multiplatform 在桌面和Android之間共享用戶界面的例子。

image

發(fā)行前注意事項

這是 Compose for Desktop 的第一個里程碑版本，這意味著開發(fā)者可能會遇到各種各樣的問題，而在第一個穩(wěn)定版本發(fā)布之前，Compose for Desktop 提供的某些API可能仍會更改，當(dāng)然 Gogole 也在努力爭取第一個穩(wěn)定且可投入生產(chǎn)的版本。

提供反饋意見

里程碑版本是開發(fā)者提供反饋?zhàn)钪匾臅r間，因為它會促使 Google 能夠在穩(wěn)定版本發(fā)布之前解決關(guān)鍵問題或包含其他功能，如果在使用 Compose for Desktop 時遇到任何問題，或者發(fā)現(xiàn)桌面專用的 API 尚未涵蓋的任何例子，請在項目的 issue 中告知：https://github.com/JetBrains/compose-jb/issues 。

如果還想與團(tuán)隊的成員交談，Google 也邀請大家加入有關(guān) Kotlin Slack 的討論。在 ＃compose-desktop 中，就可以找到有關(guān) Compose for Desktop 的討論，在#compose 中，也可以討論涉及 Android 上的 Compose 和 Jetpack Compose 的問題。

希望你會在使用 Compose for Desktop 建立用戶界面時能夠獲得樂趣！

原本鏈接 ：https://blog.jetbrains.com/cross-post/jetpack-compose-for-desktop-milestone-1-released/