Flutter 颤振Web：鼠标悬停->；将光标更改为指针_Flutter_Flutter Web

Flutter 颤振Web：鼠标悬停->；将光标更改为指针

flutter

Flutter 颤振Web：鼠标悬停->；将光标更改为指针,flutter,flutter-web,Flutter,Flutter Web,更新（2021/05/11）：颤振现在在其小部件中实现了悬停事件有一个鼠标器，用于RaisedButton等小部件和hoverColor或hoverElevation等属性原始问题：如何在颤振中更改光标外观？我知道通过这个小部件我们可以监听鼠标事件，但我还没有找到关于FlitterWeb悬停事件的任何信息有人找到解决方案了吗？我相信鼠标事件在网络上不起作用，Listener Widget在Google I/O 2019上被演示，并与鼠标一起工作，但这只是一个ChromeOS应用程

更新（2021/05/11）：

颤振现在在其小部件中实现了悬停事件

有一个鼠标器，用于RaisedButton等小部件和hoverColor或hoverElevation等属性

原始问题：

如何在颤振中更改光标外观？我知道通过这个小部件我们可以监听鼠标事件，但我还没有找到关于FlitterWeb悬停事件的任何信息

有人找到解决方案了吗？

我相信鼠标事件在网络上不起作用，Listener Widget在Google I/O 2019上被演示，并与鼠标一起工作，但这只是一个ChromeOS应用程序，而不是一个网络应用程序

根据：

目前，桌面用户界面交互还没有完全完成，因此使用Flatter_web构建的用户界面可能感觉像一个移动应用程序，即使在桌面浏览器上运行

从devchannel build version 1.19.0–3.0.pre开始，内置了指针光标支持。使用与波纹管相同的方法，但不同之处适用于颤振app容器元件

flt窗格玻璃。使用下面的方法只会复制行为
要覆盖指针
光标，可以使用下面的方法，但应用于flt玻璃窗格
元素
解决方法如下：
您必须在应用程序的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光标，都必须将元素包装在这个HandCursor包装器中。请参见classawesome\u按钮。下面是省道：

import'package:awesome_app/widgets/containers/hand_cursor.dart'；
导入“包装：颤振/material.dart”；
导入“package:flatter_web/widgets.dart”；
类AwesomeButton扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回堆栈(
儿童：[
指针(
孩子：我的钮扣(
已按下：（）{
//施点魔法
},
图标：图标（Icons.star）
),
)
],
);
}
}

可以找到一个简短的解释
可以找到一个更通用的更新，它适用于使用颤振的主通道创建的新web项目
我希望有帮助
 前面的方法已弃用。这是更新后的代码
import'package:flatter/signatures.dart'；
导入“package:flatter/widgets.dart”；
将“package:universal_html/Preference_sdk/html.dart”导入为html；
类HandCursor扩展鼠标区域{
静态final-appContainer=html.window.document.getElementById（'app-container'）；
HandCursor（{Widget child}）
：超级(
onHover：（指针或过度通风evt）{
appContainer.style.cursor='pointer'；
},
onExit：（PointerExit事件evt）{
appContainer.style.cursor='default'；
},
孩子：孩子，
);
}

在pubspec.yaml文件中，将universal_html作为包添加为依赖项。版本可能会更改
dependencies:
  flutter:
    sdk: flutter
  universal_html: ^1.1.4

您仍然希望将应用程序容器的id附加到html的主体。这是我的html文件
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your App Title</title>
</head>
<body id="app-container">
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>



你的应用程序标题

您希望将HandCursor小部件的代码放在它自己的文件中。你可以称之为手形光标。要在您希望手显示的小部件上使用它，请将其导入到您正在处理的文件中，并将您想要的小部件包装到HandCursor小部件中。
Constantin Stan改编的答案
对于希望具有类似于InkWell
小部件的单击效果并具有边框半径选项的用户：
添加到pubspec.yaml文件
dependencies:
  universal_html: ^1.1.4

