Flutter 實現(xiàn)網(wǎng)易云音樂字幕的代碼
沒有接觸過音樂字幕方面知識的話，會對字幕的實現(xiàn)比較迷茫，什么時候轉(zhuǎn)到下一句？看了這篇文章，你就會明白字幕so easy。
先來一張效果圖：
字幕格式
目前市面上有很多種字幕格式，比如srt, ssa, ass（文本形式）和idx+sub（圖形格式），但不管哪一種格式都會包含2個屬性：時間戳和字幕內(nèi)容，格式如下：
00:00 歌詞：
00:25 我要穿越這片沙漠
00:28 找尋真的自我
00:30 身邊只有一匹駱駝陪我
00:34 這片風(fēng)兒吹過
00:36 那片云兒飄過
上面字幕的意思是：在25秒的時候跳轉(zhuǎn)到下一句，在28秒的時候跳轉(zhuǎn)到下一句...
字幕實現(xiàn)
了解了字幕文件的形式，字幕實現(xiàn)起來就比較簡單了，使用ListWheelScrollView控件，然后通過ScrollController在合適的時機進(jìn)行滾動，使當(dāng)前字幕始終保持在屏幕中間。
解析字幕文件，獲取字幕數(shù)據(jù)：
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(() {});
}
設(shè)置字幕控件及背景圖片：
@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,
))
],
),
);
}
字幕控件的構(gòu)建：
@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),
);
}
字幕控件封裝了選中字體和未選中字體樣式參數(shù)，用法如下：
Subtitle( _subtitleList, selectedTextStyle: TextStyle(color: Colors.white,fontSize: 18), unSelectedTextStyle: TextStyle( color: Colors.black.withOpacity(.6), ) )
效果如下：
設(shè)置圓筒直徑和主軸渲染窗口的尺寸的比，默認(rèn)值是2，越小表示圓筒越圓
Subtitle( _subtitleList, diameterRatio: 5, )
下面是1和5的對比：
Github地址：https://github.com/781238222/flutter-do/tree/master/flutter_subtitle_example
交流
Github地址：https://github.com/781238222/flutter-do
170+組件詳細(xì)用法：http://laomengit.com
總結(jié)
到此這篇關(guān)于Flutter 實現(xiàn)網(wǎng)易云音樂字幕的文章就介紹到這了,更多相關(guān)Flutter 實現(xiàn)網(wǎng)易云音樂字幕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android使用ViewStub實現(xiàn)布局優(yōu)化方法示例
這篇文章主要為大家介紹了Android使用ViewStub實現(xiàn)布局優(yōu)化方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Android運行時權(quán)限終極方案(PermissionX)
這篇文章主要介紹了Android運行時權(quán)限終極方案(PermissionX)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Android開發(fā)使用自定義View將圓角矩形繪制在Canvas上的方法
這篇文章主要介紹了Android開發(fā)使用自定義View將圓角矩形繪制在Canvas上的方法,結(jié)合實例形式分析了Android自定義view繪制圓角矩形的相關(guān)方法與使用技巧,需要的朋友可以參考下2017-10-10
Android 基礎(chǔ)入門教程——開發(fā)環(huán)境搭建
這篇文章主要介紹了Android 如何搭建開發(fā)環(huán)境，文中講解非常細(xì)致，幫助大家開始學(xué)習(xí)Android，想要學(xué)習(xí)Android的朋友可以了解下2020-06-06
Android編程實現(xiàn)獲取多媒體庫視頻、音頻、圖片的方法