开始使用Compose Multiplatform

bytebeats
4,896 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 29 天，点击查看活动详情

开始使用Compose Multiplatform

主要内容

在这里中, 我们将使用 Compose Multiplatform UI 框架创建一个简单的桌面 UI 应用程序.

前置条件

Compose for Desktop可以为macOS, Linux和Windows平台制作应用程序. 因此, 这些平台中的任何一个都可以用在这里.

必须预装以下软件:

  • JDK 11或更高版本
  • IntelliJ IDEA社区版或终极版2020.3或更高版本(可以使用其他编辑器, 但我们假设你在这里使用的是IntelliJ IDEA)

创建新项目

新项目指南

从2020.3版本开始, IDEA中的Kotlin支持伴随着新的项目指南, 它会自动创建一个Compose应用程序.

请注意, JDK必须至少是JDK 11, 要使用本地发布打包, 必须使用JDK 15或更高版本.

wizard1.png

wizard2.png

IDE插件

Compose Multiplatform IDEA插件可以通过在无参数的@Composable函数上添加对@Preview注解的支持来简化编译开发. 你可以直接在IDE面板上看到某个可组合函数的样子. 这个插件也可以通过插件市场安装. 只要搜索Compose Multiplatform即可.

更新指南插件

上面的指南中使用的 Compose 插件版本可能不是最新的. 通过编辑build.gradle.kts文件并更新版本信息, 更新到最新的插件版本, 如下所示. 关于最新的版本, 请参见最新版本网站和Kotlin网站.

plugins {
    kotlin("jvm") version "1.8.0"
    id("org.jetbrains.compose") version "1.3.0"
}

在没有指南的情况下创建一个新的Compose项目

也可以手动创建一个 Compose 项目.

推荐使用Gradle来构建Compose for Desktop项目. 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.0"
    id("org.jetbrains.compose") version "1.3.0"
}

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")
                }
            }
        }
    }
}

运行项目

在IntelliJ IDEA中以打开项目的方式打开build.gradle.kts.

New project

从Maven仓库下载完Compose for Desktop的依赖项后, 你的新项目就可以开始了. 打开右边的Gradle工具栏, 选择sample/Tasks/compose desktop/run. 第一次运行可能需要一些时间. 之后, 会出现以下对话框:

app.gif

你可以多次点击按钮, 看到应用程序有反应并更新用户界面.

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

Application running

下一步

祝贺你的第一个 Compose Multiplatform 项目成功! 我们鼓励你继续玩你感兴趣的领域, 并期待看到你的作品. 我们鼓励你继续玩你感兴趣的领域, 并期待着看到你建立的东西. 当你准备好继续学习的时候, 我们有更多精彩的教程可供选择. Compose Multiplatform教程.

我们也有一些更高级的Compose Multiplatform示例项目, 你可以从中学习.

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 29 天，点击查看活动详情

avatar
文章
阅读
粉丝