Flutter如何實(shí)現(xiàn)網(wǎng)易云音樂(lè)字幕

發(fā)布時(shí)間：2020-08-04 09:24:09 來(lái)源：億速云閱讀：469 作者：小豬欄目：移動(dòng)開發(fā)

這篇文章主要為大家展示了Flutter如何實(shí)現(xiàn)網(wǎng)易云音樂(lè)字幕，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

先來(lái)一張效果圖：

字幕格式

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

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

上面字幕的意思是：在25秒的時(shí)候跳轉(zhuǎn)到下一句，在28秒的時(shí)候跳轉(zhuǎn)到下一句...

字幕實(shí)現(xiàn)

了解了字幕文件的形式，字幕實(shí)現(xiàn)起來(lái)就比較簡(jiǎn)單了，使用ListWheelScrollView控件，然后通過(guò)ScrollController在合適的時(shí)機(jī)進(jìn)行滾動(dòng)，使當(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
   &#63; 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),
	)
)

效果如下：

Flutter如何實(shí)現(xiàn)網(wǎng)易云音樂(lè)字幕

設(shè)置圓筒直徑和主軸渲染窗口的尺寸的比，默認(rèn)值是2，越小表示圓筒越圓

Subtitle(
	_subtitleList,
	diameterRatio: 5,
)

下面是1和5的對(duì)比：

以上就是關(guān)于Flutter如何實(shí)現(xiàn)網(wǎng)易云音樂(lè)字幕的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

Flutter如何實(shí)現(xiàn)網(wǎng)易云音樂(lè)字幕

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