Compose for Desktop (Kolin跨平台编写Mac微信应用)

最新推荐文章于 2024-05-18 16:30:39 发布
置顶 最新推荐文章于 2024-05-18 16:30:39 发布
阅读量7.1k 收藏 23
点赞数 16
分类专栏： Android架构组件 文章标签： Compose 跨平台 Kotlin跨平台 ComposeDesktop Mac微信编写
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37667770/article/details/115589263
版权

春光不自留，莫怪东风恶

掘金博客地址-创作不易-希望点赞

在这里插入图片描述

image.png

Compose for Desktop

      Compose是由Kotlin语言快速编辑界面的框架，基于谷歌的现代工具箱，由JetBrains为您带来。
Compose for Desktop简化并加速了桌面应用程序的UI开发，并允许Android和桌面应用程序之间大量的UI代码共享,这是来自官方的一些阐述解释。Compose初忠是声明式UI,当然了跨平台的纷争乱战时代,它也有着跨平台的梦想。在桌面端还未流行和普及之时为何不用划水的时间来尝试一下Compose for
Desktop！

一、环境

      IntelliJ IDEA 2020.3以后的版本根据新建的类型compose desktop、compose app、compose web都可以自动依赖相关的gradle。我下载的最新版本,pojie有点辣手,之前的注册码和.jar方式都可以,如果由大佬知道破解方式可以楼下指点,先试用30天。截图看文字,相信大佬们都能看懂？左边选择Kotlin,右边会出现各种kotlin能干的事:Desktop、Web、Mobile…kotlin牛逼!

image.png

image.png

image.png

一、Desktop

      Name、Location、Project Template->Desktopo即可、Build System 随便、Project JDK->11以上即可,继续finish完成。

你可以点击一下下图的main函数前面的绿色运行箭头…等待奇迹出现
image.png

运行的效果,当然了这是我没事干用贝塞尔曲线绘制的那个男人,时间问题没绘制完。大家如果看过我的自定义相信绘制不是难题!!

image.png

上面我们开发环境已经完毕,接下来是不是有点小激动,我们开始代码编写。

二、Desktop UI分析 - 微信

      微信的桌面端说不上花里胡哨,但是很优雅简约不缺美观。我们这篇文字主要模仿这个UI进行尝试Compose for Desktop

image.png

素材准备

为了达到比较一致的效果,我们通过PS进行素材获取。

1.打开微信截图需要图标。

2.PS截图用魔术棒进行选区删除不需要部分。

image.png

3.通过选区缩放来进行调试边界。

image.png
保存图片即可。逐步操作需要图片。

布局分析

      布局我们经常用,也知道可分为这三块从左到右都有联动。所以我们先进行一级布局UI。
image.png

1.左侧Colum又上到下配合Spacer完美

2.中间的Box内部ListView加搜索框

3.右侧ListView

三、Desktop UI编写 - 微信-Left

      Compose for Desktop简化并加速了桌面应用程序的UI开发，并允许Android和桌面应用程序之间大量的UI代码共享既然官方如此说了和Android端的UI大量共享,我们接下来体验一下。当然了我感受了一波的却大量的组件都基本一致。就自定义方面缺少一些API,阴影的设置,如果你发现了可以告诉一下我，感激不尽。既然和Android一致那么接下来大量的代码,接住了…

image.png

上面分析：1.左侧Colum又上到下配合Spacer完美

实体类封装点击图片路径

/**
 * @param defaultPath 默认图片路径
 * @param selectedPath 选择路径
 * @param path 实际路径
 * @param selected 是否选中
 */
data class WxSelectedBean(val defaultPath:String,var selectedPath:String,var path:String,var selected:Boolean)

负值图片路径

object WxViewModel : RememberObserver {
    val isAppReady = mutableStateOf(false)
    val position = ArrayList<WxSelectedBean>()
    fun initData() {
        var selectedDatas = arrayListOf<WxSelectedBean>()
        selectedDatas.add(
            WxSelectedBean(
                "images/head_lhc.png",
                "images/head_lhc.png",
                "images/head_lhc.png",
                 false
            )
        )
        selectedDatas.add(
            WxSelectedBean(
                "images/message_unselected.png",
                "images/message_selected.png",
                "images/message_selected.png",
                 true
            )
        )
        selectedDatas.add(
            WxSelectedBean(
                "images/person_unselected.png",
                "images/person_selected.png",
                "images/person_unselected.png",
                false
            )
        )
        selectedDatas.add(
            WxSelectedBean(
                 "images/connected_unselecte.png",
                "images/connected_selected.png",
                "images/connected_unselecte.png",
                 false
            )
        )
        selectedDatas.add(
            WxSelectedBean(
                "images/file_default.png",
                "images/file_default.png",
                "images/file_default.png",
                false
            )
        )
        selectedDatas.add(
            WxSelectedBean(
                "images/frends.png",
                "images/frends.png",
                "images/frends.png",
                false
            )
        )

        selectedDatas.add(
            WxSelectedBean(
                "images/phone.png",
                "images/phone.png",
                "images/phone.png",
                false
            )
        )
        selectedDatas.add(
            WxSelectedBean(
                "images/mulu.png",
                "images/mulu.png",
                "images/mulu.png",
                false
            )
        )
        position.addAll(selectedDatas)
    }
    

