Flutter实战 | 从 0 搭建「网易云音乐」APP（4、排行榜、播放页面）

本系列可能会伴随你们很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。

下面是该APP 功能的思惟导图：

前期回顾：

1. Flutter实战 | 从 0 搭建「网易云音乐」APP（1、建立项目、添加插件、通用代码）
2. Flutter实战 | 从 0 搭建「网易云音乐」APP（2、Splash Page、登陆页、发现页）
3. Flutter实战 | 从 0 搭建「网易云音乐」APP（3、每日推荐、推荐歌单）

本篇为第四篇，在这里咱们会搭建排行榜页面、播放歌曲页面。

排行榜页面

先来看图：

页面很简单，两个列表：

1. 官方榜 -> ListView
2. 更多榜单 -> GridView

注意：这里必定要使用这个接口，才会出现每一个榜单中的1. 2. 3. 首歌。

话很少说，直接来看接口返回值：

返回值大体如此（删除了一部分用不到的数据）。

能够看到我标了两个红框框，这就是该接口 list 参数中不同的地方：一个有歌，一个没有歌。

这表明了什么？这就是官方榜单和更多榜单的区别！

既然如此，区分的代码就以下了：

var officialTopListData =
  data.list.where((l) => l.tracks.isNotEmpty).toList(); // 官方榜的数据
var moreTopListData =
  data.list.where((l) => l.tracks.isEmpty).toList(); // 更多榜单的数据
复制代码

只须要判断 tracks 的数据是否为空就行了。

而后就只须要根据各自的数据来建立列表就行了。

不过我这里「官方榜」也是列表的一部分。因此在点击 index 的时候，不要忘记 -1。

接下来就是跳转到「榜单详情页」。

由于开始在查看接口文档的过程当中，找到了这样一段：

当时就想着在「榜单接口」中找到该id，可是我发现根本没有！

然而就当我绝望的时候在 GitHub 的 issue 中找到这么一段对话：

啊！！瞬间幸福感爆棚！页面我都不用写了，直接用原来的「歌单」页面就行了！

so easy！

播放歌曲页面

「播放歌曲页面」能够说是整个APP的灵魂所在。

逻辑什么的以后再说，这节就单单来讲UI。

如图所示：

播放	暂停

从上到下，七个部分：

1. 标题（主标题、副标题）
2. 唱针
3. 碟片
4. 对该歌曲的操做（喜欢、下载等）
5. 进度条
6. 对播放的操做（暂停、下一首等）
7. 最后还有一个背景

1. 标题

首先，这里的标题是两行的。

AppBar 的title 须要的是一个 Widget，那咱们就能够随意操做：

title: Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text(
      model.curSong.name,
      style: commonWhiteTextStyle,
    ),
    Text(
      model.curSong.artists,
      style: smallWhite70TextStyle,
    ),
  ],
)
复制代码

2. 唱针

装在唱机唱头上的针，通常由钢或人造宝石制成。它跟随声盘纹道的调制，把所得机械运动传送给唱头的换能元件，使之转换为相应的声频信号。

这里的唱针是一个图片，他的做用就是移开，放上，也就是对应着 播放、暂停。

这里有个问题是，唱针是个图片，咱们要对该图片进行旋转操做，

而旋转的中心点左上角图中1的位置：

那咱们就要对整个图片作一个了解，首先看看这个中心在原图的哪里：

用自带的看图工具大体看一下，在 45 * 45 的位置，而后查看一下原图的尺寸：

有了这两个参数咱们就好定义中心点：

RotationTransition(
  turns: _stylusAnimation,
  alignment: Alignment(
    -1 +
    (ScreenUtil().setWidth(45 * 2) /
     (ScreenUtil().setWidth(293))),
    -1 +
    (ScreenUtil().setWidth(45 * 2) /
     (ScreenUtil().setWidth(504)))),
  child: Image.asset(
    'images/bgm.png',
    width: ScreenUtil().setWidth(146.5),
    height: ScreenUtil().setWidth(252),
  ),
),
复制代码

首先咱们设置该图片的宽高比和原图一致。

而后定义 Alignment，注意：

Alignment 左上角的值为：Alignment(-1.0, -1.0)，

中心点的的值为：Alignment(0.0, 0.0)，

右下角的值为：Alignment(1.0, 1.0)；

从上面咱们能够看得出来，Alignment 是从中心开始的坐标系，左和上为负数、右和下为正数。

那咱们控制唱针的中心是在左上角，因此确定是负数，因此咱们用 -1+。

而既然是从中心开始的，那么计算的时候要用刚才看到的坐标 * 2 / 宽（高）。

这样获得的值才是准确的。

3. 碟片

咱们所看到的碟片有两种状态：

1. 正在转
2. 中止

也是正好对应上 播放和暂停。

旋转的就很少说了，RotationTransition 了解一下。

监听一下状态，在完成的时候继续就能够了。

4. 对该歌曲的操做（喜欢、下载等）

这个就比较简单了，一个Row 里面全是 Expanded 就能够了。

大体代码以下：

5. 进度条

进度条也很简单，可是逻辑稍微复杂一点，咱们后续再说。

进度条使用 Slider 就能够了。

关于 Slider 的样式，代码以下：

SliderTheme(
  data: SliderThemeData(
    trackHeight: ScreenUtil().setWidth(2),
    thumbShape: RoundSliderThumbShape(
      enabledThumbRadius: ScreenUtil().setWidth(10),
    ),
  ),
  child: Slider(
    value: double.parse(curTime),
    onChanged: (data) {},
    onChangeStart: (data){
      model.pausePlay();
    },
    onChangeEnd: (data){
      model.seekPlay(data.toInt());
    },
    activeColor: Colors.white,
    inactiveColor: Colors.white30,
    min: 0,
    max: double.parse(totalTime),
  ),
),
复制代码

在 Slider 上面套上 SliderTheme 就能够了。

6. 对播放的操做（暂停、下一首等）

这个也没什么好说的了，和上面对歌曲的操做同样。封装上一个组件，而后调用就行了。

7. 背景

背景仍是使用的 BackdropFilter，参数 sigma 设置成100。

这里模拟器和真机是有区别的，在模拟器上最多设置成20，再大就花了。

因此我建议跑播放歌曲的时候，最好用真机，否则会卡的要命。。

总结

这一章节咱们搭建了排行榜页面、播放歌曲页面。

其中「播放歌曲」页面是该APP的一个难点和重点。

我这里的逻辑也尚未写完，后续会慢慢捋出来发文的。

该系列文章代码已传至 GitHub：github.com/wanglu1209/…

另我我的建立了一个「Flutter 交流群」，能够添加我我的微信 「17610912320」来入群。