取代传统 Java UI 框架，JetBrains Kotlin 声明式 UI 框架 Compose Multiplatform 1.0 正式上线

12 月 20 日消息，据 JetBrains 发布，JetBrains 的 Kotlin 声明式 UI 框架 Compose Multiplatform 已更新至 1.0 版，可供生产使用！

JetBrains 将介绍一些亮点，希望你能和 JetBrains 一样期待框架的发布：

在桌面上，你可以快速高效地创建具有精美用户界面的 Kotlin 应用。

在 Web 上，你可以使用 Compose for Web 的稳定 DOM API 构建生产级动态 Web 体验，并实现与所有浏览器 API 的完全互操作。未来版本将提供对 Material UI 微件的支持。

总体而言，现在各平台间（包括 Android，使用与 Google 的 Jetpack Compose 的兼容）的专业知识和代码共享都得到了大幅简化。

接下来 JetBrains 将逐一介绍这些亮点。

扫码访问 Compose Multiplatform 网站

桌面版 Kotlin UI

在很长一段时间内，如果你想为 Kotlin 桌面应用程序构建用户界面，你都必须使用传统的 Java UI 框架，因为没有任何 Kotlin 库支持桌面的现代化 UI 开发风格。这一状况将被 Compose Multiplatform 改变。JetBrains 这就来探索新的框架会如何改善为 Kotlin 应用编写 UI 的体验。

构建用户界面的声明式方法

Compose Multiplatform 为声明式，代码反映了应用的 UI 结构，让你无需担心将数据从模型复制到视图或开发 UI 刷新逻辑之类的事情。全能高效的框架将让 UI 开发成为一种享受。在这个示例中，当 TextField 的内容被编辑后，Text 标签的内容将被更新，无需任何额外代码：

vartextbyremember{mutableStateOf(\"Hello,World!\")}Column{Text(text)//textlabelTextField(text,{text=it})//textfield}

Compose Multiplatform 入门简单，上手体验类似于React或 Google 的Jetpack Compose之类的声明式 UI 框架。Compose Multiplatform 使用了许多相同的概念，应该会让你倍感亲切。

React

https://zh-hans.reactjs.org/

Jetpack Compose

https://developer.android.com/jetpack/compose

通过硬件加速实现出色的运行时性能

现代化用户界面对性能相当敏感，因此 JetBrains 花了大量精力来提高 Compose Multiplatform 的速度。它使用的图形库Skia经过了良好优化，已被性能敏感的应用程序广泛采用，包括新型浏览器。这意味着 Compose Multiplatform 支持桌面上的所有主流硬件加速引擎，例如 DirectX、Metal 和 OpenGL。对于硬件加速不可用的环境，Compose 也提供了优化的软件渲染程序。

Skia

https://skia.org/

通过预览工具缩短迭代周期

在 UI 开发中，最耗时的任务之一是为了取得完美显示效果而重建应用程序。Compose Multiplatform IDEA 插件将简化这一过程。它的内置实时预览功能可供微调 UI 的组件 / 部件和创建多个迭代，而无需重建或重新启动应用程序。这将大幅缩短开发周期。

插件

https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support

通过自动应用程序打包信心满满地交付桌面应用

将应用程序带给用户，不仅需要妥善的开发，也需要合适的打包。在这一领域，Compose Multiplatform 也可以发挥作用。Gradle 插件支持将应用程序打包为msi、dmg和deb格式，包括MacOS 的签名和公证。

将应用程序打包

https://github.com/JetBrains/compose-jb/tree/master/tutorials/Native_distributions_and_local_execution

MacOS 的签名和公证

https://github.com/JetBrains/compose-jb/blob/master/tutorials/Signing_and_notarization_on_macOS/README.md

Android 上 Jetpack Compose 与 Java UI框架的互操作性

Jetpack Compose 是 Google 为构建原生 UI 打造的 Android 现代化工具包，在移动开发者中越来越受欢迎。如果你以前使用过它，那么 Compose Multiplatform 对你来说会非常容易上手，因为这两个框架共享了大部分 API。如果桌面应用程序已经具有使用典型 Java UI 框架构建的用户界面，则无需从头重新编写代码即可与 Compose Multiplatform 一起使用。通过出色的互操作性，你可以将使用 Compose 编写的 UI 组件添加到现有 Java UI 中。你还可以将现有 Java 控件添加到使用 Compose Multiplatform 构建的任何新应用。

使用 Compose Multiplatform 向导快速上手

Compose Multiplatform 上手过程从未如此简单。在IntelliJ IDEA2021.1 以上版本中，只需几下点击即可创建一个简单的 Compose Multiplatform 项目。

IntelliJ IDEA

https://www.jetbrains.com/zh-cn/idea/

JetBrains 还准备了大量教程来帮助你熟悉 Compose Multiplatform 的桌面目标。

大量教程

https://github.com/JetBrains/compose-jb/tree/master/tutorials

Compose for Web

除了桌面之外，Compose Multiplatform 还为处理DOM提供了强大的声明式 Kotlin / JS API。

DOM

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

它具有现代化 Web 框架中你想要和需要的所有功能，包括全面的 DOM API、内置 CSS-in-JS 支持、对 SVG 的支持、类型化输入等。Compose Multiplatform 的 Web 目标以纯 Kotlin 编写，并充分利用了语言的类型系统和习语。这让你可以使用你在其他 Kotlin 目标中可能已经熟悉的开发工作流。

多平台支持

使用 Compose Multiplatform，你并不会受限于以桌面和 Web 平台（均已直接支持）为目标。你还可以使用 Google 开发的著名 UI 框架 Jetpack Compose 以 Android 为目标。这两个框架共享公共 API 与核心，因此具有完美的互操作性。这意味着你不必重新编写常见 UI 和状态管理代码。只需编写一次，然后根据需要在各个平台上重用即可。

如果你要将现有 Android 应用程序带到桌面或 Web，Compose Multiplatform 可以帮助你轻松实现。它允许你从单个 Kotlin 项目管理应用程序的所有目标。

要使用 Compose 快速开始构建面向多个平台的应用，你可以使用 IntelliJ IDEA 2021.1 以上版本中的 Kotlin 项目向导。

即使当前不需要开发多平台应用程序，你在一个平台上的知识和专长在另一个平台上也会发挥作用。

自测试版以来发生了什么变化？

在 Compose Multiplatform 1.0 中，JetBrains 最关注的是确保框架可实际用于生产应用程序。因此，此版本主要解决质量和稳定性问题，同时修正关键问题和错误。

真实生产经验

虽然 Compose Multiplatform 本月才正式上线，但它先前已用于部分生产应用程序。例如，在 JetBrains，JetBrains 早在 2021 年初就开始在 Jetbrains Toolbox App (https://www.jetbrains.com/zh-cn/toolbox-app/) 中采用 Compose Multiplatform。这个用于 JetBrains IDE 的管理应用程序每月有超过 1,000,000 名活跃用户，在 4 个月前完全从 C++ 和 Electron 迁移到了 Compose Multiplatform。

总结

通过 Compose Multiplatform，Kotlin 开发者能够以强大的框架为桌面和 Web 应用程序创建精美的 UI。

现在是尝试 Compose Multiplatform 的最佳时机！最简单的入门方法是查看官方教程。使用 IntelliJ IDEA 2021.1 以上版本的内置 Kotlin 项目向导，你可以轻松开始创建第一个 Compose Multiplatform 项目并以 Kotlin 构建声明式用户界面。

官方教程

https://github.com/JetBrains/compose-jb/tree/master/tutorials

JetBrains 希望你喜欢它！