颤振PopupMenuButton onLongPressed

Question

我试图在我创建的自定义小部件上显示一个菜单上下文，当它被长期按下时(点击有另一种行为)。

我尝试将GestureDetector与onLongPress结合使用，并使用函数showMenu，但它显示的是角落中的菜单，而不是按下的小部件。我已经看到了一个解决办法，可以获得小部件的位置并将其传递给showMenu，但在我看来，它看起来很混乱。

 return new GestureDetector(
    child: _defaultBuild(),
    onTap: onTap,
    onLongPress: () {
      showMenu(
        items: <PopupMenuEntry>[
          PopupMenuItem(
            //value: this._index,
            child: Row(
              children: <Widget>[
                Text("Context item1")
              ],
            ),
          )
        ],
        context: context,
        position: _getPosition(context)
      );
    }
);
RelativeRect _getPosition(BuildContext context) {
  final RenderBox bar = context.findRenderObject();
  final RenderBox overlay = Overlay.of(context).context.findRenderObject();
  final RelativeRect position = RelativeRect.fromRect(
  Rect.fromPoints(
    bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
    bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
  ),
  Offset.zero & overlay.size,
);
return position;
}

我也尝试过使用PopupMenuButton，但是我无法显示菜单onLongPressed。

有什么想法吗？

Answer 1

showMenu()在我这边工作得很好。看起来，这个问题与菜单如何与RelativeRect定位有关。我用的不是RelativeRect.fromRect()，而是我的RelativeRect.fromSize()。

RelativeRect _getRelativeRect(GlobalKey key){
  return RelativeRect.fromSize(
      _getWidgetGlobalRect(key), const Size(200, 200));
}

Rect _getWidgetGlobalRect(GlobalKey key) {
  final RenderBox renderBox =
      key.currentContext!.findRenderObject() as RenderBox;
  var offset = renderBox.localToGlobal(Offset.zero);
  debugPrint('Widget position: ${offset.dx} ${offset.dy}');
  return Rect.fromLTWH(offset.dx / 3.1, offset.dy * 1.05,
      renderBox.size.width, renderBox.size.height);
}

这是一个完整的样本，你可以试试。

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final widgetKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          key: widgetKey,
          child: Container(
            height: 60,
            width: 120,
            color: Colors.lightBlueAccent,
            child: const Center(child: Text('Show Menu')),
          ),
          onLongPress: () {
            showMenu(
              items: <PopupMenuEntry>[
                PopupMenuItem(
                  //value: this._index,
                  child: Row(
                    children: const [Text("Context item 1")],
                  ),
                )
              ],
              context: context,
              position: _getRelativeRect(widgetKey),
            );
          },
        ),
      ),
    );
  }

  RelativeRect _getRelativeRect(GlobalKey key){
    return RelativeRect.fromSize(
        _getWidgetGlobalRect(key), const Size(200, 200));
  }

  Rect _getWidgetGlobalRect(GlobalKey key) {
    final RenderBox renderBox =
        key.currentContext!.findRenderObject() as RenderBox;
    var offset = renderBox.localToGlobal(Offset.zero);
    debugPrint('Widget position: ${offset.dx} ${offset.dy}');
    return Rect.fromLTWH(offset.dx / 3.1, offset.dy * 1.05,
        renderBox.size.width, renderBox.size.height);
  }
}

​

​