前言

Compose Multiplatform是由Jetbrain团队保护的一个基于Kotlin和Jetpack Compose用于跨多渠道的共享UI的声明式框架，现在支持的渠道除了Android以外，还有iOS,Web和桌面，如此厉害的技术怎样能不亲自上手尝试一下呢，所以这篇文章要讲的便是运用Compose Desktop开发一个桌面版的秒表运用

预备工作

在开发之前，咱们要确定下运用的开发环境，这儿我运用的编辑器是IntelliJ IDEA 2022.3.3这个版别，JDK环境用的是11，貌似是最低要求。

怎样创立项目就不说了，现在许多文章都有具体讲解，咱们直接开端吧

创立视图

首要咱们的秒表肯定是有开端计时与结束计时两个状况，所以咱们的界面上需求一个按钮来控制这两个状况，那么榜首步便是在main函数的Window组件内制作出这个按钮

其间turnOn变量便是咱们控制状况的开关，经过Button的点击事件来改动，而且按钮的案牍也随着状况的更改显现不同的文字，Clock便是咱们制作秒表的函数，而且接收turnOn这个变量控制秒表的计时。好了今后咱们看一下作用

正如咱们预想的相同，一个简略的桌面运用就出来了，接下来就开端制作咱们的秒表

制作外框

秒表的外框一般来讲便是个圆，而运用Canvas制作圆有两种挑选，一种是运用drawCircle，另一种是运用drawPath，但考虑到drawCircle无法界说边框的巨细，所以咱们直接运用drawPath函数，制作Path的话咱们需求界说几个变量，分别是中心点坐标，Rect的左上坐标和右下坐标，代码如下

表盘选取在水平居中方位制作，其间在中心点的y坐标，以及Rect的y坐标上都加上100的原因首要是为了假如边框的粗细设置的比较大的话，表盘不会被视图遮挡，现在咱们就在Canvas中制作界说好的Path

一个简略的边框就制作好了，咱们看下作用

又大又圆，边框制作结束，接下去便是表盘的刻度了

制作刻度

刻度的款式每一种表盘上都不相同，咱们这边就简略一些，就在5，10，15这样的刻度上显现文字，其他方位用圆点代替，否则60个数字画一圈怕是太鳞次栉比了，那怎样做呢？咱们分两步来，榜首步先画数字，以下是咱们需求用到的变量

由于制作数字的方向是在一个圆周上的，所以咱们界说一个数组angList寄存制作视点，一起也相对应的界说另一个数组textList寄存数字的案牍,circleRdius是表盘半径，用来核算圆周坐标用，现在便是要制作案牍了，咱们运用DrawScope的drawText函数，有的人会说DrawScope下面哪来的drawText啊？那是由于drawText是在Compose 1.3.0版别推出的，所以假如找不到drawText的话，那就赶忙去更新版别吧，咱们看下drawText这个函数都提供了哪些参数

能够看到必填的参数是前两个，一个是TextMeasurer对象，用来测量案牍的，另一个不必多说，设置text,然后topLeft这个特点也是需求的，总不能12个数字都叠在一起吧，知道了要填的参数，咱们现在就调用一下drawText

咱们运用rememberTextMeasurer函数创立了一个TextMeasurer对象，而且运用pointX和pointY分别核算了每个数字坐上的x,y坐标，两个函数的代码如下

这儿至于为什么要在Offset函数中分别对核算出来的x,y减去20,首要是由于尽管核算出来的坐标是刚好在圆周上，可是当文字制作出来今后，整体布局会有点偏右下，所以得在成果坐标上再减去20，让文字能够刚好看起来在圆周坐标的中心方位，现在咱们运转下代码看下作用怎样

能够看到数字都画上去了，作用还行，接下来便是圆点刻度,相同界说需求用到的变量

degreeColor是制作圆点刻度的色彩，pointAngleList跟上面的anglist相同，是寄存圆点视点的数组，尽管说这个数组的巨细界说为60，可是在lambda表达式中咱们判别了假如核算出来的视点在anglist中现已存在，那么就不赋值用0代替，最终制作的时分咱们判别假如视点为0，那么就不制作，所以0度的刻度不会被制作在表盘上，而制作圆点咱们直接运用drawCircle函数，代码如下

由于相同也是在圆周上，所以核算圆点的坐标也用到了pointx与pointy函数，咱们再看下作用

有内味儿了是不，咱们接下来开端画指针

制作指针

指针其实便是一根line,咱们运用drawLine函数就能制作出来，别的咱们在中心点方位再制作一个圆点，当作是把指针固定在表盘上的相同，代码如下

其间pointerColor是指针和圆点的色彩，运转一遍代码，咱们看到指针现已制作上去了

可是指针跟刻度不相同，它得是能绕着圆点动的，怎样动呢？咱们看到上面那根静态指针制作的视点是在angList[0]上,那是不是不停的改动视点，咱们的指针就动起来了呢？咱们来定一个数组来存在一切需求经过的视点

totalList便是寄存一切视点的数组，至于intervalSize是什么呢，咱们知道有的秒表上指针是一格一格走的，间隔比较大，有的间隔比较小，看起来的作用就比较丝滑，intervalSize便是界说指针走动的频率巨细的值，而且是能够被360整除的，数组界说好了，咱们再给数组下标创立个动画

这儿创立了一个循环动画，由于totalList遍历完一遍今后，代表着一分钟过去了，视点又得重新开端遍历，所以咱们给数组的下标值界说了一个循环动画，别的咱们还运用LaunchedEffect函数，来监听外部传来的turn值的改变，turn为true的时分，angleIndex的初始值目标值不同，动画敞开，turn为false的时分，angleIndex的初始值目标值相同，动画暂停。咱们更新下Canvas中drawLine的代码，让drawLine里边获取视点的下标值的变量变成angleIndex

