Flutter自定义字体插件musiqwik_font的使用

Flutter自定义字体插件musiqwik_font的使用

MusiQwik字体包

MusiQwik字体包是一个重新分发由Robert Allgeyer在2001年创建的音乐符号字体的Flutter插件。该字体包根据SIL Open Font许可证（OFL）重新分发，并提供了一些方便的工具以简化其在Flutter中的使用。

虽然MusiQwik字体适合创建简单的音乐符号，但并不适用于创建复杂的音乐符号如和弦或带束音符。不过，通过将项目堆叠在一起，你可能可以实现类似的效果（但我没有尝试过）。

开始使用

安装插件

首先，你需要在你的项目中安装musiqwik_font插件：

flutter pub add musiqwik_font

使用字体

你可以直接在TextStyle中使用MusiQwik字体：

Text(
  '=&=4Y=!==Y==Y==%F=G=X=!=%I=H=W===>V==:==.',
  style: TextStyle(
    fontFamily: 'MusiQwik',  // 设置字体为MusiQwik
    package: 'musiqwik_font',  // 指定插件包名
    fontSize: 48,  // 设置字体大小
  ),
),

这将产生以下效果：

此外，你可以使用MusiQwik的静态方法span()来返回任何命名项作为TextSpan。这对于在RichText小部件中使用字体非常有用。

RichText(
  text: TextSpan(
    children: [
      MusiQwik.barStart,
      MusiQwik.trebleClef,
      MusiQwik.keyD,
      MusiQwik.fourFourTime,
      MusiQwik.spacer,
      MusiQwik.trD4qrt,
      MusiQwik.spacer,
      MusiQwik.spacer,
      MusiQwik.trE4qrt,
      MusiQwik.spacer,
      MusiQwik.spacer,
      MusiQwik.trF4qrt,
      MusiQwik.spacer,
      MusiQwik.spacer,
      MusiQwik.trG4qrt,
      MusiQwik.spacer,
      MusiQwik.barEnd,
    ].map((obj) => obj.span()).toList(),
  ),
)

这将产生以下效果：

你也可以使用自定义字体大小：

return RichText(
  text: TextSpan(
      children: [
        MusiQwik.barStart,
        MusiQwik.trebleClef,
        MusiQwik.keyD,
        MusiQwik.fourFourTime,
        MusiQwik.spacer,
        MusiQwik.trD4qrt,
        MusiQwik.spacer,
        MusiQwik.spacer,
        MusiQwik.trE4qrt,
        MusiQwik.spacer,
        MusiQwik.spacer,
        MusiQwik.trF4qrt,
        MusiQwik.spacer,
        MusiQwik.spacer,
        MusiQwik.trG4qrt,
        MusiQwik.spacer,
        MusiQwik.barEnd,
      ].map((obj) => obj.span(customFontSize)).toList(),
  ),
);

这将产生以下效果：

静态名称约定

对于谱号和调号的名称应该是不言而喻的。对于音符的名称，如下所示：

• trE4qrt: 高音谱表 E 第四八度四分音符
• trCSharp4qrt: 高音谱表 C# 第四八度四分音符
• baC4hlf: 低音谱表 C 第四八度二分音符

完整的便利名称列表可以在以下链接中找到：

https://pub.dev/documentation/musiqwik_font/latest/musiqwik_font/MusiQwik.html

许可证

该包的源代码根据MIT许可证授权。

资源许可证

该包包含MusiQwik字体，该字体根据Open Font许可证（OFL）分发。你可以根据OFL的条件使用、研究、修改和重新分发字体。完整的条款和条件可以在以下链接中查看：

https://github.com/tolland/flame_learn_sheet_music/blob/main/packages/musiqwik_font/LICENSE_OFL.txt

示例代码

以下是从官方示例代码中摘录的几个例子：

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

import 'examples/examples.dart';

void main() {
  runApp(const HotReload());
}

class HotReload extends StatelessWidget {
  const HotReload({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Widgetbook.material(
      addons: [
        AlignmentAddon(
          initialAlignment: Alignment.center,
        ),
        // DeviceFrameAddon(
        //   devices: [
        //     Devices.ios.iPhoneSE,
        //     Devices.ios.iPhone13,
        //   ],
        //   initialDevice: Devices.ios.iPhone13,
        //
        // ),
      ],
      directories: [
        WidgetbookComponent(
          name: 'Container',
          useCases: [
            WidgetbookUseCase(
              name: 'Glyph Table',
              builder: (context) => const Example6(),
            ),
            WidgetbookUseCase(
              name: 'Simple Example',
              builder: (context) => const Example1(),
            ),
            WidgetbookUseCase(
              name: 'Example 2',
              builder: (context) => Example2(
                customFontSize: context.knobs.double.slider(
                  label: 'Font Size',
                  min: 10,
                  max: 150,
                  initialValue: 65,
                  divisions: 10,
                ),
              ),
            ),
            WidgetbookUseCase(
              name: 'Example 3',
              builder: (context) => Example3(
                customFontSize: context.knobs.double.slider(
                  label: 'Font Size',
                  min: 10,
                  max: 150,
                  initialValue: 46,
                  divisions: 10,
                ),
              ),
            ),
            WidgetbookUseCase(
              name: 'Example 4',
              builder: (context) => const Example4(),
            ),
            WidgetbookUseCase(
              name: 'Example 5',
              builder: (context) => const Example5(),
            ),
            WidgetbookUseCase(
              name: 'Eigth Note - example 7',
              builder: (context) => const Example7(),
            ),
          ],
        ),
      ],
    );
  }
}