Compose能够跨渠道信任现已不是什么新鲜事情了,信任只要会点Compose的小伙伴都现已多多少少开端上手Compose的跨渠道开发,在Compose能跨的渠道里边,除了Android之外,“跨”的最完善的应该便是DeskTop桌面渠道了,可就算是DeskTop渠道,咱们在开发过程中也不能完全将Android代码都复制过来运用,一些渠道上的差异性决议了有些代码只能在DeskTop渠道上运转,或许说在做DeskTop开发时分必须得接触到的一些特性,那么接下来你就会知道

  1. 怎么给运用添加菜单项
  2. 怎么挑选文件
  3. 怎么调用体系弹框
  4. 怎么去掉运用窗口的边框

添加菜单项

根本每一个桌面运用都有若干个菜单选项,这些选项中的功用可能在运用傍边也存在,可是放在菜单中能够更加便利,快捷的让用户找到并运用,一般咱们新建一个DeskTop项目并运转它的时分,在电脑屏幕的菜单栏上只要一个Mainkt的选项,里边是一些体系供给的一些功用,比方最小化,退出运用之类的

从近期开发的Compose DeskTop项目中收获的四个知识点

这个时分比方咱们想要添加一些属于咱们运用的一些菜单选项,应该怎么做呢?答案就在Window.desktop.kt文件里边

从近期开发的Compose DeskTop项目中收获的四个知识点

有一个MenuBar函数,它是FrameWindowScope的扩展函数,在函数里边是直接生成了一个JMenuBar,这个类在swing包里边,功用能够了解为获取咱们桌面顶部那个菜单栏实例,然后经过setContent办法,将content塞到菜单栏里边,而content便是MenuBar函数的入参,也便是咱们需求设置进去的菜单组件,至于FrameWindowScope咱们都很了解的,这个便是Window的作用域,所以咱们除了在Window里边绘制咱们的主页面之外,也能够直接运用MenuBar来定义菜单项的内容

从近期开发的Compose DeskTop项目中收获的四个知识点

接下来便是怎么定义菜单项了,直接放个Text组件进去吗?当然不是,咱们持续到MenuBarScope里边看下,里边有五个组件,别离是MenuSeparatorItemCheckboxItemRadioButtonItem,也便是在MenuBarScope里边能够运用这五个组件,除了Separator很好了解,是个分割线,其他四个咱们看下怎么运用

Menu

从近期开发的Compose DeskTop项目中收获的四个知识点

经过英文注释咱们知道Menu组件的四个参数的作用,text便是菜单的案牍,mnemonic是设置单个字符来触发菜单,enable表明这个菜单能否运用,content便是这个菜单点击后弹出来的下拉框内容,它也是个MenuScope,表明能够给菜单设置子菜单,现在咱们来写个Menu看看作用

从近期开发的Compose DeskTop项目中收获的四个知识点

代码中给运用加了个姓名就叫”菜单”的菜单,然后在菜单里边又建了一个子菜单,姓名叫“菜单aa”,以此类推接连套了三个,一个简略的菜单里边翻开子菜单的功用就做好了,作用如下

从近期开发的Compose DeskTop项目中收获的四个知识点

所以Menu的功用便是一个能够翻开子菜单的菜单项,那么真实的选项怎么设置呢,咱们用Item组件

Item

从近期开发的Compose DeskTop项目中收获的四个知识点

itemMenu的个别参数是相同的,不多做介绍,多出来三个不同的参数,别离是

  • icon:给Item设置图标
  • shortcut:快捷键,组合键
  • onClick:菜单选项的呼应事情

咱们先给上面的比方增加一个Item选项,并且点击的呼应事情便是退出程序

从近期开发的Compose DeskTop项目中收获的四个知识点

很简略,同Menu相同,直接给Item设置一个案牍就能够了,作用如下

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们现在给选项添加一个icon,直接运用painterResource函数将图片途径传进去就好了,跟咱们运用Image组件相同

从近期开发的Compose DeskTop项目中收获的四个知识点
从近期开发的Compose DeskTop项目中收获的四个知识点

接下去咱们给选项设置个快捷键,一般性一个菜单的选项都有快捷键,比方在AS里边运转一个程序的快捷键一般都是command+R,而在代码中,菜单选项的快捷键运用shortcut参数设置,它接收一个KeyShortcut对象,咱们看下KeyShortcut的结构函数就知道怎么运用它了

