Flutter实战 | 从 0 搭建「网易云音乐」APP（6、歌词（一））

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

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

前期回顾：

1. Flutter实战 | 从 0 搭建「网易云音乐」APP（1、建立项目、添加插件、通用代码）
2. Flutter实战 | 从 0 搭建「网易云音乐」APP（2、Splash Page、登陆页、发现页）
3. Flutter实战 | 从 0 搭建「网易云音乐」APP（3、每日推荐、推荐歌单）
4. Flutter实战 | 从 0 搭建「网易云音乐」APP（4、排行榜、播放页面）
5. Flutter实战 | 从 0 搭建「网易云音乐」APP（5、播放功能逻辑）

本篇为第六篇，在这里咱们会搭建歌词页面的逻辑。

0. 确认需求

没错，首先仍是咱们的老套路，确认需求。

一个歌词控件须要什么？

1. 展现歌词
2. 当前歌词高亮显示
3. 跟随当前时间滚动
4. 能够拖动
5. 拖动后显示时间线
6. 能够从时间线上点击播放

歌词的功能实际上是真的很多，并且我如今也没有完成，这一节主要就来说前三个。

1. 展现歌词

首先最重要的就是展现歌词，歌词应该怎么展现？

咱们先来看看官方版的网易云：

开始的时候歌词从屏幕中心开始展现，随着音乐的播放，慢慢的上移。

咱们想一下，什么控件能让文字从中间开始显示？ListView ScrollView？？

好像都不行，既然不行，那咱们就本身画！

画以前应该先了解一下歌词的组成。

了解歌词组成

首先咱们先看一个歌词文件：

[ti:一我的的北京]
[ar:好妹妹乐队]
[al:南北]
[by:]
[offset:0]
[00:00.10]一我的的北京 - 好妹妹乐队
[00:00.20]词：秦昊
[00:00.30]曲：秦昊
[00:00.40]
[00:30.16]你有多久没有看到 满天的繁星
[00:37.34]城市夜晚虚伪的光明 遮住你的眼睛
[00:44.40]连周末的电影 也变得再也不有趣
[00:51.71]疲惫的日子里 有太多的问题
[00:59.21]
[01:00.96]你有多久单身一人 再也不去旅行
[01:08.20]习惯下班回到家里 冷冰冰的空气
[01:15.58]爱情这东西 你已经再也不有勇气
[01:22.64]情歌有多动听 你就有多怀疑
[01:30.60]许多人来来去去 相聚又别离
[01:38.29]也有人喝醉哭泣 在一我的的北京
[01:45.16]也许我成功失意 慢慢的老去
[01:52.76]能不能让我留下片刻的回忆
[01:58.95]
[04:34.24]也有人匆匆逃离 这一我的的北京
[04:41.37]也许有一天咱们 一块儿离开这里
[04:48.87]离开了这里 在晴朗的天气
[04:55.08]
复制代码

全部的歌词的格式都是如上这样。

• 全部的标签都是由 [] 包裹起来
• "ti"表示标题、"ar"表示歌手、"al"表示专辑、"by"表示制做、"offset:"表示时间偏移量
• [mm:ss.ms] 是这一行歌词的时间

为了咱们后续的开发，咱们应该把这些信息保存起来。

解析歌词

咱们仍是回过头来想一下歌词控件的需求：要能根据时间来滚动。

那也就说明了，这个时间咱们确定是要保存下来的，因此咱们新建一个实体类：lyric.dart

class Lyric{
  String lyric;
  Duration startTime;
  Duration endTime;

  Lyric(this.lyric, {this.startTime, this.endTime});

  @override
  String toString() {
    return 'Lyric{lyric: $lyric, startTime: $startTime, endTime: $endTime}';
  }
}
复制代码

有当前歌词的文字、当前歌词的起始时间、结束时间。

而后咱们写一个方法来解析：

