我正在尋找 Flutter 的旋轉游標。我知道調整游標大小確實存在，SystemMouseCursors.resizeUpRightDownLeft例如。

我想要一個彎曲的版本，甚至是與 Photoshop 的旋轉游標類似的版本。

有誰知道我在哪里可以找到這個？先感謝您。

uj5u.com熱心網友回復：

您可以使用自定義 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用and保持潛在游標的位置onExit
3. 在 a 中顯示子游標和自定義游標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使用 a擺脫的相同解決方案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,
        );
      },
    );
  }
}

標籤：扑 镖 指针 老鼠

上一篇：為什么malloc()更改char指標自己的地址

下一篇：如何通過c中的函式訪問typedef-struct中的二維陣列指標