注册

Compose Desktop实战网易云桌面应用

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年的回复是暂时没有计划,
到现在还是没有解决,凉飕飕~


nested_issue1.png


nested_issue2.png


第三方框架

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

运行效果图


登录.gif


首页.gif


歌单列表.gif


歌单详情.gif


音乐播放.gif


主题切换.gif


项目源码地址


github.com/sskEvan/NCM…


参考文章


从 0 到 1 搞一个 Compose Desktop 版本的天气应用(附源码)

推销 Compose 跨平台 Navigation:PreCompose


作者:sskEvan
来源:juejin.cn/post/7215528103467679804

0 个评论

要回复文章请先登录注册