/// 格式化歌词
static List<Lyric> formatLyric(String lyricStr) {
  RegExp reg = RegExp(r"^\[\d{2}");

  List<Lyric> result =
    lyricStr.split("\n").where((r) => reg.hasMatch(r)).map((s) {
    String time = s.substring(0, s.indexOf(']'));
    String lyric = s.substring(s.indexOf(']') + 1);
    time = s.substring(1, time.length - 1);
    int hourSeparatorIndex = time.indexOf(":");
    int minuteSeparatorIndex = time.indexOf(".");
    return Lyric(
      lyric,
      startTime: Duration(
        minutes: int.parse(
          time.substring(0, hourSeparatorIndex),
        ),
        seconds: int.parse(
          time.substring(hourSeparatorIndex + 1, minuteSeparatorIndex)),
        milliseconds: int.parse(time.substring(minuteSeparatorIndex + 1)),
      ),
    );
  }).toList();

  for (int i = 0; i < result.length - 1; i++) {
    result[i].endTime = result[i + 1].startTime;
  }
  result[result.length - 1].endTime = Duration(hours: 1);
  return result;
}
复制代码

逻辑以下：

1. 首先根据\n 来切割字符串
2. 而后用正则挑选出全部带时间的行
3. 循环列表建立 Lyric 类，赋值当前文字和起始时间
4. 最后再循环一次，把下一个的起始时间赋值到当前行的结束时间中

这样咱们就得到了一个 歌词列表，下面就能够来画歌词了。

画歌词

自定义组件，咱们都知道是使用的 CustomPainter。

如何画文字？这里有两种解决方案：

1. 使用 TextPainter
2. 使用 drawParagraph

简单一点，咱们就使用第一种方法好了，调用 TextPainter.paint() 方法，该方法须要传入两个参数：

1. 画布，也就是咱们的 canvas
2. 偏移量

肯定了绘画方式之后，咱们就能够动手了。

在调用 CustomPainter 的时候须要传入一个 size，这个 size 就是控制咱们绘制区域的。

那咱们既然从中间开始，那代码以下：

@override
void paint(Canvas canvas, Size size) {
  var y = _offsetY + size.height / 2 + lyricPaints[0].height / 2;
  for (int i = 0; i < lyric.length; i++) {
    if (y > size.height || y < (0 - lyricPaints[i].height / 2)) {
    } else {
      lyricPaints[i].paint(
        canvas,
        Offset((size.width - lyricPaints[i].width) / 2, y),
      );
    }
    // 计算偏移量
    y += lyricPaints[i].height + ScreenUtil().setWidth(30);
  }
}
复制代码

逻辑以下：

1. 首先肯定中间位置 size.height / 2 + lyricPaints[0].height / 2
2. 而后判断当前偏移量是否超出或小于当前的size，若是超出则不画他们
3. 最后增长偏移量

这个时候就把歌词画出来了。

2. 当前歌词高亮展现

当前歌词高亮展现？如何判断是当前歌词？

在上一步当中，咱们经过解析歌词的方法，把一个歌词的字符串解析为一个歌词对象列表。

歌词对象当中含有三个属性：

1. lyric：当前歌词/文字
2. startTime：当前歌词/文字起始时间
3. endTime：当前歌词/文字结束时间

有了这些参数，咱们就好来处理了，逻辑以下：

当歌曲播放时间变化之后，经过当前播放时间来循环列表，判断时间戳是否在某一行内，就ok了，代码以下：

/// 查找歌词
static int findLyricIndex(double curDuration, List<Lyric> lyrics) {
  for (int i = 0; i < lyrics.length; i++) {
    if (curDuration >= lyrics[i].startTime.inMilliseconds &&
        curDuration <= lyrics[i].endTime.inMilliseconds) {
      return i;
    }
  }
  return 0;
}
复制代码

这样咱们就能够经过当前播放时间来找到当前所在的行数了，那么绘制歌词的方法以下：

