支持 PC 、Web 和 Android 的 Compose Multiplatform 進入 Alpha 版本-有解無憂

Compose Multiplatform 的發布標志著使用 Kotlin 開發統一的 UI 支持又邁進了新一步！

基于 Google 發布的 Jetpack Compose Android 1.0 穩定版的前提：

Compose for Desktop 和 Compose for Web 已經升級為 Alpha 版本，它們的版本控制現在在 Compose Multiplatform 下保持一致，從而可以使用相同的 artifacts 構建 Android、Desktop 和 Web UI，
IDE 管理應用 JetBrains Toolbox App 已完成遷移到 Compose for Desktop，
IntelliJ IDEA 和 Android Studio 的新插件通過@Preview注釋可以啟用 Compose for Desktop 的組件預覽，
Compose for Desktop 現在默認使用可組合 API Window ，提供對自適應視窗大小、統一影像資源的新支持，以及對 ARM64 上 Linux 的新平臺支持，允許在 Raspberry Pi 等目標上運行它，
Compose for Web 進一步擴展了 DOM 和 CSS API，

另外在 The Compose Story 中 概述了 Compose 的路徑，并分享了更多宣告式多平臺用戶界面的資訊！

統一 Desktop、Web 和 Android UI 開發

Jetpack Compose 是一個為 Android 構建原生用戶界面的回應式開發 UI 框架，JetBrains 在 Google 的 Jetpack Compose 的基礎上將 Compose 框架拓展到更多新的平臺，

借助 Compose Multiplatform，開發者可以使用和 Android Jetpack Compose 相同的 API 開發 Desktop 和 Web 構建用戶界面，

使用 Kotlin Multiplatform 提供的機制，現在可以針對同一專案中的以下任意組合：

Android (Jetpack Compose)
Desktop
Web

以前 Compose for Desktop 和 Compose for Web 使用不同的 artifacts ，而現在開始它們將統一在一個 Gradle 插件和組件下，這意味著基于 Compose 開發 Android、Desktop 和 Web 用戶界面會更容易，

憑借 Alpha 版本的更新，Compose Multiplatform 提供的 API 已經很接近其最終形態，我們將全力投入 Compose 的開發支持，并期望在 2021 年內能達到 1.0 版本，更多詳細資訊：了解有關 COMPOSE 多平臺的更多資訊

Compose in Production：JetBrains Toolbox 應用

在 JetBrains 現在一些生產應用已經開始采用 Compose，首先是 JetBrains Toolbox App，它是 JetBrains IDE 的管理應用程式，每月活躍用戶超過 800,000，

image.png

在它們的最新版本中，該團隊已將應用程式的實作完全轉換為 Compose for Desktop，在從基于 Electron 的 UI 遷移期間，團隊注意到了 Compose 的許多優勢：

記憶體消耗顯著減少，特別是當應用程式在后臺運行時
安裝程式大小減少了大約 50%
應用整體渲染性能顯著提升

JetBrains Toolbox 團隊負責人 Victor Kropp 也在帖子中分享了他對 Compose for Desktop 的看法：

Compose for Desktop 雖然仍處于早期階段，但已被證實了 Toolbox App 的絕佳選擇，在開發框架同事的支持下，幾乎可以在短時間內重寫整個 UI，這使我們能夠統一開發體驗，因此從業務邏輯到 UI，從應用到服務器，Toolbox 現在 100% 是 Kotlin，

用于 Compose Multiplatform 的新 IntelliJ IDEA 和 Android Studio 插件

在此版本中還發布了一個新的 IDE 插件來支持開發作業：用于 IntelliJ IDEA 和 Android Studio 的 Compose Multiplatform 插件，它與框架的新版本一起發布，并提供額外的功能來幫助用戶界面的開發作業，

第一個版本包括了一項期待已久的功能：能夠直接在 IDE 中預覽 Compose for Desktop 和 Android 組件，甚至無需啟動應用程式，

要顯示@Composable不帶引數的函式預覽，可以將@Preview注釋添加到其定義中，這時候會添加一個小的裝訂線圖示，可以使用它來切換組件的預覽窗格：

image.png

這個新的預覽版可以幫助開發者縮短開發周期，并更輕松地將想法轉化為基于 Compose 的真實設計和布局，

要查找并安裝新插件，請在插件市場中搜索“Compose Multiplatform IDE Support”，或點擊下方直接打開插件頁面：安裝 COMPOSE 多平臺插件

