Compose开发桌面软件（一：项目搭建与入门）

今年对于 Android开发来说不知道该说是好的一年还是不好的一年，尤其是年底鸿蒙的next版本将剔除其ASOP部分代码这一消息。

而鸿蒙也发布了自己的跨平台方案，我也跟随潮流进行了鸿蒙ArkTs的学习，并且发布了几篇文章。

但是虽然鸿蒙现在大热，但是毕竟我还是个Android开发，所以对于 Android的新技术当然也要学习，那就是compose了。

这篇文章不是讲jetpack compose而是compose的跨平台方案：Compose Multiplatform

前言

本文章主要内容还是为翻译官方的使用指南，外加自己的实践操作和总结。

官方指南链接：github.com/JetBrains/c…

按照官方说明，Compose for Desktop 可以为 macOS、Linux 和 Windows 平台生成应用程序。所以这些平台中的任何一个都可以用于本教程。

我个人只尝试了Windows和macOS两个平台。

要求

• JDK 11 或更高版本
• IntelliJ IDEA Community Edition 或 Ultimate Edition 2020.3 或更高版本（可以使用其他编辑器，但我们假设您在本教程中使用的是 IntelliJ IDEA）

创建项目

新项目向导

从 2020.3 版本开始，IDEA 中的 Kotlin 支持附带了新建项目向导，它会自动创建一个 Compose 应用程序。

请注意，JDK 必须至少为 JDK 11，要使用本机分发包，必须使用 JDK 15 或更高版本。

因为我是用最新的idea跑的项目，所以截图和官方图并不一样。

点击新建项目，只要你的各个版本和上述要求一样，就会出现专门的模板

然后点create就会开始创建，创建完成如图

默认其实只有一个Main.kt,我的图中多出来的是我后续自己写的。

IDEA插件

如果你想和Android的compose项目一样使用@Preview在右侧预览的话，你需要添加一个插件Compose Multiplatform ,只需要在插件库搜索和安装就行。

更新向导插件

上述向导中使用的 Compose 插件版本可能不是最新的。通过编辑文件并更新版本信息来更新到最新的插件版本，build.gradle.kts如下所示。有关最新版本，请参阅最新版本站点和Kotlin站点。

plugins {
    kotlin("jvm") version "1.8.10"
    id("org.jetbrains.compose") version "1.3.1"
}

在没有向导的情况下创建一个新的 Compose 项目

手动创建 Compose 项目。

构建 Compose for Desktop 项目的推荐方法是使用 Gradle。JetBrains 提供了一种使用特殊 Gradle 插件构建 Compose for Desktop 项目的简单方法。

您可以为桌面或多 平台应用程序克隆现有模板，或从头开始创建它。

首先新建一个目录，命名为sample.

mkdir sample
cd sample

创建settings.gradle.kts如下：

pluginManagement {
    repositories {
        gradlePluginPortal()
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    }
}

然后build.gradle.kts使用以下内容创建：

plugins {
    kotlin("jvm") version "1.8.10"
    id("org.jetbrains.compose") version "1.3.1"
}

repositories {
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    google()
}

dependencies {
    implementation(compose.desktop.currentOs)
}

compose.desktop {
    application {
        mainClass = "MainKt"
    }
}

然后创建src/main/kotlin/main.kt并将以下代码放入其中：

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "Compose for Desktop",
        state = rememberWindowState(width = 300.dp, height = 300.dp)
    ) {
        val count = remember { mutableStateOf(0) }
        MaterialTheme {
            Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
                Button(modifier = Modifier.align(Alignment.CenterHorizontally),
                    onClick = {
                        count.value++
                    }) {
                    Text(if (count.value == 0) "Hello World" else "Clicked ${count.value}!")
                }
                Button(modifier = Modifier.align(Alignment.CenterHorizontally),
                    onClick = {
                        count.value = 0
                    }) {
                    Text("Reset")
                }
            }
        }
    }
}

此方法我并没有去验证，大家可以试试

运行项目

直接点击右上角绿色箭头，运行结果如下：

您可以多次单击该按钮，然后看到应用程序做出反应并更新了 UI。

main()还支持使用 run gutter运行和调试函数。

以上就是使用Compose Multiplatform的项目构建步骤，其中截图均为自己实际项目截图，如文中有错误欢迎指出，共同进步！

标签：入门桌面项目软件Compose