D28 / Compose 可以用来做 Desktop App? - Compose JB

写到最後三天了，想要聊聊和 Android 不完全相关的东西。感谢JetBrains 的开发，和 Kotlin 在 Android 世界的出现，让 Android Devs 可以顺着 Kotlin 这个语言，透过 Kotlin Native / KMM 等方式，接触到其他的开发。
Compose 则是另一个例子，在 Android Compose UI 逐步成熟後，JetBrains 也丢出了 compose-jb 的专案，让 Compose 可以用在其他透过 Kotlin 开发的平台。

建立 Kotlin Desktop App

透过 IntelliJ 的精灵，可以直接选择 Compose Desktop App ( 其实也可以选 Kotlin Multiplatform，只是那个配置比较复杂，建议大家可以去看看这届铁人其他大大的分享 )

精灵会帮我们在入口 function ( main function ) 建立一个 Compose 的入口，透过 Window 包装：

// Main.kt

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }
    
    MaterialTheme {
        Button(onClick = {
            text = "Hello, Desktop!"
        }) {
            Text(text)
        }
    }
}

IntelliJ 精灵建立的 Compose App ，在 build.gradle.kts 可以看到，是使用 org.jetbrains.compose gradle plugin 0.4.0。为了使用我们习惯的一些 API，建议直接升级到 1.0.0-alpha3
改成 1.0.0-alpha 後：

• Window 会被 deprecate，请改成 singleWindowApplication
• repositories 需要加上 google()
• 需要依赖 kotlin 1.5.21

试着 run 看看吧

简单的 Desktop App 就产生罗！

开始加入图片

1. 将图片放在 main/ 底下的 resource 资料夹下
2. 在想要的地方加上 Image()
3. 使用 painterResource("xxx.png") 取得图片，并放进 Image 的 painter 栏位

    Image(
        painter = painterResource("IntelliJ_IDEA_icon.png"),
        contentDescription = ""
    )

加入滑鼠互动

在 Desktop App 中，主要互动的不会是手指，而是滑鼠。滑鼠的操作比手指精细许多，我们可以透过 Modifier.pointerMoveFilter 来监控滑鼠位置，也可以透过 Modifier.mouseClickable( onClick = {} ) 来增加点击事件

Image(
    painter = painterResource("Ktor_icon.png"),
    contentDescription = "",
    modifier = Modifier
        .background(
            if (pointOn) Color.Red else Color.Transparent
        )
        .size(120.dp)
        .pointerMoveFilter(
            onEnter = {
                pointOn = true
                false
            },
        )
        .mouseClickable {...}
)

有了这些基本的互动，加上原本就学会的 Compose UI，就可以盖出一个基本的 Desktop App 了

Build 成 App 吧

Build Koltin Desktop 就和 build 一般的 Java 专案一样，最单纯的方式就是将其 Build 成 jar 档

./gradlew jar

但是在 compose desktop 的 gradle task group 有贴心的帮我们加上 package 系列的 task，可以用来包装成可直接安装的档案

./gradlew packageDmg

今天的内容算是很初浅的初体验，还有很多内容没提到。有兴趣的建议可以跟着以下教学一一研究：

• Getting Started with Compose Multiplatform
• compose-jb/tutorials