从近期开发的Compose DeskTop项目中收获的四个知识点

除了榜首个key,其他的都是布尔值,别离表明是否能够经过ctrl键,command键,Alt键或许shift键来触发事情,而Key里边便是其他按键,咱们进去看下

从近期开发的Compose DeskTop项目中收获的四个知识点

太多了只截取里一小部分,咱们看到每一个变量适当于键盘上的一个按键比方Key.A就适当于监听键盘上A键的点击事情,现在咱们给刚才的菜单上添加一个shortcut

从近期开发的Compose DeskTop项目中收获的四个知识点

这儿给选项设置了一个shortcut,当点下command键和D键后,选项能够触发呼应事情,咱们看下作用

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们在虚拟键盘上能够看到,当按下command+D的时分,咱们就算没有将菜单翻开点击选项,咱们的运用也退出了

CheckboxItem

这个一看姓名就知道是在菜单里边放一个复选组件,它的参数根本跟MenuItem差不多,仅有差异便是多了一个checked,这个表明当菜单翻开时分这个复选框默许是不是勾选上的,它的呼应事情onCheckedChange当复选框的状况发生改变的时分,就会回调一次

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们下面来做个比方来体验下,比方界面上有段案牍,案牍的内容跟跟着复选框的改变而改变,代码如下

从近期开发的Compose DeskTop项目中收获的四个知识点

itemChecked是个布尔值,当CheckboxItem的状况改变时分,会回调一个布尔类型的状况值,咱们在回调里边将状况值赋值给itemChecked,每一次赋值触发视图重组,来显现不同的案牍,作用如下

从近期开发的Compose DeskTop项目中收获的四个知识点

RadioButtonItem

这个组件同CheckboxItem在用法上相差不大,仅有的差异在于回调变成了监听点击事情,咱们能够用RadioButtonItem来完成同上面相同的功用,代码如下

从近期开发的Compose DeskTop项目中收获的四个知识点

终究作用是相同的,这儿就不展现了

挑选文件

咱们在做移动端开发的时分,经常会和手机设备里边的文件体系打交道,比方读取个文件,往文件里边写入点东西,可是当咱们在做桌面开发的时分,又怎么从电脑里边挑选文件呢?答案是JFileChooser,下面一个简略的比方来看下怎么运用

从近期开发的Compose DeskTop项目中收获的四个知识点

界面上有一个按钮,经过点击这个按钮咱们生成一个JFileChooser的实例,咱们一切挑选文件相关的操作都在JFileChooser里边,比方调用showOpenDialog办法便是翻开挑选文件的弹框,这个办法会返回一个Int值

  • JFileChooser.CANCEL_OPTION:表明点击来取消按钮关闭了弹框
  • JFileChooser.APPROVE_OPTION:表明选中了某个文件点击了翻开按钮,这个时分能够经过调用getSelectedFile办法获取选中的文件途径
  • JFileChooser.ERROR_OPTION:出现反常

终究将选中的途径显现在Text上,作用如下

从近期开发的Compose DeskTop项目中收获的四个知识点

过滤文件类型

现在是一切文件都能够选,JFileChooser还能够设置挑选的文件类型,运用setFilter办法,里边传入一个FileFilter类型的参数,咱们这儿运用它的一个子类FileNameExtensionFilter,它的结构办法里边有两个参数

从近期开发的Compose DeskTop项目中收获的四个知识点

榜首个参数description是显现在文件格局后边的描绘,第二个参数是一个String类型的可变参数,能够传入需求过滤的文件扩展名,比方“jpg”,”png”之类,咱们在上面的比方中加入文件类型过滤的功用,代码如下

从近期开发的Compose DeskTop项目中收获的四个知识点

这儿的意思是只能挑选jpg,png或许gif类型的文件,咱们看下作用

从近期开发的Compose DeskTop项目中收获的四个知识点

翻开指定目录

除此之外咱们还发现一个细节,每次都要从用户目录开端挑选,咱们能不能快速定位到方针目录呢,能够的,咱们能够先看下JFileChooser的结构办法

