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（五、播放功能逻辑）

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

0. 确认需求

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

一个歌词控件需要什么？

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

歌词的功能其实是真的不少，而且我现在也没有完成，这一节主要就来讲前三个。

1. 展示歌词

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

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

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

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

<