Flutter键盘和弦图表插件keyboard_chord_charts的使用

特性

这是一个简单的包，用于显示键盘和弦图表。它可以用来显示任何旋律在简单的键盘设置上，或者可以用来动画化钢琴键盘上的演奏，但该包的主要用途是显示简单键盘图表上的和弦。

该包与chord包配合得很好，后者可以从字符串中解析和弦。

使用方法

主组件是KeyboardChordCharts。它有两种变体：fromNoteIndexes 和 fromColors。

在第一种方式中，你可以提供一组音符，这些音符会以所提供的颜色进行高亮显示。

另外，你也可以提供一个颜色列表，这些颜色会被用来给相应的键着色。可以提供null作为颜色，这将使键不被着色。

// 从音符索引创建键盘和弦图表
KeyboardChordChart.fromNoteIndexes(
  const {0, 4, 7, 10}, // 音符索引
  highlightColor: Colors.blue, // 高亮颜色
);

// 从颜色列表创建键盘和弦图表
KeyboardChordChart.fromColors([
  Colors.red,
  Colors.green,
  Colors.blue,
  Colors.yellow,
  Colors.orange,
  Colors.purple,
  Colors.pink,
  Colors.cyan,
  Colors.teal,
  Colors.indigo,
  Colors.lime,
  Colors.brown,
  Colors.red,
  Colors.green,
  Colors.blue,
  Colors.yellow,
  Colors.orange,
  Colors.purple,
  Colors.pink,
  Colors.cyan,
  Colors.teal,
  Colors.indigo,
  Colors.lime,
  Colors.brown,
]);

其他信息

待办事项：

• 更改钢琴轮廓的默认颜色。
• 目前只能显示两个八度。未来可能会使包更加灵活。

欢迎提出建议

小的改动如添加某些参数，我通常可以很快实现。也请考虑在GitHub上为该项目加星 :).

完整示例

以下是一个完整的示例，展示了如何使用 keyboard_chord_charts 包来创建键盘和弦图表。

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

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('键盘和弦图表示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Spacer(),
              const Text('从音符索引创建'),
              const SizedBox(height: 24),
              KeyboardChordChart.fromNoteIndexes(
                const {0, 4, 7, 10},
                highlightColor: Colors.blue,
              ),
              const Spacer(),
              const Text('从颜色列表创建'),
              const SizedBox(height: 24),
              KeyboardChordChart.fromColors(const [
                Colors.red,
                Colors.green,
                Colors.blue,
                Colors.yellow,
                Colors.orange,
                Colors.purple,
                Colors.pink,
                Colors.cyan,
                Colors.teal,
                Colors.indigo,
                Colors.lime,
                Colors.brown,
                Colors.red,
                Colors.green,
                Colors.blue,
                Colors.yellow,
                Colors.orange,
                Colors.purple,
                Colors.pink,
                Colors.cyan,
                Colors.teal,
                Colors.indigo,
                Colors.lime,
                Colors.brown,
              ]),
              const Spacer(),
            ],
          ),
        ),
      ),
    ));