最近在学Compose跨途径的内容，在上一篇文章中，现已用Compose DeskTop完结了一个秒表运用，那已然能完结秒表，那么相同的我们也可以完结时钟的运用，这一篇文章中我们就来看看怎么用Compose DeskTop完结一个时钟运用

开端开发

首要我们仍是先找到Main.kt文件里面main函数，并在Window里面创建一个Timeclock函数作为我们时钟的入口

在TimeClock函数里面，首要创建两个变量screenW跟screenY,分别标明画布的宽高，并且在Canvas里面对这俩变量赋值，标明当画布的大小发生改动的时分，更新screenW与screenY的值，触发TimeClock重组

有了画布的宽高，接下来就是要找到挂钟的中心点方位，一般情况下我们把画布的中心当作挂钟的中心点，所以它的x,y坐标分别是

然后因为挂钟是个圆，所以我们还需求一个半径，半径的大小决议了这个挂钟在画布傍边所占的大小，所以半径的最大值是circleX与circleY的最小值

半径减去100的原因是不希望挂钟画出来太贴边，最好可以有少许间距，当然这是个人审美，因人而异，挂钟的规模已确认，接下来准备画里面的刻度，刻度这儿分整点刻度与非整点刻度两部分，整点刻度用十二个数字标明，分别分布在圆周上，每通过三十度一个点，所以这儿我们需求两个数组，分别存储整点的案牍以及整点的角度

其他还创建了一个TextMeasurer,用来制造案牍的时分运用，有了以上这些变量，我们现在可以在Canvas里面先把整点案牍制造出来了

pointX和pointY分别是核算圆周上x坐标与y坐标的函数，核算出来往后分别在减去40首要是因为drawText是从topLeft开端制造案牍，假设不减去点偏移量，案牍会显的比较靠下，pointX和pointY函数的代码如下

现在我们看一下效果，整点的案牍现已出来了

整点案牍制造完毕，然后对错整点刻度的制造，首要是确认好非整点刻度的角度，那就是除了圆周上整点刻度角度之外的其他角度，所以我们也创建个数组来保存这些非整点刻度的角度

然后这边希望非整点刻度是一根根小的分割线，每一根分割线都指向了挂钟圆心，那么需求用到的制造函数现已知道了，就是drawLine,然后drawLine里面start与end的坐标就通过pointX与pointY函数核算出来，start坐标离圆心近点，那么第一个入参就设定为半径长度减10，end坐标离圆心远一些，那么入参就定为半径加10，代码如下

现在所有刻度都制造完毕，效果如下

看起来有点别扭是不，10点，11点，12点看起来还好，其他的感觉有点方位偏左，想了一想也是，个位数与两位数偏移量怎么或许设置的相同呢，所以我们在drawText那里添加个位数的判别，假设是个位数，那么偏移量就比两位数的小点，代码如下

现在我们再看下效果

看起来好点了，接下来就开端制造秒针，分针和时针，在制造之前，我们首要想一下怎么制造，要知道这不仅仅是画三根line那样简略，每一秒三根指针在挂钟上的方位都有或许改动，也就是说这是一个周期性的工作，说到周期性的工作，完结方式有很多种，在传统Android里面，我们常常运用TimeTask,线程池，JobScheduler等来完结，但这些方案都要通过生成实例来完结，而我们Composable函数是要常常发生重组的，一旦发生重组就又新建个实例，那就太消耗内存了，所以在Compose里面，我更倾向于运用Flow,因为Flow的数据流需求在一个协程效果域里面进行，而LaunchedEffect函数刚好可以在Composable函数里面供给这样一个协程效果域,其他，LaunchedEffect函数只要在key值发生改动的时分才会触发协程效果域从头实行里面的代码，假设key值不变，哪怕发生重组也不必忧虑从头创建Flow,现在我们就来创建这个时间的数据流