从近期开发的Compose DeskTop项目中收获的四个知识点

这儿总共有四个结构办法,除了默许办法什么都不传之外,还能够传入一个String类型的参数,或许File,这个就表明翻开指定目录,当这个指定目录为空的时分,默许是Windows上翻开的是我的文档,而Mac上便是用户目录,而获取默许目录途径的办法便是经过下面这段代码

FileSystemView.getFileSystemView().defaultDirectory.absolutePath

现在比方咱们想要直接翻开DeskTop目录,那么咱们代码应该这样写

从近期开发的Compose DeskTop项目中收获的四个知识点

直接在默许途径上追加想要翻开的目录就好了,作用如下

从近期开发的Compose DeskTop项目中收获的四个知识点

现在就能够直接翻开想要的目录了,JFileChooser里边还有许多设置的办法,比方设置弹框标题的,按钮案牍的,是否能够多选文件的,这些有兴趣的能够自己去测验下

体系弹框

在Android开发中,假如想要弹一个体系弹框,咱们都知道运用AlertDialog,并且现在跟着Android版别的升级,手机里边的体系弹框的UI款式现已没有曾经那样子难看了,可是在DeskTop开发里边,假如想要弹一个体系弹框该怎么做呢?虽然也有一个AlertDialog,可是这个是一个Composable组件,需求运用一个状况值来控制它是否刺进到LayoutNode树里边去,下面是一个展现AlertDialog的比方

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们看到在不做任何的款式调整下,这弹出来的东西现已不能算是个框了,假如想要让它颜值好看些,那么需求加上必定的代码量才行,那么有没有一个简略点的办法去弹一个框呢,毕竟有时分咱们只想运用弹框去展现点提示信息之类的案牍,那么咱们就要去运用swing里边的另一个组件JOptionPane

提示类弹框

比方有一段提示语案牍需求用弹框的方式展现出来,咱们用JOptionPane能够这样做

从近期开发的Compose DeskTop项目中收获的四个知识点

一个很桌面化的弹框就出来了,其间第四个参数messageType表明弹窗的类型,比方现在咱们弹的是info等级的,咱们能够改一下改成warning等级的试试看

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们看到将第四个参数改成JOptionPane.WARNING_MESSAGE之后,弹框里的icon变了,变成一个带警告标志的icon,咱们还能够将messageType改成JOptionPane.ERROR_MESSAGE,那么弹出来的框就变成反常等级的了

从近期开发的Compose DeskTop项目中收获的四个知识点

当然假如觉得边上这个icon有点占地方,碍眼,那么就能够运用另一个messageTypeJOptionPane.PLAIN_MESSAGE来将这个icon去掉

从近期开发的Compose DeskTop项目中收获的四个知识点

多个按钮的弹框

这种框也是咱们比较常见的,一般有若干个按钮,需求用户去挑选点击哪一个,然后执行相应逻辑,咱们运用showConfirmDialog办法去展现这样的弹框,这个办法的参数与上面那个showMessageDialog简直相同,仅有多了一个optionType,它是一个int值,不同的值表明展现的按钮数量也不同,一般可供挑选的有这三个值YES_NO_OPTION, YES_NO_CANCEL_OPTION还有 OK_CANCEL_OPTION,至于点击了哪一个,咱们经过showConfirmDialog的返回值来判别,点击了yes或许ok,返回0,点击no或许cancel返回1,假如有三个按钮,那么第三个按钮点击返回2,咱们看下面的比方

从近期开发的Compose DeskTop项目中收获的四个知识点

这个比方里边便是经过返回值result的不同来展现不同的按钮案牍,比起Android里边的AlertDialog便利了不少,不用去给每个按钮添加点击事情

带有输入框的弹框

也有某些场景里边需求让弹框里边有个输入框,那么咱们能够用showInputDialog办法,这个办法里边供给了如下几个参数

  • parentComponent:弹框的父容器
  • message:适当于是输入框的label
  • title:弹框的标题
  • messageType:弹框的类型
  • icon:设置边上的图标
  • selectionValues:选项列表
  • initialSelectionValue:初始值