Compose for Desktop 的新增功能

除了將 Compose for Desktop 升級為 Alpha 的一大步之外，在此版本中還改進了其 API 并增加了對新平臺的支持，

默認情況下可組合的視窗 API

在里程碑4桌面版中，我們推出了一個實驗組API：Window，MenuBar和Tray，這些新 API 都使用 @Composable 與應用程式中的其他組件相同的狀態管理、行為和條件呈現概念，

在此版本中，這些可組合版本現在是管理視窗、選單欄和托盤圖示的默認方式，取代了舊的視窗 API，

如果還沒有嘗試過這些新 API，或者只是想了解有關它們提供的行為和功能的更多資訊，可以參考更新的 Compose for Desktop 教程，了解視窗和托盤管理，

自適應視窗大小

有時我們想將某些內容作為一個整體顯示,而在不事先知道將顯示的內容的情況下，這意味著我們不知道它的最佳視窗尺寸，

為了更輕松地開發這些 UI 場景，我們引入了自適應視窗大小功能，通過將視窗的一個或兩個維度設定WindowSize 為 Dp.Unspecified，Compose for Desktop 將自動調整該維度中視窗的初始大小以適應其內容：

fun main() = application {
   val state = rememberWindowState(width = Dp.Unspecified, height = Dp.Unspecified) //automatic size
   Window(
       onCloseRequest = ::exitApplication,
       state = state,
       title = "Adaptive",
       resizable = false
   ) {
       Column(Modifier.background(Color(0xFFEEEEEE))) {
           Row {
               Text("label 1", Modifier.size(100.dp, 100.dp).padding(10.dp).background(Color.White))
               Text("label 2", Modifier.size(150.dp, 200.dp).padding(5.dp).background(Color.White))
               Text("label 3", Modifier.size(200.dp, 300.dp).padding(25.dp).background(Color.White))
           }
       }
   }
}
復制代碼

image.png

連同洗掉視窗（通過undecorated = true 的應用程式Window定義），我們相信這種創建動態大小視窗的新方法，為各種形狀和大小的用戶界面新增了額外的可能性，

可組合視窗選單的附加功能

桌面應用通常帶有豐富而復雜的視窗選單，在此版本中還添加了允許創建豐富選單的其他 API，

它們可以被結構化，通過圖示、快捷方式和助記符來豐富，并集成廣泛使用的復選框和單選串列（單選按鈕）的邏輯：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun MenuBarScope.FileMenu() = Menu("Settings", mnemonic = 'S') {
   Item(
       "Reset",
       mnemonic = 'R',
       shortcut = KeyShortcut(Key.R, ctrl = true),
       onClick = { println("Reset") }
   )
   CheckboxItem(
       "Advanced settings",
       mnemonic = 'A',
       checked = isAdvancedSettings,
       onCheckedChange = { isAdvancedSettings = !isAdvancedSettings }
   )
   if (isAdvancedSettings) {
       Menu("Theme") {
           RadioButtonItem(
               "Light",
               mnemonic = 'L',
               icon = ColorCircle(Color.LightGray),
               selected = theme == Theme.Light,
               onClick = { theme = Theme.Light }
           )
           RadioButtonItem(
               "Dark",
               mnemonic = 'D',
               icon = ColorCircle(Color.DarkGray),
               selected = theme == Theme.Dark,
               onClick = { theme = Theme.Dark }
           )
       }
   }
}
復制代碼

image.png

支持背景關系選單

Compose for Desktop Alpha 支持默認和自定義背景關系選單，可以通過單擊滑鼠右鍵觸發，

對于可選擇的文本和文本欄位，該框架提供了一組默認的背景關系選單項，讓用戶可以復制、粘貼、剪切和選擇，

image.png

@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") {
   DesktopMaterialTheme { //it is mandatory for Context Menu
       val text = remember {mutableStateOf("Hello!")}
       ContextMenuDataProvider(
           items = {
               listOf(ContextMenuItem("Clear") { text.value = "" })
           }
       ) {
               TextField(
                   value = text.value,
                   onValueChange = { text.value = it },
                   label = { Text(text = "Input") }
               )
       }
   }
}
復制代碼

image.png

游標更改行為和指標圖示 API

