字幕實現
瞭解了字幕文件的形式,字幕實現起來就比較簡單了,使用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(() {});
}
設置字幕控件及背景圖片:
@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,
selectedTextStyle: TextStyle(color: Colors.white,fontSize: 18),
unSelectedTextStyle: TextStyle(
color: Colors.black.withOpacity(.6),
)
)