Jetpack Compose for Desktop第一個里程碑版本釋出

今天，我們很高興地宣佈Jetpack Compose for Desktop第一個里程碑版本的正式釋出，這是一個面向Kotlin的現代UI框架，讓高效構建美觀的使用者介面更加輕鬆且讓人沉醉。我們邀請你試用這個技術並引領其他人，並熱切期待你的反饋！

瀏覽Compose For Desktop主頁

愉悅的桌面UI開發

Compose for Desktop提供了一種宣告式和響應式的方法來通過Kotlin建立使用者介面，其API受其他現代框架(如React和Flutter)的啟發。從其本質來說，Compose for Desktop允許你通過組合Composable函式來在程式碼中宣告桌面UI。它會自動同步應用程式的狀態和其視角展示。

該專案基於Google的Jetpack Compose，這是一個在Android上進行UI開發的工具包。這樣做的優勢是，你在Android上使用Jetpack Compose的經驗能直接用於Compose for Desktop，反之亦然。Compose for Desktop提供的所有核心API的行為都與其移動版本相似，包括修飾符，UI元素或基礎佈局。實際上，Compose for Desktop的核心是與Google的Jetpack Compose合作開發的，以確保這兩種技術可以共同發展。這也使你可以在臺式和Android之間共享UI實現的重要部分。

Compose for Desktop很容易入門。配置專案依賴關係後，僅僅幾行程式碼便能描述一個簡單的帶狀態使用者介面，並通過豐富的現成Material Design元件庫快速構建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!")
       }
   }
}

但Compose for Desktop不僅限於UI元素，還包括Composable函式以及其他也能在Android對應版本中找到的概念。

桌面特定API

為了讓應用程式能正確構建桌面UI，Compose for Desktop附帶了桌面特定功能的專屬API。它們的結構與其餘Compose API相同，可讓你的應用程式能響應滑鼠事件，查詢和調整應用程式視窗的大小和位置，建立工作列圖示或選單欄條目等。

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}")
   }
}

我們希望這些桌面級API能儘快涵蓋所有相關功能。為此，我們需要了解該里程碑版本中最缺少哪些功能整合，可以優先考慮這些介面的實現。 請在這裡分享你的反饋。

平穩遷移及完整控制

就像Kotlin程式語言本身一樣，Compose for Desktop遵循易於互操作性和平穩遷移的理念。因此，Compose for Desktop 與Swing和AWT 整合到一起，從而為你的Compose for Desktop應用程式解放了這些Java圖形API的強大功能。該整合還允許你逐步將這些框架的應用程式遷移到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")
           }
       }
   }
}

為了達到最大程度的靈活和控制，我們還暴露了Skia圖形庫原生提供的API的重要部分，這些API允許Compose for Desktop進行更低層級的渲染，從而可以完全控制應用程式的渲染方式。

學習Compose for Desktop

希望你能像我們一樣對Compose for Desktop感到驚豔！著手嘗試一下，建議你閱讀入門教程，教程介紹了配置和執行由Compose for Desktop驅動的應用程式所需的基本步驟。你可以從倉庫中瞭解到其他教程，其中涵蓋了一系列主題，例如，操作影像，響應滑鼠事件以及傳送桌面通知。這部分內容的概述可在”Compose for Desktop”主頁上找到。

瀏覽Compose For Desktop主頁

Android開發門戶是與Jetpack Compose相關主題學習材料的重要來源，網站提供了許多概念的解釋，這些概念涉及核心API，而這些API也包含到Compose for Desktop。要大致瞭解Compose的心理模型及其基礎API，請瀏覽只包含10個步驟的Jetpack Compose Pathway，其中包括涵蓋了主題的文章，視訊等內容。

如果你想探索更復雜的Compose for Desktop用例，請檢視我們的演示應用程式，以及包括如何通過Kotlin Multiplatform在桌面和Android之間共享使用者介面的示例。

預釋出備忘

這是Compose for Desktop的第一個里程碑版本。這意味著你可能會遇到一些暫時的小問題或發現某些特性的缺失。還請記住，在第一個穩定版本釋出之前，Compose for Desktop提供的API可能會變更。我們正在致力於第一個穩定且可投入生產的版本，並強烈依賴你的反饋來幫助我們實現這一目標。

反饋和加入討論!

里程碑版本是你向我們提供反饋的最重要階段，因為它使我們能夠在穩定版本釋出之前解決關鍵問題或包含其他特性。如果你在使用Compose for Desktop時遇到任何問題，或者發現桌面特定API尚未涵蓋的用例，請在專案的問題跟蹤器中與我們分享這些用例。

如果你想與其他開發人員和團隊成員交流，我們也邀請你加入有關Kotlin Slack的討論。在#compose-desktop中，可以找到有關Compose for Desktop的討論，在#compose中，你可以討論Android上的Compose和Jetpack Compose的相關主題。

我們希望你在使用Compose for Desktop建立使用者介面時獲得樂趣！