Hello Compose Desktop
2023-6-13|2024-4-2
AlphaBoom
type
status
date
slug
summary
tags
category
icon
password
序言
Compose是Kotlin支持多平台的UI框架，基于最早专门给Android做的Jetpack Compose。Jetpack Compose刚出来的时候有看过还是蛮喜欢的，可以写声明式的UI，还不用写Dart（Flutter）。Dart这个语言写的时候总感觉有点别有一种介于Java和Kotlin的状态，在写代码的时候就会经常感觉这里比Java好，那里又感觉语法糖比较弱不如Kotlin。
关于为什么开这个坑是借这个机会复习复习Kotlin，前几天写个Android的小工具发现Kotlin都不会写了。所以目的就在于写点代码，旨在动手上。但是目前也没什么特别想花功夫写的工具，并且后续也大概率不会深入这块，所以先写一个类似CookBook这类型的应用，如果有想到想写的内容就放在里面。初期先设定部分内容：
- 《写给大家看的设计书》读书笔记
使用Compose搭建示例界面的读书笔记内容
- 接入ChatGPT接口的AI应用
第一步是先做一个聊天页面，后续想到什么再考虑添加，一些划词啊文件之类结合AI的场景还是蛮多的
第一个程序
先跑个程序看看怎么样吧。
- 下载Intellij IDEA
- 新建工程，选择Compose Multiplatform,选择目标平台Destop
- 花费一些时间等待依赖下载完毕，就可以直接启动了：
Hello World真的是非常简陋了，工程结构也不需要看，只关注主程序的文件就是全部了：
可以看到导入的包都直接是Jetpack Compose的包，并且除了Android也就是Jetpack Compose之外其他版本是没有文档的，所以想要具体学习也需要看Jetpack Compose的官方文档。现在这个HelloWorld程序还有几个问题：
- Lint规则问题，大写的方法名不符合默认的方法函数命名
- @Preview并没有效果，无法展示预览效果界面
要解决这两个问题需要安装Compose Multiplatform IDE Support
搭货架
我给这个项目起名叫Groceries，那么先搭一个货架提供入口可以跳转到不同的子界面。也就是完成一个基础的导航功能，导航相关官方文档介绍如下：
不过在使用文档里的Decompose库时出现一些问题（程序运行报错）。由于不太考虑跨平台，所以这里暂时选择不依赖第三方库而采取直接实现的方式，也就是通过一个状态来表示当前是哪个页面：
桌面端一般采取列表和内容同时展示的方式，稍作修改：
写给大家看的设计书，读书笔记
下面考虑来丰富下内容，正好最近准备读《写给大家看的设计书》这本书，书中的内容是如何调整UI才是好的设计，所以我可以在Compose这个UI框架中来实践相关内容。考虑才刚刚开始学习，还是功能简单点做一个读书笔记类的内容，也就是按照章节、段落去记笔记，程序架构则选择MVVM的模式（遵守移动端的开发规则）。
这个读书笔记和通常的读书笔记有所不同，重点是动手能力而不是笔记记录的内容。也可以说真实的读书笔记是代码本身，而不是呈现出的UI内容。
数据存储
作为笔记内容各个段落联系不大，首先按照章节+段落的方式存储可用的视图，这部分就直接放在内存中就好了。
逻辑处理
逻辑部分主要是处理章节和段落切换的问题，使用MVVM架构就是我们需要一个包含视觉状态的对象，修改这个对象视图会随之改变，该对象主要是包含一个段落的视图内容。
之后再加入逻辑处理代码，也就是控制段落或章节的切换逻辑。
视图搭建
视图的要求很简单，只要加入两个按钮可以执行视图切换就好了。
记录读书笔记
该书的内容从第2章亲密性开始，最开始的例子是通过一个名片来表示亲密性的效果影响。将这部分内容添加后效果如下：
总结
代码位置:ComposeGroceries
关于Compose的体验
总体体验下来使用Compose来开发桌面应用是可行的，不过桌面端的配套开发设施上有些弱：
- 预览体验比较差，需要主动触发编译并有一个明显的等待过程
- 预览界面不支持交互操作，这个Android上是支持的
不过也有好的方面，就是组件依赖于Jetpack Compose所以在组件选择上还是有一定选择空间的。
另外对于Compose这个框架本身有以下感想：
- Modifier的使用频率很高，在这类UI框架中有一个属性的比重特别高这点不太多，可能Compose的主力开发是Android过去搞的原因，而其他框架则是由前端主导的（没考证）。
- 相似的名字过多，在Kotlin/Java这个体系下导错包的概率大大增加，写代码时不时要注意下导包是否正确。加之Kotlin有大量的Extension，导包操作比Java要多很多。
- 布局的明确性比较弱，比如设置padding这个属性，它并不总是按照预期执行，在某些组件上设置是无效的。
- 更新范围理解上会有点误差，这些逻辑都是由Compose框架处理的。Compose框架会会记录这些Composable中包含哪些可变值，然后判断是否变化并选择一定的变化区域进行更新。这个理解上的困难就是，这些可变值就是一段代码的普通变量，你要通过阅读代码整体才能了解到可变值的涉及控件范围，相较于其他作为把可变值赋予给控件的方式，会更难理解影响范围。
后期计划
写UI其实是一个挺繁琐的内容，所以这个应用未来的定位是一个用来存放杂物的杂物间。也就是说如果我需要一个功能并且这个功能有一个界面会方便一些，那么我就会把这个东西放在这里。
- Twikoo