在此版本的 Compose for Desktop 開始，當滑鼠懸停在文本欄位或可選文本上時，滑鼠指標現在會自動變成文本選擇游標，表示可以進行文本選擇，使應用感覺更加貼近原生，

對于自己的組件，還可以使用新添加的 pointerIcon 修飾符來調整滑鼠指標的行為，可以在將滑鼠懸停在特定組件上時更改指標，

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun ApplicationScope.pointerIcons() {
   Window(onCloseRequest = ::exitApplication, title = "Pointer icons") {
           Text(
               modifier = Modifier.pointerIcon(PointerIcon.Hand),
               text = "Hand icon!"
           )
   }
}
復制代碼

滑鼠可點擊修改器

為了更方便處理在滑鼠單擊時單擊或按下的滑鼠按鈕和鍵盤修飾鍵，這里引入了一個帶有.mouseClickable 修飾符的新 API ，

將此修飾符添加到組件就可以允許指定接收 MouseClickScope 的回呼，它提供了有關事件的完整資訊：

@ExperimentalDesktopApi
@Composable
fun ApplicationScope.mouseClickable() {
   Window(onCloseRequest = ::exitApplication, title = "mouseClickable") {
       Box {
           var clickableText by remember { mutableStateOf("Click me!") }

           Text(
               modifier = Modifier.mouseClickable(
                   onClick = {
                       if (buttons.isPrimaryPressed && keyboardModifiers.isShiftPressed)  {
                           clickableText = "Shift + left-mouse click!"
                       } else {
                           clickableText = "Wrong combination, try again!"
                       }
                   }
               ),
               text = clickableText
           )

       }
   }
}
復制代碼

請注意，這個 API 還不是最終版本，目前正在繼續開發，將來可能會改變它，

統一的影像資源和 Painter

在進一步穩定 Compose for Desktop 的 API 的程序中，現在可以使用統一的 painterResource，而不是將圖形資源分成 svgResource 、 imageResource 、vectorXmlResource ：

@Composable
fun ApplicationScope.painterResource() {
   Window(onCloseRequest = ::exitApplication, title = "Image resources") {
       Column {
           Image(
               painter = painterResource("sample.svg"), // Vector
               contentDescription = "Sample",
               modifier = Modifier.fillMaxSize()
           )
           Image(
               painter = painterResource("sample.xml"), // Vector
               contentDescription = "Sample",
               modifier = Modifier.fillMaxSize()
           )
           Image(
               painter = painterResource("sample.png"), // ImageBitmap
               contentDescription = "Sample",
               modifier = Modifier.fillMaxSize()
           )
       }
   }
}
復制代碼

我們還將 window icon 屬性從 java.awt.Image 更改為androidx.compose.ui.graphics.painter.Painter，因此除了未來的光柵圖形之外，還可以使用基于矢量的圖示：

fun vectorWindowIcon() {
   application {
       var icon = painterResource("sample.svg") //vector icon
       Window(onCloseRequest = ::exitApplication, icon = icon) {
           Text("Hello world!")
       }
   }
}
復制代碼

支持 ARM64 上的 Linux

在此版本中，除了現有的 x86-64 支持之外，Compose for Desktop 還增加了對運行在基于 ARM64 處理器的設備上的 Linux 的支持，

總的來說，現在可以使用 Compose for Desktop 為以下平臺撰寫 UI：

x64 和 arm64 上的 macOS
x64 和 arm64 上的 Linux
x64 上的 Windows

Compose for Web 的新增功能

除了 Compose for Desktop，Compose for Web 也已升級為 Alpha 版本，兩者都已經調整了版本控制方案和發布周期，并通過他們的 DSL 擴展了可用的功能，用于樣式和事件管理，

擴展的 CSS API

我們將繼續改進和完善 API，以通過 CSS 指定樣式規則，這個最新版本在型別安全的 DSL 中增加了對算術運算、設定屬性和影片的更好支持，

CSS 單元的算術運算

現在可以對 CSS 數值執行任意操作，如果對相同單位的兩個值使用運算，將獲得相同單位的新值，如下例所示：

val a = 5.px
val b = 20.px
borderBottom(a + b) // 25px
復制代碼

用于設定屬性的 CSS API

擴展了對所有最常用的 CSS 屬性的型別安全訪問，并涵蓋了大部分的現代瀏覽器支持的所有 CSS 屬性，

這意味著在大多數情況下能夠直接從型別安全的 API 中獲得支持，而對于更奇特的屬性，或尚不支持的屬性，還可以通過property直接獲取鍵和值的函式進行賦值：

