图源作者

目前为止,我们只在 Android 开发中看到 Jetpack Compose。今天,我们将进入一个崭新的阶段,因为 JetBrains 宣布了 IntelliJ 的早期访问版本,允许你使用 Jetpack Compose 来构建 Windows 应用程序。

关于如何使用 Jetpack Compose for desktop,我计划在未来写一些文章加以阐述,本文是这个系列的第一篇文章。上个月,JetBrains 发布了 Compose for desktop Milestone 2,为开发者们带来了更好的开发体验和可操作性。

和往常一样,JetBrains 在继续尝试通过提供独家项目引导来简化开发者的开发流程。在 Compose for desktop 的早期版本中,他们为 IntelliJ 增加了一个桌面项目引导,可以让我们在几秒内配置好项目。

在开始开发之前,你需要安装 IntelliJ IDEA 2020.3 或更高版本。

使用项目模版快速开始

正如我前面所说,项目模板是 IntelliJ 最好用的东西之一。安装完 IDE 后,启动应用程序。你会看到如下的界面:

然后点击顶部栏的 “New Project “按钮,这一操作将会跳转至选择应用程序类型的界面。如下所示:

首先,我们需要从左侧菜单中选择 Kotlin,然后修改项目名称和位置。之后,我们需要选择项目模板。这是配置项目的一个重要步骤。我们需要从项目模板列表中挑选桌面模板,向下滚动就能找到。然后你需要选择项目的 JDK,这里我建议使用 JDK 11。

然后点击“Next”按钮,这将会跳转至确认 Compose 模块的界面。现在点击“Finish”按钮,IntelliJ 将通过自动下载适当的 gradle 为你配置整个项目。

运行你的第一个桌面应用

如果进展顺利,整个桌面项目加载完成后你将会看到以下界面:

此时,你可以运行该应用程序了。由于某些原因,Main.kt 在右上角的“运行”按钮旁边没有被默认选中,所以它会要求你配置项目。为了解决这个问题,你需要在 Main.kt 文件内的主函数旁边点击绿色的“运行”按钮。

运行成功后,你会看到下面的输出结果,有一个包含“Hello, World!”文字的按钮。如果你点击它,按钮里面的文字就会变成“Hello, Desktop!”,来看一下实际体验的效果吧。

探究代码

正如你看到的,这是一个简单的 Hello World 程序 —— 一点也不复杂。大部分的代码与 Android 里面的 Jetpack Compose UI 相似。

Main.kt 是包含与输出有关的代码 Kotlin 文件。它有一个主函数作为应用程序运行的入口。代码从 Window 函数开始,用给定的内容打开一个窗口。它需要几个参数来初步配置窗口的属性,如 titlesizelocationcenteredcontent 等。

fun main() = Window {
}

在这种情况下,我们只需要把值传给内容参数,其余的参数保留默认值即可。在接下来的代码中,我们声明了一个具有 remember 功能的 text 变量,其初始值为 Hello, World!。如下所示:

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }
}

在一个声明式的 UI 系统中,代码本身就描述了 UI。我们需要描述任何时间点上的 UI —— 不仅仅是初始时间。在诸如按钮、文本字段等 UI 组件中,我们使用 remember 作为文本的状态,这样当我们在未来更新这个 text 变量时,与该变量相关的视图也会更新显示文本。

为了更好地理解它,我建议阅读以下文章。

Jetpack Compose Components (Part 2)

下一段代码是定义一个具有点击功能的按钮,并将整个应用窗口设置为 Material 主题。如下所示:

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }

    MaterialTheme {
        Button(onClick = {
            text = "Hello, Desktop!"
        }) {
            Text(text)
        }
    }
}

总结

目前,Jetpack Compose 在桌面和安卓上都处于非常早期的阶段,但它仍然展现出为构建 UI 所作出的巨大进步。像 Jetpack Compose 这样的框架配合上 Kotlin 的强大功能将提高开发者的开发效率,并为他们提供在不同平台上工作的方法。

Gurupreet Singh 这样的开发者非常积极地参与 Compose 的发布,并创造了宝贵的资源(如 ComposeCookBook)来帮助其他开发者。他还从 Compose Android 应用中创建了 the Spotify desktop clone,这给了我很大的启发。

捐赠

如果你刚入门 Jetpack Compose ,可以从这里开始。

以上就是本文的全部内容了,希望本文能对你有所帮助,感谢你的阅读。