Skip to content

菜单

通过PopupMenuButton

dart
return PopupMenuButton<int>(
  child: /* 这里按钮内容 */ ,
  onSelected: (value) {
    // 处理菜单项选择
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 1,
      child: Text('Option 1'),
    ),
    PopupMenuItem(
      value: 2,
      child: Text('Option 2'),
    ),
  ],
)

通过函数调用

dart

void showFuncMenu(BuildContext context, TapDownDetails details){
  final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
  final Offset position = overlay.localToGlobal(details.globalPosition);
  var val=await showMenu(
    context: context,
    // 菜单位置
    position: RelativeRect.fromLTRB(
      position.dx,
      position.dy,
      position.dx + 50,
      position.dy + 50,
    ),
    items: [
      PopupMenuItem(
        value: 1,
        child: Text('Option 1'),
      ),
      PopupMenuItem(
        value: 2,
        child: Text('Option 2'),
      ),
    ]
  );
  // 接下来处理菜单选择的内容
}

return GestureDetector(
  onSecondaryTapDown: (val)=>showFuncMenu(context, val),
  child: /* 按钮内容 */
)

如果没有Position参数

dart
class ShowMenuButton extends StatefulWidget {
  const ShowMenuButton({super.key});

  @override
  State<ShowMenuButton> createState() => _ShowMenuButtonState();
}

class _ShowMenuButtonState extends State<ShowMenuButton> {
  final GlobalKey menuBtn = GlobalKey();

  void showFuncMenu(BuildContext context){
    final RenderBox box = menuBtn.currentContext!.findRenderObject() as RenderBox;
    final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
    final RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(
        box.localToGlobal(Offset.zero, ancestor: overlay),
        box.localToGlobal(box.size.bottomRight(Offset.zero), ancestor: overlay),
      ),
      Offset.zero & overlay.size,
    );
    showMenu(
      context: context,
      position: position,
      items: // ...
    )
  }

  @override
  Widget build(BuildContext context) {
    return ElavatedButton(
      key: menuBtn,
      onPressed: () {
        showFuncMenu(context);
      },
      child: Text("按钮"),
    )
  }
}

Released under the MIT License.