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

上個月，我們釋出了Jetpack Compose for Desktop第一個里程碑版本的正式版，這是我們現代宣告式UI框架的第一個迭代版本。我們很高興Kotlin社群已向Compose for Desktop敞開懷抱。看到人們將他們的安卓應用程式遷移到桌面，聞名的應用程式都已被重新實現以及通過Compose for Desktop帶來了全新的體驗，這真是令人鼓舞。

VISIT THE COMPOSE FOR DESKTOP LANDING PAGE

之後，我們一直在為下一個版本而努力。 今天，我們將釋出Compose for Desktop第二個里程碑版本，致力於更好的開發體驗和互操作性。 伴隨著一個新的專案嚮導，並提高了Compose for Desktop與不同作業系統和構建系統的相容性，引入了新的程式碼重用功能，並修復了許多錯誤。

在這篇博文中，我們想向你介紹該版本的一些亮點。 如果想更深入瞭解，也可以在這裡檢視完整的更新日誌。

快速入門嚮導

為了能更快地構建出色的使用者介面，我們在IntelliJ IDEA 2020.3中新增了一個專案嚮導模板。 現在，建立桌面Compose應用程式將更加輕鬆：通過File | New | Project…建立新專案，選擇Kotlin嚮導內”Compose for Desktop”分類中可用的模板之一，然後開始構建應用程式，而無需自己編寫Gradle配置！

相容性增強

Compose for Desktop第二個里程碑版本引入了對macOS 10.13和10.14(在M1中已經支援10.15及更高版本)的支援。 以前，針對那些作業系統版本，要求使用者自行構建Compose for Desktop所使用的圖形庫Skiko。 我們還增加了對Gradle最新版本——Gradle 6.6和6.7的支援。

面向下一代Mac的Compose for Desktop也已經面世：通過它構建的應用程式現在可以在Apple Silicon本地執行了！你的應用程式現在可直接在Apple基於ARM的硬體(例如M1)上執行，而無需依賴於Rosetta 2的動態轉換。

在Swing應用程式中嵌入Compose for Desktop

簡單的互操作性是Jetpack Compose和Compose for Desktop的核心價值之一。Milestone 2新增了一種叫ComposePanel的新機制，你可以將Compose UI無縫地新增到基於Jwing的容器(如JFrame)中。 這使你可以在基於Swing的環境中逐步試驗並採納Compose for Desktop，而不必完全替換現有的使用者介面。

在下面的示例中，你可以快速看到一個ComposePanel的實際演示：它遵循其父JFrame的佈局，並允許通過Swing和Compose中實現的控制元件來修改狀態。

val leftClicks = mutableStateOf(0)
val rightClicks = mutableStateOf(0)

fun main() {
   val window = JFrame()
   val composePanel = ComposePanel()
   with(window) {
       defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE
       title = "SwingComposeWindow"
       contentPane.add(actionButton("Left Swing") { leftClicks.value++ }, BorderLayout.WEST)
       contentPane.add(actionButton("Right Swing") { rightClicks.value++ }, BorderLayout.EAST)
       contentPane.add(composePanel, BorderLayout.CENTER)
       composePanel.setContent { ComposeContent() }
       setSize(800, 600)
       isVisible = true
   }

fun actionButton(text: String, action: (() -> Unit)? = null): JButton =
   JButton(text).apply { addActionListener { action?.invoke() } }

@Composable
fun ComposeContent() {
   Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
       Row {
           Counter("Left", leftClicks)
           Spacer(modifier = Modifier.width(25.dp))
           Counter("Right", rightClicks)
       }
   }
}

@Composable
fun Counter(text: String, counter: MutableState<Int>) {
// . . .

請檢視倉庫裡將Compose for Desktop整合到基於Swing的應用程式中的教程，以獲取更詳細的資訊。

請注意，目前不支援反向整合(將Swing元件新增到Compose for Desktop專案中)。

支援Android XML圖示

從里程碑第二個版本開始，Compose for Desktop現在還支援Android的基於XML的向量影像(稱為vector drawables)，這讓你可以無需調整便能在桌面應用程式中渲染這些影像。 也意味著你可以在面向Android和桌上型電腦的跨平臺應用程式中將向量圖作為公共資源共享。

import androidx.compose.desktop.Window
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.vectorXmlResource

fun main() {
    Window {
        Image(
            imageVector = vectorXmlResource("images/compose.xml"),
            modifier = Modifier.fillMaxSize()
        )
    }
}

有關如何在Compose for Desktop中使用Android XML圖示的最新資訊(包括示例XML影像檔案)，請檢視影像和應用內圖示操作教程中的相關部分。

預釋出備忘

這是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建立優秀的使用者介面！