Flutter有旋转鼠标指针吗？

Question

我正在寻找 Flutter 的旋转光标。我知道调整游标大小确实存在，例如 SystemMouseCursors.resizeUpRightDownLeft。

我想要这个的弯曲版本，甚至是与 photoshop 的旋转光标类似的版本。

有谁知道我在哪里可以找到这个？提前谢谢你。

Answer 1

您可以使用自定义 MouseRegion：

MouseRegion(
  cursor: SystemMouseCursors.none,
  onHover: (event) => setState(() => cursorPosition = event.localPosition),
  onExit: (event) => setState(() => cursorPosition = null),
  child: Stack(
    children: [
      child,
      if (cursorPosition != null)
        AnimatedPositioned(
          duration: const Duration(),
          left: cursorPosition?.dx,
          top: cursorPosition?.dy,
          child: Icon(Icons.refresh, color: widget.cursorColor),
        ),
    ],
  ),
)

在这个习俗中MouseRegion:

1. 用cursor: SystemMouseCursors.none隐藏光标
2. 用onHover和onExit保持would-be光标的位置
3. 在 Stack
中显示子项和自定义光标

完整示例 [StatefulWidget]

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MouseRegion with custom cursor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: MouseRegionWithCustomCursor(
        cursor: const Icon(Icons.refresh, color: Colors.white),
        child: Container(width: 300, height: 200, color: Colors.blueGrey),
      ),
    );
  }
}

class MouseRegionWithCustomCursor extends StatefulWidget {
  final Widget cursor;
  final Widget child;

  const MouseRegionWithCustomCursor({
    Key? key,
    required this.cursor,
    required this.child,
  }) : super(key: key);

  @override
  _MouseRegionWithCustomCursorState createState() =>
      _MouseRegionWithCustomCursorState();
}

class _MouseRegionWithCustomCursorState
    extends State<MouseRegionWithCustomCursor> {
  Offset? cursorPosition;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.none,
      onHover: (event) => setState(() => cursorPosition = event.localPosition),
      onExit: (event) => setState(() => cursorPosition = null),
      child: Stack(
        children: [
          widget.child,
          if (cursorPosition != null)
            AnimatedPositioned(
              duration: const Duration(),
              left: cursorPosition?.dx,
              top: cursorPosition?.dy,
              child: widget.cursor,
            ),
        ],
      ),
    );
  }
}

奖励 1：HookWidget

相同的解决方案使用 HookWidget 摆脱 StatefulWidget:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MouseRegion with custom cursor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: MouseRegionWithCustomCursor(
        cursor: const Icon(Icons.refresh, color: Colors.white),
        child: Container(width: 300, height: 200, color: Colors.blueGrey),
      ),
    );
  }
}

class MouseRegionWithCustomCursor extends HookWidget {
  final Widget cursor;
  final Widget child;

  const MouseRegionWithCustomCursor({
    Key? key,
    required this.cursor,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final cursorPosition = useState<Offset?>(null);
    return MouseRegion(
      cursor: SystemMouseCursors.none,
      onHover: (event) => cursorPosition.value = event.localPosition,
      onExit: (event) => cursorPosition.value = null,
      child: Stack(
        children: [
          child,
          if (cursorPosition.value != null)
            AnimatedPositioned(
              duration: const Duration(),
              left: cursorPosition.value?.dx,
              top: cursorPosition.value?.dy,
              child: cursor,
            ),
        ],
      ),
    );
  }
}

奖励 2：旋转光标

仍在使用HookWidget，现在光标可以旋转：

import 'dart:math';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MouseRegion with custom cursor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: MouseRegionWithCustomCursor(
        cursor: const Icon(Icons.refresh, color: Colors.white),
        rotating: true,
        child: Container(width: 300, height: 200, color: Colors.blueGrey),
      ),
    );
  }
}

class MouseRegionWithCustomCursor extends HookWidget {
  final Widget cursor;
  final Widget child;
  final bool rotating;

  const MouseRegionWithCustomCursor({
    Key? key,
    required this.cursor,
    required this.child,
    this.rotating = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final cursorPosition = useState<Offset?>(null);

    return MouseRegion(
      cursor: SystemMouseCursors.none,
      onHover: (event) => cursorPosition.value = event.localPosition,
      onExit: (event) => cursorPosition.value = null,
      child: Stack(
        children: [
          child,
          if (cursorPosition.value != null)
            AnimatedPositioned(
              duration: const Duration(),
              left: cursorPosition.value?.dx,
              top: cursorPosition.value?.dy,
              child: rotating ? RotatingWidget(child: cursor) : cursor,
            ),
        ],
      ),
    );
  }
}

class RotatingWidget extends HookWidget {
  final Widget child;
  final Duration rotationDuration;

  const RotatingWidget({
    Key? key,
    required this.child,
    this.rotationDuration = const Duration(seconds: 1),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: rotationDuration)
      ..repeat();
    return AnimatedBuilder(
      child: child,
      animation: controller,
      builder: (context, child) {
        return Transform.rotate(
          angle: 2 * pi * controller.value,
          child: child,
        );
      },
    );
  }
}