flutter - 当鼠标悬停在 flutter 的 AppBar 中时,如何使完整菜单显示出来?

标签 flutter dart flutter-web

这就是我想要实现的目标: Image that I want

我考虑过 MouseRegion 小部件中的 onHover 并尝试查看此代码是否适用于正文部分。
在我看到这在 body 部分有效后,我打算在脚手架的 AppBar 中实现它,但我不能。 有谁知道正确的方法吗?

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  showMenus(BuildContext context) async {
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(100, 100, 100, 100),
      items: [
        PopupMenuItem(
          child: Text("View"),
        ),
        PopupMenuItem(
          child: Text("Edit"),
        ),
        PopupMenuItem(
          child: Text("Delete"),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.tight(Size(300.0, 200.0)),
      child: MouseRegion(
        onHover: showMenus(context),
        child: Container(
          color: Colors.lightBlueAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have entered or exited this box this many times:'),
            ],
          ),
        ),
      ),
    );
  }
}

最佳答案

您唯一的问题是错误地调用了该方法。 在您的 MouseRegion onHover 上,在调用方法之前应该有一个 () =>:

// the onHover event gives you an event object
onHover: (event) => showMenus(context),

关于flutter - 当鼠标悬停在 flutter 的 AppBar 中时,如何使完整菜单显示出来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63113654/

相关文章:

flutter - 如何在小部件层次结构中定位多个相同类型的小部件?

html - Flutter:可点击的可选文本,控制光标

Firebase、Flutter Web App 可在本地运行,但未显示部署的图像

dart - 如何使用 Flutter 在 Android 中显示 iOS/cupertino 警报对话框?

flutter - 如何防止抽屉弃置?

flutter - 卡内容器的边界半径

android - 重构时无法提取对封闭类方法的引用

flutter - 当我在flutter的didChangeDependencies中调用多个提供程序时,显示错误

Flutter Web Google 登录

dart - 使用嵌套数组列表将字符串转换为 Json