    override fun onAbandoned() {

    }

    override fun onForgotten() {
    }

    override fun onRemembered() {
    }
}

界面

import androidx.compose.animation.core.TweenSpec
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.desktop.Window
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp
import module_view.WxSelectedBean
import module_view.WxViewModel

fun main() = Window {
    WxViewModel.initData()
    var wxData by remember { mutableStateOf(WxViewModel.position) }
    //选中的索引
    var selectedIndex by remember { mutableStateOf(1) }
    //图片选中动画执行与否
    var imageAnimal by remember { mutableStateOf(true) }
    //图片旋转动画
    val imageAngle: Float by animateFloatAsState(
        if (imageAnimal) {
            0f
        } else {
            360f
        }, animationSpec = TweenSpec(durationMillis = 1001)
    )
    MaterialTheme {
        Scaffold {
            Row {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxHeight().width(66.dp)
                        .background(Color(247, 242, 243))
                ) {
                    ImageRes(
                        getPath(wxData, selectedIndex, 0),
                        modifier = Modifier.padding(top = 30.dp).size(48.dp)
                            .clickable(role = Role.Image) {
                            imageAnimal = !imageAnimal
                        }.rotate(imageAngle)
                    )

                    ImageRes(
                        getPath(wxData, selectedIndex, 1),
                        modifier = Modifier.padding(vertical = 20.dp).size(42.dp).clickable {
                            selectedIndex = 1
                        })
                    ImageRes(getPath(wxData, selectedIndex, 2),
                        modifier = Modifier.size(32.dp).clickable {
                            selectedIndex = 2
                        })
                    ImageRes(
                        getPath(wxData, selectedIndex, 3),
                        modifier = Modifier.padding(vertical = 20.dp).size(30.dp).clickable {
                            selectedIndex = 3
                        }
                    )
                    ImageRes(getPath(wxData, selectedIndex, 4), modifier = Modifier.size(30.dp))
                    ImageRes(
                        getPath(wxData, selectedIndex, 5),
                        modifier = Modifier.padding(vertical = 20.dp).size(30.dp)
                    )
                    Spacer(modifier = Modifier.weight(1f))
                    ImageRes(
                        getPath(wxData, selectedIndex, 6),
                        modifier = Modifier.padding(vertical = 20.dp).size(35.dp)
                    )
                    ImageRes(
                        getPath(wxData, selectedIndex, 7),
                        modifier = Modifier.padding(vertical = 20.dp).size(30.dp)
                    )
                }
            }
        }

    }

}


/**
 * @param wxData 数据集合
 * @param selectedIndex 选中的索引
 * @param currenIndex 当前Image对应的索引
 * return 返回各个按钮选中和未选中图片路径
 */
private fun getPath(
    wxData: ArrayList<WxSelectedBean>,
    selectedIndex: Int,
    currenIndex: Int
): String {
    return if (selectedIndex == currenIndex) {
        wxData[currenIndex].selectedPath
    } else {
        wxData[currenIndex].defaultPath
    }

}

看看效果?

compose_desk_1.gif

四、Desktop UI编写 - 微信-Center

      中间部分如下图分析可见Box里面一个Row一个列表搞定？对于UI代码编写之前,大概的代码框架构思还是比较重要的。<

