Compose Desktop 像素级高仿网易云桌面版应用

作者：sskEvan
juejin.cn/post/7215528103467679804

NCMusicDesktop

去年刚用Jetpack Compose写了个仿网易云app ，最近发现compose-jb正式版已经发布到了v1.3.1， 又玩了一下Compose Desktop，决定搞了个桌面版的 NCMusicDesktop，数据源还是来自 Binaryify 大佬的 NeteaseCloudMusicApi～

由于以前没有开发桌面应用的经验，索性想按照Android jetpack的套路来开发，然而 Navigation、Lifecycle 、ViewModel、LiveData 等等这些在compose-jb中，暂时通通没有～ 不要慌，一番查找在掘金上看到一篇文章《推销 Compose 跨平台 Navigation：PreCompose》， 讲了 Precompose 这个跨平台 Navigation 框架的使用， 它基本复刻了Jetpack Navigation、Lifecycle、ViewModel这些组件，使用方式也基本保持一致，美滋滋！当然LiveData已经被废弃了，推荐使用Flow代替～至于网络请求，Retrofit照用不误，又一次美滋滋～

怎么用Android老套路来写Desktop应用

• 老规矩，先定义一波BaseResult、BaseViewModel、ViewStateComponent(页面状态切换组件)

//代码略

• Model层

class LyricResult(
    val transUser: LyricContributorBean?,
    val lyricUser: LyricContributorBean?,
    val lrc: LrcBean?,
    val tlyric: LrcBean?
) : BaseResult()

• ViewModel层

class CpnLyricViewModel : BaseViewModel() {
     fun getLyric(id: Long) = launchFlow {
        NCRetrofitClient.getNCApi().getLyric(id)
    }
}

interface NCApi {
    @GET("/lyric")
    suspend fun getLyric(@Query("id") id: Long): LyricResult
}

• View层

@Composable
fun CpnLyric() {
    ViewStateComponent(
        key = "CpnLyric-${id}",
        loadDataBlock = {viewModel.getLyric(id)}
    ) {
        LyricList(it)
    }
}

怎么播放音乐

至于在Compose Desktop上怎么播放音乐呢，毕竟没有Android的MediaPlayer，在github上找了找，发现 succlz123 大佬开源的 Compose Multiplatform 项目AcFun-Client-Multiplatform，里面有视频播放的功能，是基于vlcj来实现的，看了下vlcj的api，使用 AudioPlayerComponent 播放音乐不是问题

关于嵌套滑动

开发过程中，有些交互感觉需要涉及到嵌套滑动，在Jetpack Compose中，使用NestedScrollConnection来处理嵌套滑动到场景，于是乎，写了一堆✨✨代码后， 发现NestedScrollConnection在Compose Desktop中完全不起作用，后面找了下github的issue，发现有哥们也遇到了哈哈哈，然而官方21年的回复是暂时没有计划， 到现在还是没有解决，凉飕飕～

第三方框架

• PreCompose ： https://github.com/Tlaster/PreCompose
• zxing: https://github.com/zxing/zxing
• compose-imageloader-desktop : https://github.com/succlz123/compose-desktop-imageloader
• vlcj:https://github.com/caprica/vlcj

运行效果图

项目源码

https://github.com/sskEvan/NCMusicDesktop

-- END --

推荐阅读