Dan*_*Szy 5 flutter flutter-web
如何在Flutter中更改光标外观？我知道，使用Listener（）小部件，我们可以侦听Mouse-Events，但是我还没有找到任何有关在Flutter Web上悬停事件的信息。
有人找到解决办法了吗？
ben*_*neM 60
我很难找到有关现在内置支持的文档。以下是对我的帮助：https : //github.com/flutter/flutter/issues/58260
这对我有用，无需更改 index.html 等。
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Icon(
Icons.add_comment,
size: 20,
),
onTap: () {},
),
),
另见官方文档：https : //api.flutter.dev/flutter/rendering/MouseCursor-class.html
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),
),
),
),
);
}
在这里https://api.flutter.dev/flutter/material/MaterialStateMouseCursor-class.html官方文档中的另一个精彩示例“...定义了一个鼠标光标，当其小部件被禁用时，该光标解析为 SystemMouseCursors.forbidden。 ”
小智 9
以前的方法已弃用。这是更新的代码
import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';
import 'package:universal_html/prefer_sdk/html.dart' as html;
class HandCursor extends MouseRegion {
static final appContainer = html.window.document.getElementById('app-container');
HandCursor({Widget child})
: super(
onHover: (PointerHoverEvent evt) {
appContainer.style.cursor = 'pointer';
},
onExit: (PointerExitEvent evt) {
appContainer.style.cursor = 'default';
},
child: child,
);
}
并在您的 pubspec.yaml 文件中，将 Universal_html 作为一个包添加为依赖项。版本可能会改变。
dependencies:
flutter:
sdk: flutter
universal_html: ^1.1.4
您仍然希望将 app-container 的 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 小部件的代码放在它自己的文件中。您可以将其称为 hand_cursor.dart。并在您希望手部显示的小部件上使用它，将其导入您正在处理的文件中，并将您想要的小部件包装在 HandCursor 小部件中。
您可以使用具有 onHover 事件的 InkWell
InkWell(
onTap: () {},
onHover: (value) {
setState(() {
isHovered = value;
});
},
child: Container(
width: 50,
height: 72,
color: Colors.black
)
);
确保有一些 onTap，即使是空函数，否则它被认为是禁用的，并且悬停将不起作用
我所知道的最简单的方法
InkWell(
onTap: (){},
mouseCursor: MaterialStateMouseCursor.clickable,
...
从 Flutter beta 版开始1.19.0-4.1.pre，添加 idbody并设置光标不起作用。因为flt-glass-pane正在替换光标。所以解决方案是将光标直接设置为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
);
}
解决方法如下：
这就是您的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>
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
);
}
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项目。
希望对您有所帮助。
小智 5
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']);
},
)
| 归档时间： |
|
| 查看次数： |
1303 次 |
| 最近记录： |