最低0.47元/天 解锁文章
路很长oO
关注
  • 16
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Jetpack Compose 为什么可以跨平台？| 开发者说·DTalk
Android开发者
12-22 408
本文原作者：fundroid，原文发布于：AndroidPubJetpackCompose 不止用于 Android 开发，凭借 Kotlin 的语言优势，Jetpack Compose 变身为一个极具潜力的跨平台 UI 解决方案。本文从 Compose Runtime 的视角出发，一探 Jetpack Compose 实现跨平台的底层原理。Compose ArchitectureJetpack...
使用Jetpack Compose开发PC桌面应用
郭霖
01-09 927
/ 今日科技快讯 /近日，市场研究公司Motor Intelligence发布的最新报告显示，尽管2022年美国整体汽车市场出现萎缩，但电动汽车销量飙升了三分之二。同时，传统汽车制造商推出大量混合动力车型，这帮助缩小了电动汽车巨头特斯拉的领先优势。Motor Intelligence的数据显示，汽车制造商去年在美国共售出了807180辆电动汽车，占汽车总销量的5.8%，高于2021年的3....
Compose Desktop 写一个 Android 提效工具
最新发布
bugyinyin的博客
05-18 943
是支持windows和mac的，并且支持浅色模式和暗黑模式，下面的截图都是在暗黑模式下。目的：都是为了减少重复性工作，节省开发者时间。简化Hprof文件管理：轻松一键导出、管理和分析Hprof文件，全面支持LeakCanary数据处理。内存泄漏分析：对 Hprof 文件进行内存泄漏分析，快速定位问题根源。位图资源管理：提供位图预览、分析和导出功能。Deep Link快速调用：管理和测试Deep Link，提高开发和调试速度。开发者选项快捷操作：包含多项开发者选项的快捷操作。
Jetpack Compose for Desktop是Kotlin的现代UI框架，可轻松愉快地构建高性能，美观的用户界面。-Android开发
05-26
Jetpack Compose for Desktop是Kotlin的现代UI框架，可轻松愉快地构建高性能，美观的用户界面。 通过JetBrains的Compose for Desktop，适用于台式机平台（macOS，Linux，Windows），位于核心Compose存储库之外的组件的https://android.googlesource.com/platform/frameworks/support的Compose Kotlin UI框架端口。 存储库组织图稿-设计工件基准-基准的集合ci-持续集成帮助程序cef-Jetpack Compose示例中的CEF集成-台式机和Android codeviewer的多平台Compose应用程序的示例-文件
Compose跨平台第一弹：体验Compose for Desktop
Eqiqi的博客
01-09 1473
Compose是Android官方提供的声明式UI开发框架，而Compose Multiplatform是由JetBrains 维护的，对于Android开发来说，个人认为学习Jetpack Compose是必须的，因为它会成为Android主流的开发模式，而compose-jb作为一个扩展能力，我们可以有选择的去尝试。今天我们先来了解一下使用compose-jb开发一个桌面端应用的流程。
Compose Desktop小白入门教程，从零到打包，一看就会~
qq_43666360的博客
06-20 2787
作为一名安卓小白，大部分时间都在忙着学安卓，电脑软件的开发可谓是一点没接触过，在学习了Compose之后，发现谷歌近年新推出的Compose Desktop技术可以轻松在电脑上实现好看的图形界面，那么下面我们就来写个小程序练练手！第一次写文章，写的不是很好，代码也写得很简单qwq，本意就是分享一下这个有趣的开发过程，compose desktop属于刚起步阶段，还有很大优化空间，但是作为一个懒人能像开发安卓端一样去开发电脑端，简直不要太舒服，希望后续它能带来更多惊喜！
Jetpack Compose for Desktop实现复杂的自动布局网格
m0_62289956的博客
03-17 912
为了方便有学习需要的朋友，我把资料都整理成了视频教程（实际上比预期多花了不少精力），由于篇幅有限，都放在了我的GitHub上，点击即可免费获取！Androidndroid架构视频+BAT面试专题PDF+学习笔记当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。
asteroids-compose-for-desktop:简单的太空游戏，使用Compose for Desktop内置！
04-16
使用Compose for Desktop内置的小行星 在Compose for Desktop之上构建2D空间游戏的基本实验。 :rocket: 用./gradlew run 。 随时探索和享受！ :full_moon:
compose-jb：Jetpack Compose for Desktop，这是Kotlin的现代UI框架，可轻松愉快地构建高效，美观的用户界面
02-01
总的来说，Jetpack Compose for Desktop（compose-jb）为Kotlin开发者提供了一个强大且现代的工具，使他们能够构建出高效、美观的桌面应用，同时享受到声明式编程和跨平台开发的优势。无论是对Android开发还是桌面...
ComposeSlackDesktop：使用Jetpack Compose UI工具包的桌面Slack演示应用程序
02-03
- `jetpack-compose-desktop`：强调项目专注于Jetpack Compose在桌面环境中的应用。 - `KotlinKotlin`：可能是重复的标签，再次确认项目使用Kotlin语言。 【详细内容】： Jetpack Compose是Google推出的一种现代化...
简单的太空游戏，使用Compose for Desktop内置！-Android开发
05-26
在Compose for Desktop之上构建2D空间游戏的基本实验。 with以./gradlew运行。 随时探索和享受！ with使用Compose for Desktop构建的小行星在Compose for Desktop之上构建2D空间游戏的基本实验。 with以./gradlew...
Compose For Desktop 实践：使用 Compose-jb 做一个时间水印助手
sinat_17133389的博客
05-21 1173
Compose-jb 让原本的移动端开发者也能很方便的进行桌面端开发，但是毕竟 Compose 只是一个 UI 工具包，对于实际的业务逻辑代码，还是需要调用原生 API 来实现。好在 Kotlin 是 jvm 语言，并且 Compose-jb 的实现也是基于 java 的 Swing ，也就是说对于安卓开发者来说，即使很多逻辑需要调用的也只是 Swing API ，对于安卓开发来说，基本没有什么门槛，看一下文档基本就能上手写了。
Jetpack Compose for Desktop简介与使用
xiangzhihong8的专栏
04-29 3291
如果大家使用Jetpack Compose 开发过Android App，那么对于使用Jetpack Compose构建原生 Android 界面的新工具包就不会陌生。Jetpack Compose 使用更少的代码、强大的工具和直观的 Kotlin API 简化并加快了 Android 上的界面开发。而去年的年底，谷歌发布了Jetpack Compose for Desktop套件，不难发现，这是 kotlin 一直在搞的套路，多平台共享代码。 总的来说，Compose for Desktop就是为了简化并
Compose Desktop 使用中的几个问题（分平台加载资源、编写Gradle 任务下载平台资源、桌面特有组件、鼠标&键盘事件）
sinat_17133389的博客
10-17 1114
以上就是我最近在修改使用 Compose 实现的纯桌面端程序时发现的一些问题以及解决方法。完整的项目源码在此：。其实在修改这个程序时还发现了很多有趣的问题，但是限于这篇文章已经不短了，所以我也就不再继续写了，感兴趣的可以看看源码。
使用 Compose Desktop 编写一个移轴摄影处理软件
sinat_17133389的博客
12-10 189
移轴摄影一般指使用移轴镜头拍摄出来的照片，但是现在也有很多使用非移轴镜头拍摄但是后期处理成移轴效果的照片也被称为移轴摄影。移轴摄影的中的移轴翻译自Tilt-shift，即倾斜与位移。之所以叫这个名字是因为移轴镜头通常会平移、倾斜或旋转镜头主光轴相对于图像传感器的位置，从而达到调整被摄物的透视关系或聚焦的目的。移轴摄影通常用于拍摄建筑物全景，一般为了拍摄出建筑物的全景都会使用广角镜头，并且通常是俯拍或仰拍，这就会导致拍摄出来的建筑物“近大远小”，拍出来的建筑是严重变形的。
从近期开发的Compose DeskTop项目中收获的四个知识点
m0_64365896的博客
06-05 798
写这些东西主要是最近刚好在写一个DeskTop的小项目，刚好要用到这些东西，就顺便总结一下，个人觉得对于一个经常开发移动端的开发者来讲，如果要开发一个完整的DeskTop项目的话，除了掌握一些必要的Compose知识点之外，也一定要具备一些Window组件的特性，还有一些系统api以及swing的知识点，还是很有帮助的。
Jetpack Compose for Desktop 与 QT 、C#相比有什么优势
07-11
Jetpack Compose for Desktop 是由 Google 开发的一款用于构建跨平台用户界面的框架，它相比于 QT 和 C# 具有以下一些优势： 1. 基于现代的 UI 声明式编程模型：Jetpack Compose for Desktop 使用了现代的声明式编程模型，让开发者能够更直观地描述用户界面，并实时预览结果。这种方式比传统的命令式编程模型更简洁、更易于理解和维护。 2. Kotlin 语言支持：Jetpack Compose for Desktop 是使用 Kotlin 编写的，而 Kotlin 是一种现代、功能强大的编程语言，它可以与 Java 无缝互操作，并且提供了许多方便的特性和扩展。这使得开发者在使用 Jetpack Compose for Desktop 时能够更加高效和愉快。 3. 跨平台支持：Jetpack Compose for Desktop 支持多个平台，包括 Windows、macOS 和 Linux。这意味着开发者可以使用相同的代码库构建适用于不同操作系统的用户界面，从而简化了跨平台开发。 4. 集成 Jetpack 生态系统：Jetpack Compose for Desktop 是 Android Jetpack 生态系统的一部分，可以与其他 Jetpack 组件和库无缝集成，如 ViewModel、LiveData 等。这使得开发者能够更好地利用 Jetpack 提供的强大功能和工具。 总的来说，Jetpack Compose for Desktop 相比于 QT 和 C# 提供了更现代化、更简洁、更高效的开发体验，使开发者能够更快速地构建出高质量的跨平台用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值