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年的回复是暂时没有方案， 到现在仍是没有解决，凉飕飕～

Compose Desktop实战网易云桌面应用

Compose Desktop实战网易云桌面应用

第三方结构

  • PreCompose
  • zxing
  • compose-imageloader-desktop
  • vlcj

运行效果图

项目源码地址

github.com/sskEvan/NCM…

参阅文章

从 0 到 1 搞一个 Compose Desktop 版别的天气运用（附源码）
推销 Compose 跨渠道 Navigation：PreCompose