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

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

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

前期回顾：

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

本篇为第七篇，在这里我们会搭建歌词页面剩余的逻辑。

书接上文

我们书接上文，上文中说到歌词控件的需求：

一个歌词控件需要什么？

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

上文我们实现了前三个，那这篇文章就带大家来实现后三个功能。

下面我们就开始。

4. 歌词可以拖动

不知道还记不记得，上篇文章中，我们是如何绘制歌词的：

_offsetY + size.height / 2 + lyricPaints[0].height / 2;

该段代码就是获取中间位置的。

其中有个 _offsetY ，在上篇文章中，我们使用它来做自动滚动效果，那在本功能中，我们就可以使用它来做拖动的效果。

直接在 CustomPaint 控件上套一个 GestureDetector：

onVerticalDragUpdate: (e) {
  _lyricWidget.offsetY += e.delta.dy;
}

然后在 onVerticalDragUpdate 中使这个 offsetY