flutter_lyric_custom_ui 是一个用于在 Flutter 应用中显示歌词的自定义 UI 插件。使用这个插件，你可以轻松地在应用中实现歌词的显示、滚动、高亮等功能。以下是如何使用 flutter_lyric_custom_ui 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_lyric_custom_ui: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 flutter_lyric_custom_ui 插件：

import 'package:flutter_lyric_custom_ui/flutter_lyric_custom_ui.dart';

3. 使用 LyricWidget

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

class LyricsPage extends StatelessWidget {
  final List<Lyric> lyrics = [
    Lyric(text: "Hello, world!", position: 0),
    Lyric(text: "This is a test lyric.", position: 5000),
    Lyric(text: "Flutter is awesome!", position: 10000),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics'),
      ),
      body: LyricWidget(
        lyrics: lyrics,
        currentPosition: 5000, // 当前播放位置
        onLyricSelected: (Lyric lyric) {
          print('Lyric selected: ${lyric.text}');
        },
      ),
    );
  }
}

4. 自定义歌词样式

你可以通过 LyricWidget 的参数来自定义歌词的样式，例如字体大小、颜色、对齐方式等：

LyricWidget(
  lyrics: lyrics,
  currentPosition: 5000,
  onLyricSelected: (Lyric lyric) {
    print('Lyric selected: ${lyric.text}');
  },
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.black,
  ),
  highlightTextStyle: TextStyle(
    fontSize: 18,
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
  textAlign: TextAlign.center,
);

5. 处理歌词滚动

LyricWidget 会自动根据 currentPosition 滚动到当前播放的歌词行。你可以通过更新 currentPosition 来实现歌词的实时滚动：

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

class _LyricsPageState extends State<LyricsPage> {
  int currentPosition = 0;
  final List<Lyric> lyrics = [
    Lyric(text: "Hello, world!", position: 0),
    Lyric(text: "This is a test lyric.", position: 5000),
    Lyric(text: "Flutter is awesome!", position: 10000),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics'),
      ),
      body: Column(
        children: [
          LyricWidget(
            lyrics: lyrics,
            currentPosition: currentPosition,
            onLyricSelected: (Lyric lyric) {
              print('Lyric selected: ${lyric.text}');
            },
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                currentPosition += 1000;
              });
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

6. 处理歌词选择事件

当用户点击某一行歌词时，onLyricSelected 回调会被触发。你可以在这个回调中处理用户选择的歌词：

LyricWidget(
  lyrics: lyrics,
  currentPosition: currentPosition,
  onLyricSelected: (Lyric lyric) {
    print('Lyric selected: ${lyric.text}');
    // 例如：跳转到歌词对应的播放位置
    setState(() {
      currentPosition = lyric.position;
    });
  },
);

7. 其他功能

flutter_lyric_custom_ui 还提供了其他一些功能，例如：

• 歌词对齐方式：通过 textAlign 参数设置歌词的对齐方式。
• 歌词滚动动画：通过 scrollAnimationDuration 参数设置歌词滚动的动画时长。
• 歌词行间距：通过 lineSpacing 参数设置歌词行之间的间距。

8. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_lyric_custom_ui 插件：

import 'package:flutter/material.dart';
import 'package:flutter_lyric_custom_ui/flutter_lyric_custom_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LyricsPage(),
    );
  }
}

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

class _LyricsPageState extends State<LyricsPage> {
  int currentPosition = 0;
  final List<Lyric> lyrics = [
    Lyric(text: "Hello, world!", position: 0),
    Lyric(text: "This is a test lyric.", position: 5000),
    Lyric(text: "Flutter is awesome!", position: 10000),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics'),
      ),
      body: Column(
        children: [
          LyricWidget(
            lyrics: lyrics,
            currentPosition: currentPosition,
            onLyricSelected: (Lyric lyric) {
              print('Lyric selected: ${lyric.text}');
              setState(() {
                currentPosition = lyric.position;
              });
            },
            textStyle: TextStyle(
              fontSize: 16,
              color: Colors.black,
            ),
            highlightTextStyle: TextStyle(
              fontSize: 18,
              color: Colors.red,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                currentPosition += 1000;
              });
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}