长按时颤动弹出菜单按钮

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 但无法在 LongPressed 上显示菜单。

有任何想法吗？

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);
  }
}