这篇文章主要为大家展示了Flutter如何实现网易云音乐字幕，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

先来一张效果图：

字幕格式

目前市面上有很多种字幕格式，比如srt, ssa, ass（文本形式）和idx+sub（图形格式），但不管哪一种格式都会包含2个属性：时间戳和字幕内容，格式如下：

00:00 歌词：
00:25 我要穿越这片沙漠
00:28 找寻真的自我
00:30 身边只有一匹骆驼陪我
00:34 这片风儿吹过
00:36 那片云儿飘过

上面字幕的意思是：在25秒的时候跳转到下一句，在28秒的时候跳转到下一句...

字幕实现

了解了字幕文件的形式，字幕实现起来就比较简单了，使用ListWheelScrollView控件，然后通过ScrollController在合适的时机进行滚动，使当前字幕始终保持在屏幕中间。

解析字幕文件，获取字幕数据：

loadData() async { var jsonStr = await DefaultAssetBundle.of(context).loadString('assets/subtitle.txt'); var list = jsonStr.split(RegExp('\n')); list.forEach((f) { if (f.isNotEmpty) { var r = f.split(RegExp(' ')); if (r.length >= 2) { _subtitleList.add(SubtitleEntry(r[0], r[1])); } } }); setState(() {});}

设置字幕控件及背景图片：

@overrideWidget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('弹幕'), ), body: Stack( children: <Widget>[ Positioned.fill( child: Image.asset( 'assets/imgs/background.png', fit: BoxFit.cover, )), Positioned.fill( child: Subtitle( _subtitleList, selectedTextStyle: TextStyle(color: Colors.white,fontSize: 18), unSelectedTextStyle: TextStyle( color: Colors.black.withOpacity(.6), ), diameterRatio: 5, itemExtent: 45, )) ], ), );}

字幕控件的构建：

@overrideWidget build(BuildContext context) { if (widget.data == null || widget.data.length == 0) { return Container(); } return ListWheelScrollView.useDelegate( controller: _controller, diameterRatio: widget.diameterRatio, itemExtent: widget.itemExtent, childDelegate: ListWheelChildBuilderDelegate( builder: (context, index) { return Container( alignment: Alignment.center, child: Text( '${widget.data[index].content}', style: _currentIndex == index &#63; widget.selectedTextStyle : widget.unSelectedTextStyle, ), ); }, childCount: widget.data.length), );}

字幕控件封装了选中字体和未选中字体样式参数，用法如下：

Subtitle(_subtitleList,selectedTextStyle: TextStyle(color: Colors.white,fontSize: 18),unSelectedTextStyle: TextStyle( color: Colors.black.withOpacity(.6),))

效果如下：

设置圆筒直径和主轴渲染窗口的尺寸的比，默认值是2，越小表示圆筒越圆

Subtitle(_subtitleList,diameterRatio: 5,)

下面是1和5的对比：

以上就是关于Flutter如何实现网易云音乐字幕的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。