咱们看下作用

文字时刻

一个秒表的表盘制作结束，咱们再加点东西，一般性一个秒表底下都会有个文字时刻在跳动，差不多由分，秒，毫秒组成，咱们这边也加上这些东西，而且在分与秒之间用文字“分”离隔，秒与毫秒之间用“秒”字离隔，那么这五个Text咱们要核算出它们topLeft的坐标

案牍的y坐标很简单，便是在表盘底部y坐标上再加点间隔就好，至于横坐标，便是找出中间一块区域再五等分，坐标界说结束，咱们先把两个中文制作出来，x坐标取timeXList下标为1和3的值

接着咱们想一下毫秒方位的数字怎样展示，毫秒方位是在一秒内从0跳到99，然后再从0跳到99，这不又是个循环动画吗，咱们仿照指针的动画，将毫秒的动画创立出来

相同的，由于毫秒的动画也跟随着turn值的改变而改动，所以咱们将这个进程也在LaunchEffect中添加上

现在咱们能够在Canvas中将毫秒也制作出来了

这边还做了一个处理，当毫秒的值为个位数的时分，咱们在数字的边上再加上一个0，让数字跳动的时分看起来作用好一些，毫秒的方位现已制作结束，秒的方位也相同，由于它也是从0到60改变的一个循环动画，所以它的代码与毫秒基本差不多

现在咱们再看下作用

还剩下分的方位，分就不能用循环动画来实现了，它是一个逐渐递加的进程，当秒的方位为从59变回0的时分，分的方位加一，那么咱们就需求一个变量来记载分的值

minuteValue用来记载分钟的值，然后咱们在Canvas里边判别当mainSecondText刚到59的时分，就预备开端给minuteValue加一，为什么是开端预备而不是立马加一呢，由于假如那样做的话，显现的作用是秒的方位一到59秒的时分，分就加一了，这就不符合实践了，咱们期望是当59变为0的那会分才加一，所以咱们还需求一个状况位，当mainSecondText变为59的时分，状况位翻开，直到mainSecondText变成0的时分，状况位才关闭，这个时分分才加一，咱们把状况位命名为addMinute

给分钟设置值的代码如下

再运转一遍代码看看作用怎样

完美的衔接起来了，这样一个秒表的功用就基本完成了，咱们略微在点缀一下，如标题所示，加个呼吸灯

呼吸灯作用

在做这个作用之前，这儿有个问题，咱们是否知道在Compose里边怎样给视图设置突变色？运用drawable吗？Compose里可不兴这些，咱回忆下咱们在调用drawpath函数的时分，编辑器是不是会给出这样的提示

有两个drawPath的函数，这俩函数的区别是在第二个参数上，一个是Color,另一个是Brush,我之前一般都是用Color的，由于Brush是个啥我也不知道，可是当我看到Brush里边的代码今后

看到榜首行注释没，这个其实便是用来做突变作用的，它比咱们传统Android里边设置突变功用还要丰富，不但突变的色彩没有约束，方向也没有约束，也便是说你能够在恣意两个点之间设置若干种色彩的突变，现在咱们就在咱们秒表的边框上设置三种色彩的突变吧

首要设置好咱们要突变的色彩值，然后将这个寄存色彩值的circleColorList当作参数传入drawPath的Brush中

边框的粗细也加大到了30，这样也能清晰的看到突变作用，现在运转后的作用如下

作用出来了是不，现在是三个色彩的突变，那已然刚刚说了Brush的突变色彩能够是若干个，那么咱们在circleColorList中再添加几个色彩试试

从刚刚的三个变成了六个色彩的数组，再运转一下看看作用会怎样样呢？

是不是跟刚刚的那个作用图比起来，这个时分的边框突变色更多了呢，到了这儿，咱有个主意，经过之前的循环动画，咱们能不能将Brush里边的突变色值也循环起来呢，比如先设置的是circleColorList下标为0，1，2的色彩，接下去便是显现下标为1,2,3的色彩，以此类推，下标值到了数组结尾，下一个再从头开端，这么做到底会有什么作用呢，咱们试一下

如上述代码所示，咱们创立了一个初始值为0，目标值为circleColorList.lastIndex的循环动画，动画时长为两秒，接下去，咱们经过判别不同的下标值场景来选取不同的色彩来制作边框

由于是三种色彩的突变，所以场景挑选了假如colorIndex为数组最终一个下标，colorIndex为数组倒数第二个下标，以及其他状况，现在咱们再来看看边框作用

是不是就像表盘周围安顿了一个呼吸灯相同，可是这个呼吸灯还不是很完善，由于咱们看到的作用，这个呼吸的进程是慢慢从淡色开端，逐突变深，然后由深变浅是一会儿的进程，感觉像是这个呼吸被打断了相同，形成这个作用的原因是咱们circleColorList数组里边的色值，根据下标的递加是逐突变深的，可是短少逐突变浅的进程，所以咱们应该在circleColorList中再添加几个色值，也便是将本来的色值顺序倒转一下添加进去，就像下面这样

这样就满意了咱们呼吸灯由浅变深和由深变浅的两个进程，咱们再看看作用

总结

Compose DeskTop的秒表功用完成了，这也是我Compose Multiplatform的榜首个demo,先挑选DeskTop首要是由于几个跨渠道里边只有DeskTop与Android的代码算是真实意义上的一套代码跨渠道运用，Web首要是多了几个Dom组件，Android里边无法运用，而iOS现在也仅仅刚刚发布Alpha版，我还在探索学习中，所以先用DeskTop开个场，后面别的渠道的小运用也会相继推出。