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站点。

bash 复制代码

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.

bash 复制代码

mkdir sample
cd sample

创建settings.gradle.kts如下：

scss 复制代码

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

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

scss 复制代码

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并将以下代码放入其中：

ini 复制代码

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的项目构建步骤，其中截图均为自己实际项目截图，如文中有错误欢迎指出，共同进步！