先是创建了一个LocalTime的实例time,并且用remember监听它的改动，我们在LaunchedEffect函数里面创建了一个Flow,并在上游一秒一次继续发送最新时间，在下游对time进行赋值，所以我们变量time永远都标明着最新时间，然后我们创建三个变量分别将time的时分秒赋值进去

我们先制造秒针，秒针根本每秒都会改动个方位，它通过一分钟往后走的刻度数量刚好是60个，这60个刻度所对应的角度我们创建个list保存起来

这样我们每次制造line的时分，对应的角度在totalList数组里面的下标值就是当时second的时间，制造秒针的代码如下

秒针制造完毕，我们看下效果怎么

分针与秒针的原理根本相同，通过变量minute就可以在totalList中获取分针制造的角度，我们只需求在款式上稍作批改就好，制造分针的代码如下

工作往后的效果如下

分针也制造完毕了，并且我们看到当秒针通过刻度12的时分，分针也往后走了一格，功能也没问题，终究我们来制造时针，时针略微复杂一点，因为它跟秒针分针不相同，变量hour在一个小时以内都是保持不变的，但是时针的方位不能在一个小时以内都指在整点刻度上，它需求在在一小时内从当时整点刻度走到下一个整点刻度，所以它通过的角度我们需求将hour进行恰当的核算来获取，核算的代码如下所示

减去12是因为LocalTime假设不做处理，直接获取的时间是24小时制的，所以需求判别假设到了下午就要减去12，下一步乘上5是将对应整点换算成刻度，然后再加上假设对错整点，那么在两个刻度之间所通过的角度，这样核算下来，我们也可以通过hour在totalList中获取时针的制造角度，制造的代码根本相同，款式上稍作批改

三个指针都制造完毕，稍作优化，在圆心的地方再制造个小圆，小圆的颜色同画布背景色共同，抵达的效果就像是指针的重合部位是空心的相同，我们看下效果

两个打包小经验

检查实行文件的log

这个首要是因为刚开端触摸DeskTop开发，有些东西还比较生疏，比如打出来的包假设工作失利了，怎么知道是哪里出了问题？这个在Android里面非常简略，插上线在logcat中看下日志就可以了，那么桌面程序假设出错了，日志在哪里看呢？横竖Intelliji里面我找了下没找到，详细log方位是在右键打包出来的程序，然后在Contents/MacOS里面有个可实行文件，双击实行一下，它的工作日志就会在弹出来的终端里面展现出来

打出来的包工作失利

这个是上一个问题衍生出来的，因为打包失利了所以我得找是啥原因啊，写客户端终究打不了包那不是白玩吗，首要看一下是什么日志

java.lang.UnsatisfiedLinkError: Can’t load library: /Applications/TimeClock.app/Contents/app/libskiko-macos-arm64.dylib

首要是这个报错，发生这个报错的文件是在Library.kt文件里面

网上查了不少，有说把compose.desktop.currentOs改成compose.desktop.macos_x64，但是这边试了下没啥用，然后看到有人说升级一下kotlin跟Compose版别，将kotlin升级到1.7.20,Compose升级到1.2.2,但因为我当时的装备比这个引荐的版别还要高所以没有介意，我的装备如下所示

成果又尝试了几回已然失利往后，我方案把版别降级到网上引荐的那个版别,装备文件改为如下所示

想着假设再不行就用家里的另一台windows试试看了，当然Compose版别降到1.3.0以下代码里是要做一些改动的，那就是要把drawText相关代码注释掉，因为这个函数是1.3.0之后推出的，终究实行了packageDmg指令后，文件真的实行成功了，效果图如下所示

我们看到虽然整点的刻度没有了，但是我们的包确实工作成功了，至于为什么高版其他kotlin跟Compose打包出来的包工作不成功，这个还得继续找找原因。

总结

这个demo算是比较简略，但好在知道了怎么将一个DeskTop程序打包成可实行文件了，否则之前包打不成还真是蛮头疼的，后边继续Compose Multiplatform的学习与小demo开发