[Compose Multiplatform Desktop] 比官方更好的Compose预览

前提概要

Compose Multiplatform 是从 Android 的 Jetpack Compose 发展而来的。
所以 Compose 在 Android 上功能最完善，其次是 Desktop 平台。
由于我要给自己项目写个前端界面，而后端用的是 Kotlin(JVM) 且没有封装网页接口，
最终自然就做成了桌面图形软件。这里我们专注讨论 Desktop 平台。

官方的预览插件

Jetpack Compose 本身带有 IDE 预览功能，JetBrains 官方也提供了 Desktop 平台的对应支持。
使用它需要安装 Compose Multiplatform IDE Support 插件。
虽然插件说明写着支持多平台预览，但实际只对 Desktop 平台有效。理论上你可以通过添加桌面平台并做些适配来预览，但它的问题实在不少：

  • 存在两个 Preview 注解：org.jetbrains.compose.ui.tooling.preview.Preview 和 androidx.compose.desktop.ui.tooling.preview.Preview，只有后者能用
  • 预览宽度会随窗口调整，但高度固定不变，而且不支持缩放和滚动。如果布局超出窗口范围，下面的内容就直接看不见了
  • 缺少 Android 平台那样的交互模式和层次查看器
  • 经常无法更新：代码一旦出错就卡在 Rendering Preview 状态，想看错误信息？
    得去翻 IDEA 的日志。更糟的是，你得靠重命名预览函数才能让它重新工作
  • 一次只能看一个预览，多个组件就得来回切换

第三方开发者的预览插件

推荐试试 Compose Multiplatform HotPreview（Timo Drick 开发的插件），它的体验更接近 Android 平台预览：

  • 错误信息直接显示在预览界面，不用像官方插件那样猜问题
  • 支持同时展示多个预览
  • 基本功能稳定可靠
  • 可以通过注解设置屏幕尺寸

相关链接：

废话

  • 桌面端问题一堆，但是compose的声明布局方式和web布局一样灵活，没有javafx和swing那么麻烦。
  • IDEA的bug，在调试模式更改commonMain的界面代码，点击进行代码热重新，IDEA表示代码没有更新啊，2025.1之后的版本呢不知道会不会修复。
  • 更新IDEA到2025.1之后这个预览插件用不了了，悲。
posted @ 2025-04-21 21:14  sheng_ri  阅读(245)  评论(0)    收藏  举报