Flutter

Flutter 仿网易云音乐App(基础版)

2020-10-08  本文已影响0人  吉哈达

首页

image image image

歌曲播放和卡片切换

如正版一样,歌曲播放进度在播放/暂停 按钮的边框显示(页面下方,由黑变红)

没登录的话,一般只能听12秒
目前只做了 模块(‘超带感的说唱精选’)的点播功能,
其他地方可以直接套用(1、2行代码即可),控制台已经写好
image

卡片(音乐日历)切换动画也是仿照正版来

image

个人中心和抽屉(未登录)

image

云村

image

视频(未登录)

视频模块需要登录才能看到

波纹动画依然是仿照正版的
image

登录

image image

视频(已登录)

image image

登录前后页面变化

我们看一下,我的、抽屉页面的前后差异

image

再退出一下

‘切换账号’有退出的功能
image

搜索页面

image image image

所用接口

接口为大佬们开源的网易云API,在此感谢

开源网易云api

我花了90多买了个云服务把接口clone下来后,开发使用。

各位clone我项目时,可以用我的接口也可以自己搭一个
一年90多的云服务器,你们用时轻点儿...

Tip:
接口返回的数据不太稳定,有的时候还会变形,对于移动端开发来说,造成了一些麻烦,各位开发时要注意。

另外,如果你运行这个demo发现出错了,那大概率时接口废了或者数据变形了,看日志吧

开发框架 Bedrock

此项目基于Bedrock 快速开发框架开发

MVVM + Provider 设计模式

Bedrock 快速开发框架

初衷

开发这个demo并不是为了对flutter进行练习,而是因为前些日子对flutter路由模块的封装,并应用于Bedrock框架。

在重构了原项目的demo以及添加了针对性演示demo后,觉得有必要再在一个复杂一些的项目里测试一下,因此便有了这个:

仿网易云音乐(基础版)

也算是给我的框架增加了一个绘声绘色的大Demo吧 :)。

与此同时,既然是Demo,在项目开发时尽量做到点到为止,避免开发者阅读过多的冗余的页面代码,而无法了解框架的工作原理。

由于没有设计图,页面全凭感觉来,加之接口的不稳定(类型/结果),开发起来确实费劲...
所以叫基础版

路由封装的简介

此次路由封装,不但减少了开发时的代码书写,并且对外暴露出state,可以做到任何粒度的刷新。

但这并不意味着可以抛弃provider

在兼容静态路由的优势同时,对于静态路由的 map 传值,取而代之的是构造函数传值,这样避免了key的输错。

更多介绍可以看下面的文章:

关于这次flutter路由封装的架构介绍

Demo功能概览

大家可以clone下项目后,挑拣未实现的功能来实现以熟悉框架

登录(注册未实现,没有空号了)

我的页面:登录/非登录状态(不含子级页面)

发现页面: 点歌 (不含子级页面)

云村页面:广场&关注子页(不含其它子级页面)

视频页面:登录/非登录状态,各tab子页面,视频播放(不含其它子级页面)

我的抽屉:登录/非登录状态(不含子级页面)

搜索页面:支持搜索历史本地化、清理缓存,搜索及搜索建议,(不含搜索结果和其它子级页面)

底部音乐bar:后台音乐功能模块,支持单点播放,(未实现底部控制台点击后弹出的播放历史记录和歌单,这个可能后期要做,蛮有意思的)

项目地址

仿网易云音乐

感谢

再次感谢开源网易云音乐api的大佬们。

同时欢迎各位提issue,谢谢 :)

Demo代码可能有些随意和bug,还请见谅。
上一篇下一篇

猜你喜欢

热点阅读