Flutter歌词显示插件lyric_xx的使用

lyric_xx 是一个用于在 Flutter 应用中显示歌词的插件。它可以帮助你轻松实现歌词的同步显示、高亮当前播放的歌词等功能。以下是如何使用 lyric_xx 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 lyric_xx 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  lyric_xx: ^0.1.0  # 请根据实际版本号进行替换

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 lyric_xx 包：

import 'package:lyric_xx/lyric_xx.dart';

3. 使用 LyricWidget

LyricWidget 是 lyric_xx 插件中用于显示歌词的核心组件。你可以通过以下方式来使用它：

class LyricsPage extends StatelessWidget {
  final lyric = """
[ti:蓝莲花]
[ar:许巍]
[al:时光·漫步]
[by:]
[00:00.00]蓝莲花 - 许巍
[00:05.00]词：许巍
[00:10.00]曲：许巍
[00:15.00]编曲：许巍
[00:20.00]制作人：许巍
[00:25.00]没有什么能够阻挡
[00:30.00]你对自由的向往
[00:35.00]天马行空的生涯
[00:40.00]你的心了无牵挂
[00:45.00]穿过幽暗的岁月
[00:50.00]也曾感到彷徨
[00:55.00]当你低头的瞬间
[01:00.00]才发觉脚下的路
[01:05.00]心中那自由的世界
[01:10.00]如此的清澈高远
[01:15.00]盛开着永不凋零
[01:20.00]蓝莲花
""";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics Example'),
      ),
      body: Center(
        child: LyricWidget(
          lyric: lyric,
          currentPosition: Duration(seconds: 30), // 当前播放时间
          lyricStyle: TextStyle(fontSize: 18, color: Colors.black),
          currentLyricStyle: TextStyle(fontSize: 20, color: Colors.blue),
          emptyLyricText: '暂无歌词',
        ),
      ),
    );
  }
}

4. 属性说明

• lyric: 歌词内容，通常为 LRC 格式的字符串。
• currentPosition: 当前播放的时间位置，用于同步歌词。
• lyricStyle: 普通歌词的样式。
• currentLyricStyle: 当前高亮歌词的样式。
• emptyLyricText: 当没有歌词时显示的文本。

5. 动态更新歌词

你可以通过 setState 或其他状态管理方式来动态更新 currentPosition，从而实现歌词的同步滚动和高亮效果。

class LyricsPage extends StatefulWidget {
  [@override](/user/override)
  _LyricsPageState createState() => _LyricsPageState();
}

class _LyricsPageState extends State<LyricsPage> {
  Duration _currentPosition = Duration(seconds: 0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics Example'),
      ),
      body: Center(
        child: LyricWidget(
          lyric: lyric,
          currentPosition: _currentPosition,
          lyricStyle: TextStyle(fontSize: 18, color: Colors.black),
          currentLyricStyle: TextStyle(fontSize: 20, color: Colors.blue),
          emptyLyricText: '暂无歌词',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _currentPosition += Duration(seconds: 5);
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}