其间假如同时设置了selectionValuesinitialSelectionValue,那么输入框里边只会展现selectionValues数组的榜首个值,initialSelectionValue会无效,输入框里边的内容也会从showInputDialog办法返回,下面咱们来简略展现一个带输入框的弹框吧

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们看到输入框里边输入一段内容今后,点了确认,内容就展现在了按钮上,咱们再给输入框加上一段初始值

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们看到什么也不做,直接点确认今后,按钮上就显现了输入框里边的初始值,另外因为JOptionPane里边的代码都是用java写的,所以就算咱们暂时用不到iconselectionValues,也必须显式的将这俩参数写出来,咱们现在给输入框加上几个可选项,看看初始值是不是真的不显现出来了

从近期开发的Compose DeskTop项目中收获的四个知识点

咱们看到初始值的确是不出来了,取而代之的是输入框展现的是selectionValues数组的榜首个值,点击确认之后,挑选好的值就显现在了按钮上

去除Window的边框

正常情况下,一个桌面运用都会有个边框,在Mac上表现为左上角带有三个按钮,别离是退出运用,最小化以及最大化

从近期开发的Compose DeskTop项目中收获的四个知识点

可是假如突然有个需求,需求隐藏这个边框,让你去定制一排这样的按钮并完成同样的功用,那么该怎么做呢?其实蛮容易的,咱们看下面的比方

从近期开发的Compose DeskTop项目中收获的四个知识点

这是很简略的一段代码,仅仅只是展现一个带有标题的窗口,假如咱们想要隐藏最上面的边框,咱们能够用Window组件的其间一个特点transparent,这是一个布尔值,默许为false,咱们只要将它显现为true就能将整个窗口透明化,然后在将主体内容设置个布景色彩,那么看起来的作用就像去掉边框相同了

从近期开发的Compose DeskTop项目中收获的四个知识点

不过要注意,上面这个代码假如运转起来是会报错的,会有下面这段日志出来

从近期开发的Compose DeskTop项目中收获的四个知识点

关键信息便是榜首行的那段话“Transparent window should be undecorated!”,咋弄呢?也容易,Window组件里边还有一个特点undecorated,默许也会false,把它设置为true就能够了,所以假如想要将一个窗口设置为透明,必须同时将transparentundecorated两个特点都设置为true才能够,咱们加上这个特点在看下作用

从近期开发的Compose DeskTop项目中收获的四个知识点
从近期开发的Compose DeskTop项目中收获的四个知识点

咱们现在就得到了一个无边框的布景为白色的页面,那么接下来咱们就在页面里边加上三个按钮来别离完成退出运用,最小化以及最大化的功用吧,首要添加上三个按钮

从近期开发的Compose DeskTop项目中收获的四个知识点
从近期开发的Compose DeskTop项目中收获的四个知识点

最简略的便是退出运用,因为咱们在WindowonCloseRequest特点上就现已完成了,调用exitApplication函数就能够完成退出运用的功用

从近期开发的Compose DeskTop项目中收获的四个知识点
从近期开发的Compose DeskTop项目中收获的四个知识点

至于最小化以及全屏显现的功用,咱们需求用到WindowState这个类,运用rememberWindowState()函数去创立它,并将它赋值给Window组件的state特点

从近期开发的Compose DeskTop项目中收获的四个知识点

其间最小化对应着WindowState里边的特点isMinimized,咱们将它设置为true就能完成最小化功用了,代码如下

从近期开发的Compose DeskTop项目中收获的四个知识点

剩余的最大化就需求用到WindowStateplacement特点,这个特点需求给它设置一个WindowPlacement枚举对象,它一共有三个值,别离为

从近期开发的Compose DeskTop项目中收获的四个知识点

这些值都表明着窗口以哪种方式展现在屏幕上,其间Maximized就表明窗口最大化,Floating表明以开始的方式展现在屏幕上,所以咱们能够在最大化的按钮上完成点击一次最大化,再点击一次康复至原来的形状

从近期开发的Compose DeskTop项目中收获的四个知识点

总结

写这些东西主要是最近刚好在写一个DeskTop的小项目,刚好要用到这些东西,就顺便总结一下,个人觉得关于一个经常开发移动端的开发者来讲,假如要开发一个完整的DeskTop项目的话,除了把握一些必要的Compose知识点之外,也必定要具备一些Window组件的特性,还有一些体系api以及swing的知识点,仍是很有协助的