沒有接觸過音樂字幕方面知識的話，會對字幕的實現比較迷茫，什麼時候轉到下一句？看了這篇文章，你就會明白字幕so easy。

先來一張效果圖：

字幕格式

目前市面上有很多種字幕格式，比如srt,ssa,ass（文字形式）和idx+sub（圖形格式），但不管哪一種格式都會包含2個屬性：時間戳和字幕內容，格式如下：

00:00 歌詞：
00:25 我要穿越這片沙漠
00:28 找尋真的自我
00:30 身邊只有一匹駱駝陪我
00:34 這片風兒吹過
00:36 那片雲兒飄過

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

字幕實現

瞭解了字幕檔案的形式，字幕實現起來就比較簡單了，使用ListWheelScrollView

解析字幕檔案，獲取字幕資料：

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(() {});
}

設定字幕控制元件及背景圖片：

@override
Widget 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,))
 ],);
}

字幕控制元件的構建：

@override
Widget 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
   ? widget.selectedTextStyle
   : widget.unSelectedTextStyle,);
 },childCount: widget.data.length),);
}

字幕控制元件封裝了選中字型和未選中字型樣式引數，用法如下：

Subtitle(
	_subtitleList,unSelectedTextStyle: TextStyle(
 	color: Colors.black.withOpacity(.6),)
)

效果如下：

設定圓筒直徑和主軸渲染視窗的尺寸的比，預設值是2，越小表示圓筒越圓

Subtitle(
	_subtitleList,)

下面是1和5的對比：

Github地址：https://github.com/781238222/flutter-do/tree/master/flutter_subtitle_example

交流

Github地址：https://github.com/781238222/flutter-do

170+元件詳細用法：http://laomengit.com

總結

到此這篇關於Flutter 實現網易雲音樂字幕的文章就介紹到這了,更多相關Flutter 實現網易雲音樂字幕內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！