gpt4 book ai didi

flutter - 如何显示单击图标按钮小部件的弹出菜单

转载 作者:行者123 更新时间:2023-12-03 04:20:11 25 4
gpt4 key购买 nike

我创建了一个警报对话框,用户可以在其中更新其个人资料详细信息。在带有图像容器的容器中,有一个图标按钮小部件。我要的是当用户单击图标按钮时,将显示带有添加/删除图像选项的弹出菜单。这是我的警报对话框代码:

showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Edit detail'),
content: StatefulBuilder(
builder: (context, setState) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Stack(
alignment: Alignment.center,
children: [
Container(
//image container
),
GestureDetector(
// the pop up menu displays away from alert dialog
onTapDown: (TapDownDetails details) {
if (imageData != null) {
_showPopupMenu(details.globalPosition);
print('choose image/remove image');
} else {}
},
child: IconButton(icon: Icon(Icons.edit),
onPressed: () async {}),
)
]),
],
),
);
},
),
actions: <Widget>[
//action button
)],
);
},);
这是弹出菜单的代码。
void _showPopupMenu(Offset offset) async {
double left = offset.dx;
double top = offset.dy;
await showMenu<String>(
context: context,
position: RelativeRect.fromLTRB(left, top, 0.0, 0.0), //position where want to show the menu on screen
items: [
PopupMenuItem<String>(
child: const Text('Add image'), value: '1'),
PopupMenuItem<String>(
child: const Text('Delete image'), value: '2'),
],
elevation: 8.0,
)
.then<void>((String itemSelected) {

if (itemSelected == null) return;

if(itemSelected == "1"){
} else {
}

});}
菜单显示在警报对话框之外。我曾经看到过类似的手势检测器帖子,但是我似乎无法理解我的错误。请帮助我,欢迎任何改进。提前致谢。

最佳答案

您可以使用AlertDialog和IconButton的键执行以下操作

 GlobalKey cKey = new GlobalKey();
GlobalKey pKey = new GlobalKey();

void _showPopupMenu() async {
await showMenu<String>(
context: context,
position: RelativeRect.fromRect(_getWidgetGlobalRect(pKey),_getWidgetGlobalRect(cKey)),
items: [
PopupMenuItem<String>(child: const Text('Add image'), value: '1'),
PopupMenuItem<String>(child: const Text('Delete image'), value: '2'),
],
elevation: 8.0,
).then<void>((String itemSelected) {
if (itemSelected == null) return;

if (itemSelected == "1") {
} else {}
});
}

Rect _getWidgetGlobalRect(GlobalKey key) {
RenderBox renderBox = key.currentContext.findRenderObject();
var offset = renderBox.localToGlobal(Offset.zero);
return Rect.fromLTWH(
offset.dx, offset.dy, renderBox.size.width, renderBox.size.height);
}

void showDialig() {
showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
key: cKey,
title: Text('Edit detail'),
content: StatefulBuilder(
builder: (context, setState) {
return Container(
child: Column(

mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Stack(alignment: Alignment.topRight, children: [

Container(
//image container
),
GestureDetector(
// the pop up menu displays away from alert dialog
onTapDown: (TapDownDetails details) {
_showPopupMenu();
},
child: IconButton(
key: pKey,
icon: Icon(Icons.edit),
onPressed: () async {}),
)
]),
],
),
);
},
),
actions: <Widget>[
//action button
],
);
},
);
}

关于flutter - 如何显示单击图标按钮小部件的弹出菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63114797/

25 4 0