Flutter 实现网易云音乐字幕

移动开发作者： 2024-08-24 23:25:01

老孟导读：没有接触过音乐字幕方面知识的话，会对字幕的实现比较迷茫，什么时候转到下一句？看了这篇文章，你就会明白字幕so easy。先来一张效果图：字幕格式目前市面上有很多种字幕格式，比如srt,

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

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,)

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68080.html

相关资讯： Flutter 实现网易云音乐字幕

Flutter 实现网易云音乐字幕

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签