Flutter-Web:鼠标悬停->将光标更改为指针

本文介绍了Flutter-Web:鼠标悬停->将光标更改为指针的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在Flutter中更改光标外观?我知道，使用 Listener()小部件，我们可以监听Mouse-活动，但是我还没有找到有关抖动网页悬停事件的任何信息.

How can the cursor appearance be changed within Flutter?I know that with the Listener() Widget we can listen for Mouse-Events,but I haven't found any information regarding hovering events for flutter web.

有人找到溶液了吗?

推荐答案

从 dev 通道版本1.19.0–3.0开始.pre内置了对指针游标的支持.使用与波纹管相同的方法，所不同的是应用于Flutter应用程序容器元素 flt-glass-pane .使用波纹管方法将仅复制行为.

Starting with dev channel build version 1.19.0–3.0.pre there is built-in support for the pointer cursor. The same method as bellow is used with the difference that is applied to the Flutter app container element flt-glass-pane. Using the bellow method will just duplicate the behavior.

为了覆盖 pointer 光标，可以使用下面的方法，但是将其应用于 flt-glass-pane 元素.

In order to override the pointer cursor, you can use the bellow method but applied on the flt-glass-pane element.

以下是一种解决方法:

您必须在应用程序 index.html的整个正文上设置一个 id (例如应用程序容器)模板).

这是您的 index.html 的外观:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My awesome app</title>
</head>
<body id="app-container">
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

接下来，您必须创建包装飞镖类.我称它为 hand_cursor.dart :

import 'package:flutter_web/gestures.dart';
import 'package:flutter_web/widgets.dart';
import 'package:universal_html/html.dart' as html;
// see https://pub.dev/packages/universal_html

class HandCursor extends MouseRegion {

  // get a reference to the body element that we previously altered
  static final appContainer = html.window.document.getElementById('app-container');

  HandCursor({Widget child}) : super(
    onHover: (PointerHoverEvent evt) {
      appContainer.style.cursor='pointer';
      // you can use any of these:
      // 'help', 'wait', 'move', 'crosshair', 'text' or 'pointer'
      // more options/details here: http://www.javascripter.net/faq/stylesc.htm
    },
    onExit: (PointerExitEvent evt) {
      // set cursor's style 'default' to return it to the original state
      appContainer.style.cursor='default';
    },
    child: child
  );

}

在那之后，无论您想在何处显示手形光标，都必须将元素包装在此HandCursor包装器中.参见下面的课程 awesome_button.dart :

import 'package:awesome_app/widgets/containers/hand_cursor.dart';
import 'package:flutter_web/material.dart';
import 'package:flutter_web/widgets.dart';

class AwesomeButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        HandCursor(
          child: IconButton(
            onPressed: () {
              // do some magic
            },
            icon: Icon(Icons.star)
          ),
        )
      ],
    );
  }

}

可以在此处找到简短说明.

可以找到此处.

我希望它会有所帮助.

这篇关于Flutter-Web:鼠标悬停->将光标更改为指针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！