void paint(Canvas canvas, Size size) {
  var y = _offsetY + size.height / 2 + lyricPaints[0].height / 2;
  for (int i = 0; i < lyric.length; i++) {
    if (y > size.height || y < (0 - lyricPaints[i].height / 2)) {
    } else {
      // 画每一行歌词
      if (curLine == i) {
        lyricPaints[i].text =
          TextSpan(text: lyric[i].lyric, style: commonWhiteTextStyle);
        lyricPaints[i].layout();
      } else {
        lyricPaints[i].text =
          TextSpan(text: lyric[i].lyric, style: commonGrayTextStyle);
        lyricPaints[i].layout();
      }
      lyricPaints[i].paint(
        canvas,
        Offset((size.width - lyricPaints[i].width) / 2, y),
      );
    }
    // 计算偏移量
    y += lyricPaints[i].height + ScreenUtil().setWidth(30);
  }
}
复制代码

前面的条件都同样，添加了一个判断条件：当前循环的 i 是否等于查找出来的 index，若是等于那么则高亮显示，若是不是，则仍是原来的颜色。

可是咱们这个时候会发现仍是不会跟着时间来变化，由于咱们没有通知重绘。

不用着急，在下一步会说到。

3. 跟随当前时间滚动

跟随当前时间滚动，说白了就是： 当前的歌词始终要在中间展现。

怎么样来让他在中间显示？

这里有一个细节咱们要注意：

咱们必需要重写 shouldRepaint 方法来通知重绘，不然组件是不会本身从新绘制的。

在「绘制歌词」那一步的时候，咱们在写从中间开始绘制时，留了一个参数：_offsetY。

该参数就是为了咱们重绘用的：

@override
bool shouldRepaint(LyricWidget oldDelegate) {
  return oldDelegate._offsetY != _offsetY;
}
复制代码

判断两次的 _offsetY 是否一致就行了，若是不一致，就重绘。

回到开始的问题，如何让当前歌词始终在中间展现？

在开始咱们绘制歌词的时候，给每一个歌词之间都添加上了一个间距：

y += lyricPaints[i].height + ScreenUtil().setWidth(30);

那这就好计算了，咱们只须要根据当前行计算出来 当前行和第一行的偏移量就好了：

/// 计算传入行和第一行的偏移量
double computeScrollY(int curLine){
  return (lyricPaints[0].height + ScreenUtil().setWidth(30)) * (curLine + 1);
}
复制代码

既然有了偏移量，咱们就根据计算出来的当前行和绘制中的当前行做对比，若是不一致，则更改 _offsetY，也就是触发重绘，这样就出现了偏移效果。

这里也有一个小细节就是咱们的偏移量应该是个负数，由于是向上偏移。

偏移动画

虽然偏移了，可是这样很是的生硬，是直接跳上去的。咱们不能就这样妥协，上动画！

代码以下：

/// 开始下一行动画
void startLineAnim(int curLine){
  // 判断当前行和 customPaint 里的当前行是否一致，不一致才作动画
  if(_lyricWidget.curLine != curLine){
    // 若是动画控制器不是空，那么则证实上次的动画未完成，
    // 未完成的状况下直接 stop 当前动画，作下一次的动画
    if(_lyricOffsetYController != null){
      _lyricOffsetYController.stop();
    }

    // 初始化动画控制器，切换歌词时间为300ms，而且添加状态监听，
    // 若是为 completed，则消除掉当前controller，而且置为空。
    _lyricOffsetYController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300))..addStatusListener((status){
      if(status == AnimationStatus.completed){
        _lyricOffsetYController.dispose();
        _lyricOffsetYController = null;
      }
    });
    // 计算出来当前行的偏移量
    var end =  _lyricWidget.computeScrollY(curLine) * -1;
    // 起始为当前偏移量，结束点为计算出来的偏移量
    Animation animation = Tween<double>(begin: _lyricWidget.offsetY, end: end).animate(_lyricOffsetYController);
    // 添加监听，在动画作效果的时候给 offsetY 赋值
    _lyricOffsetYController.addListener((){
      _lyricWidget.offsetY = animation.value;
    });
    // 启动动画
    _lyricOffsetYController.forward();
    // 给 customPaint 赋值当前行
    _lyricWidget.curLine = curLine;
  }
}
复制代码

逻辑在代码中都注释了，应该很详细，就不赘述了。

这样咱们歌词大致上就完成了。

再来看一下效果：

总结

总的来讲，歌词控件仍是比较难的，后面还有不少功能，会慢慢的补充完成。

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

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