然后在index.html文件中添加以下标记
，如下所示：
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your App Title</title>
</head>
<body id="app-container">
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

我很难找到关于现在内置支持的文档。以下是对我的帮助：
这对我来说很管用，没有改变index.html等
MouseRegion(
  cursor: SystemMouseCursors.click,
    child: GestureDetector(
      child: Icon(
        Icons.add_comment,
        size: 20,
        ),
      onTap: () {},
    ),
  ),

另见正式文件：
这里还有另一个来自官方文档的精彩例子，“…定义了一个鼠标光标，当其小部件被禁用时解析为SystemMouseCursors.forbidden。”
从Flatter beta版本1.19.0-4.1.pre
，将id添加到主体中，并将光标设置为不起作用。因为flt玻璃材质窗格玻璃正在替换光标。
因此，解决方案是将光标直接设置为flt glass pane

下面是正在运行的更新
class HandCursor extends MouseRegion {
    static final appContainer = html.window.document.querySelectorAll('flt-glass-pane')[0];
    HandCursor({Widget child}) : super(
        onHover: (PointerHoverEvent evt) {
            appContainer.style.cursor='pointer';
        },
        onExit: (PointerExitEvent evt) {
            appContainer.style.cursor='default';
        },
        child: child
    );    
}

可以使用具有onHover事件的墨水池
InkWell(
    onTap: () {},
    onHover: (value) {
      setState(() {
        isHovered = value;
      });
    },
    child: Container(
      width: 50,
      height: 72,
      color: Colors.black   
    )
);

确保有onTap功能，即使是空功能，否则会被视为禁用，悬停将不起作用
谢谢，我确实在想我错过了一些东西，因为他们在I/O有一些东西在工作，谢谢你，这似乎是合法的。我会在有时间的时候尝试一下，然后回来这里。如果你的应用程序是web版的，你不需要依赖“universal_html”包，只需“导入”dart:html“作为html”就可以了。事情会随着Flutter快速变化。几周前我工作过，但现在我没法工作。这非常有效，不需要大量自定义代码或更改index.html。在2021年，看起来这是通过1.22更新按钮自动完成的。此导入也需要import'package:flatter/rendering.dart'已经找了很久了，谢谢！！
final appContainer 
     = html.document.getElementsByTagName('body')[0] as html.Element;

            GestureDetector(
                        child: MouseRegion(
                          child: Text(
                            'https://github.com/yumi0629',
                            style: textStyle,
                          ),
                          onHover: (_) => appContainer.style.cursor = 'pointer',
                          onExit: (_) => appContainer.style.cursor = 'default',
                        ),
                        onTap: () {
                          print('open');
                          js.context.callMethod(
                              'open', ['https://github.com/yumi0629']);
                        },
                      )

MouseRegion(
  cursor: SystemMouseCursors.click,
    child: GestureDetector(
      child: Icon(
        Icons.add_comment,
        size: 20,
        ),
      onTap: () {},
    ),
  ),

Widget build(BuildContext context) {
  return Center(
    child: MouseRegion(
      cursor: SystemMouseCursors.text,
      child: Container(
        width: 200,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(color: Colors.yellow),
        ),
      ),
    ),
  );
}

class HandCursor extends MouseRegion {
    static final appContainer = html.window.document.querySelectorAll('flt-glass-pane')[0];
    HandCursor({Widget child}) : super(
        onHover: (PointerHoverEvent evt) {
            appContainer.style.cursor='pointer';
        },
        onExit: (PointerExitEvent evt) {
            appContainer.style.cursor='default';
        },
        child: child
    );    
}

InkWell(
    onTap: () {},
    onHover: (value) {
      setState(() {
        isHovered = value;
      });
    },
    child: Container(
      width: 50,
      height: 72,
      color: Colors.black   
    )
);