borderWidth(topLeft = 4.px, bottomRight = 10%) // type-safe access!

property("some-exotic-property", "hello-friend") // raw property assignment
復制代碼

影片API

為了使基于 Compose 的用戶界面更加動態，現在提供了從型別安全的 DSL 中創建 CSS 影片的選項：

object AppStyleSheet : StyleSheet() {
   val bounce by keyframes {
       from {
           property("transform", "translateX(50%)")
       }

       to {
           property("transform", "translateX(-50%)")
       }
   }

   val myClass by style {
       animation(bounce) {
           duration(2.s)
           timingFunction(AnimationTimingFunction.EaseIn)
           direction(AnimationDirection.Alternate)
       }
   }
}
復制代碼

如果想自己更多地探索這些 API，請務必查看我們新添加的示例，這些示例展示了一些更高級的 CSS 影片和 DOM 操作功能，

事件層次結構、事件偵聽器和新的輸入型別

處理事件，尤其是由輸入組件發出的事件，是對 Compose 應用程式中的更改做出反應的關鍵部分之一，

在此版本中簡化了對事件屬性的訪問，使其更容易定義事件偵聽器，并提供了不同的輸入型別，

事件型別層次結構

以前大多數基于事件的 API 要求直接使用nativeEvent 或 eventTarget 以訪問感興趣的事件的值，

從此版本的 Compose for Web 開始，您現在可以訪問 a SyntheticEvent，其子型別使其更容易訪問所發出事件的相關屬性，

SyntheticMouseEvent 公開坐標;
SyntheticInputEvent公開文本值;
SyntheticKeyEvent公開 click 鍵

舉幾個例子：

Div(attrs = {
   onClick { event -> // SyntheticMouseEvent
       val x = event.x
       val y = event.y
   }
})
復制代碼

這些新事件型別旨在直接提供對在 Native 事件中可用相同的屬性的訪問，而無需訪問 nativeEvent 或直接事件的目標，

輸入

在常規 HTML 中，不同的輸入型別，從文本欄位到復選框都共享同一個標簽——輸入，

為了更輕松地在 Kotlin DSL 中使用這些不同的輸入型別并提供更多相關提示，這里引入了許多用于創建不同型別輸入的附加函式：

TextInput(value = "text", attrs = {
   onInput { } // all these components have attrs same as HTMLInputElement
})
CheckboxInput(checked = false)
RadioInput(checked = false)
NumberInput(value = 0, min = 0, max = 10)
DateInput(value = 2021-10-10")
TelInput(value = "0123456")
EmailInput()
// and other input types
復制代碼

事件監聽器

進一步統一了用于監聽不同輸入型別事件的函式，

輸入偵聽器的輸入型別特定函式 onCheckBoxInput 已被洗掉，現在可以直接使用 onInput 或onChange ，這意味著不再需要搜索正確命名的回呼：

Input(type = InputType.Text, attrs = {
   onInput { event ->
       val inputValue: String = event.value
   }
})

Input(type = InputType.Checkbox, attrs = {
   onInput { event ->
       val isChecked: Boolean = event.value
   }
})
復制代碼

試用 Compose Multiplatform Alpha！

無論是 Web、桌面、Android 還是這三者，我們都希望你能嘗試一下 Compose Multiplatform！

我們預計 Compose Multiplatform 1.0（我們的第一個穩定版本）將于今年晚些時候發布，因此現在是嘗試為您的生產應用評估 Compose Multiplatform 的理想時機，

這里有有許多可用資源：

對于桌面應用程式，可以在Compose for Desktop 教程中找到有關如何開始使用的最新資訊，
對于瀏覽器應用程式，Compose for Web 教程將幫助啟動和運行，
示例應用程式展示包括要研究的其他示例，包括 Web、桌面和多平臺應用程式，

預發布說明

Compose Multiplatform 目前處于 Alpha 階段，雖然大多數 API 現在已經非常類似于它們的穩定形狀，但請記住仍可能會更改某些 API，以確保最終版本提供盡可能最佳的開發體驗，

隨著接近穩定版本，我們將繼續依靠用戶的反饋來幫助實作這一目標！

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/293769.html

標籤：其他

上一篇：獲取SHA1的值，以及處理報錯

下一篇：??Android入門實戰——做一個健康飲食搭配APP??