Flutter桌面光标控制插件nes_ui_desktop_cursor的使用

安装 💻

要在你的项目中使用nes_ui_desktop_cursor插件，你需要确保已经安装了Flutter SDK。然后可以通过以下命令将插件添加到你的项目中：

dart pub add nes_ui_desktop_cursor

如何使用它

在使用NesIconData作为鼠标光标之前，它们需要在NesUIDesktopCursor实例中注册。

注册单个光标

你可以通过调用addCursor方法来注册单个光标：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const pixelSize = 4.0;
  const palette = [
    Colors.black,
    Colors.white,
  ];

  await NesUIDesktopCursor.instance.addCursor(
    NesIcons.arrowCursor,
    pixelSize: pixelSize,
    palette: palette,
  );
}

注册多个光标

你也可以通过调用addMultipleCursors方法来注册多个光标：

await NesUIDesktopCursor.instance.addMultipleCursors(
  icons: [
    NesIcons.arrowCursor,
    NesIcons.leftHand,
    NesIcons.axe,
    NesIcons.check,
  ],
  pixelSize: pixelSize,
  palette: palette,
);

使用注册后的光标

要使用这些注册过的光标，可以使用Flutter的MouseRegion小部件：

MouseRegion(
  cursor: NesUIDesktopCursor.instance.getNesCursor(
    NesIcons.leftHand,
  ),
  child: ...
),

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用nes_ui_desktop_cursor插件：

// ignore_for_file: public_member_api_docs

import 'package:flutter/material.dart';
import 'package:nes_ui/nes_ui.dart';
import 'package:nes_ui_desktop_cursor/nes_ui_desktop_cursor.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const pixelSize = 4.0;
  const palette = [
    Colors.black,
    Colors.white,
  ];

  await NesUIDesktopCursor.instance.addMultipleCursors(
    icons: [
      NesIcons.arrowCursor,
      NesIcons.leftHand,
      NesIcons.axe,
      NesIcons.check,
    ],
    pixelSize: pixelSize,
    palette: palette,
  );

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: flutterNesTheme(
        nesTheme: NesTheme(
          pixelSize: 2,
          clickCursor: NesUIDesktopCursor.instance.getNesCursor(
            NesIcons.leftHand,
          ),
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _cursor = NesIcons.arrowCursor;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: MouseRegion(
        cursor: NesUIDesktopCursor.instance.getNesCursor(
          _cursor,
        ),
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: NesContainer(
            width: double.infinity,
            height: double.infinity,
            child: Center(
              child: Column(
                children: [
                  const Text('Change your mouse cursor'),
                  const SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      NesIconButton(
                        icon: NesIcons.arrowCursor,
                        onPress: () => setState(() => _cursor = NesIcons.arrowCursor),
                      ),
                      const SizedBox(width: 16),
                      NesIconButton(
                        icon: NesIcons.check,
                        onPress: () => setState(() => _cursor = NesIcons.check),
                      ),
                      const SizedBox(width: 16),
                      NesIconButton(
                        icon: NesIcons.axe,
                        onPress: () => setState(() => _cursor = NesIcons.axe),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}