Flutter自定义光标插件flutter_custom_cursor的使用

插件概述

flutter_custom_cursor 是一个允许直接从内存缓冲区创建/设置自定义鼠标光标的插件。非常感谢 imiskolee 创建了这个插件的基础。

支持平台

• ✅ macOS
• ✅ Windows
• ✅ Linux

注意: 目前，Windows 平台需要的 API 包含在 Flutter 的 master 分支中。这意味着你需要在 Windows 平台上使用 Flutter master 分支来使用此插件。详情请参阅 flutter engine PR#36143。

更新：最新的 Flutter 3.7.0 不包含上述 PR，该 PR 合并到了 flutter-3.7.0-candidate.2，而 Flutter stable 3.7.0 使用的是 flutter-3.7.0-candidate.1。这一限制可能会在下一个 Flutter 稳定版发布时解除。

准备工作

注册自定义光标

在使用自定义光标之前，您需要先注册它。下面是一个示例代码：

// register this cursor
cursorName = await CursorManager.instance.registerCursor(CursorData()
  ..name = "test"
  ..buffer =
      Platform.isWindows ? memoryCursorDataRawBGRA : memoryCursorDataRawPNG
  ..height = img.height
  ..width = img.width
  ..hotX = 0
  ..hotY = 0);

registerCursor 函数会返回一个 String 类型的 cacheName，可以用于设置或删除这个光标。

CursorData.buffer 是一个 Uint8List，包含了光标数据。请注意，在 Windows 上，buffer 格式为 rawBGRA，而在其他操作系统上则为 rawPNG。

设置自定义光标

我们实现了 FlutterCustomMemoryImageCursor 类，它是 MouseCursor 的子类。这个类会自动为你设置内存中的光标。使用方法如下：

MouseRegion(
  cursor: FlutterCustomMemoryImageCursor(key: cursorName),
  child: Row(
    children: [
      Text("Memory image here", style: style),
    ],
  ),
),

删除光标

你可以通过 cursorName 来删除一个光标：

await CursorManager.instance.deleteCursor("cursorName");

示例项目

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

import 'dart:ffi';
import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart' hide Image;
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_custom_cursor/cursor_manager.dart';
import 'package:flutter_custom_cursor/flutter_custom_cursor.dart';
import 'package:image/image.dart' as img2;

late Uint8List memoryCursorDataRawBGRA;
late Uint8List memoryCursorDataRawPNG;
late String cursorName;

late img2.Image img;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // read memory Cursor
  print("reading memory cursor");
  final byte = await rootBundle.load("assets/cursors/data.png");
  memoryCursorDataRawPNG = byte.buffer.asUint8List();
  img = await getImage(memoryCursorDataRawPNG);
  memoryCursorDataRawBGRA =
      (img.getBytes(format: img2.Format.bgra)).buffer.asUint8List();
  
  // register this cursor
  cursorName = await CursorManager.instance.registerCursor(CursorData()
    ..name = "test"
    ..buffer =
        Platform.isWindows ? memoryCursorDataRawBGRA : memoryCursorDataRawPNG
    ..height = img.height
    ..width = img.width
    ..hotX = 0
    ..hotY = 0);

  // test delete
  print("test delete");
  await CursorManager.instance.deleteCursor("test");

  cursorName = await CursorManager.instance.registerCursor(CursorData()
    ..name = "test"
    ..buffer =
        Platform.isWindows ? memoryCursorDataRawBGRA : memoryCursorDataRawPNG
    ..height = img.height
    ..width = img.width
    ..hotX = 0
    ..hotY = 0);

  runApp(const MyApp());
}

Future<img2.Image> getImage(Uint8List bytes) async {
  img = img2.decodePng(bytes)!;
  return img;
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  String msg = "";

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    var style = const TextStyle(fontSize: 30);
    print("rebuild");
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
            child: ListView(
          children: [
            MouseRegion(
              cursor: FlutterCustomMemoryImageCursor(key: cursorName),
              child: Row(
                children: [
                  Text("Memory Image Here", style: style),
                ],
              ),
            ),
            Text("OUTPUT: ${msg}"),
          ],
        )),
      ),
    );
  }
}

以上就是关于 flutter_custom_cursor 插件的使用介绍和完整示例。希望对您有所帮助！