如何在 PopupMenuItem 中使用 onTap 或 onPressed答案

【问题标题】：How to use onTap or onPressed in PopupMenuItem如何在 PopupMenuItem 中使用 onTap 或 onPressed
【发布时间】：2019-12-25 12:22:36
【问题描述】：

我们如何在PopupMenuItem中实现onTap或onPressed的使用

这是我的代码：

actions: <Widget>[
  PopupMenuButton(
    icon: Icon(Icons.settings),
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Text("Settings"),
      ),
      PopupMenuItem(
        child: Text("Flutter.io"),
      ),
      PopupMenuItem(
        child: Text("Google.com"),
      ),
    ],
  ),
]

我想在点击或单击设置 PopupMenuItem 时导航到 SettingPage()。
即使遵循下面提到的解决方案，即使在导入 dart:js 之后，我也会收到此错误

Error: Not found: 'dart:js'
import 'dart:js';

这是我的依赖项：

import 'package:bfdi_app/Profile/editProfile.dart';
import 'package:bfdi_app/models/user.dart';
import 'package:bfdi_app/services/collection.dart';
import 'package:bfdi_app/settings.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'dart:js';

【问题讨论】：

您可以使用 InkWell 小部件包装菜单项
谢谢，但我想在点击或单击设置 PopupMenuItem 时导航到 SettingPage()。

标签： flutter dart

【解决方案1】：

只需将其添加到您的 PopupMenuButton：

onSelected: (result) {
    if (result == 0) {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SettingPage()),
        );
    }
},

并将您的设置按钮更改为：

PopupMenuItem(
    child: Text("Settings"),
    value: 0,
),

【讨论】：

我已经完成了，但它显示：错误：未找到：'dart:js'。我已经导入了 dart:js
所以把这个：import 'dart:js';放在你的文件顶部
我已经完成了。我已经更新了问题，请查看。
将此行添加到您的其他导入上方。在第一行
@no_fate 你让我开心，谢谢亲爱的。

【解决方案2】：

有一个名为onSelected 的属性，你应该使用它，它处理onTap 事件。

PopupMenuButton(
  icon: Icon(Icons.settings),
  onSelected: (newValue) { // add this property
    setState(() {
      _value = newValue; // it gives the value which is selected
    });
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      child: Text("Settings"),
      value: 0,
    ),
    PopupMenuItem(
      child: Text("Flutter.io"),
      value: 1,
    ),
    PopupMenuItem(
      child: Text("Google.com"),
      value: 2,
    ),
  ],
)

【讨论】：

您好，我想在点击或单击设置 PopupMenuItem 时导航到 SettingPage()。

【解决方案3】：

-根据评论编辑-

就是这样：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var items = [{'name':'Settings','value':0}, {'name':'Flutter.io','value':1}, {'name':'Google.com',,'value':2}];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: PopupMenuButton(
              onSelected: (x) {
           if(x==0){
                Navigator.push(
                     context,
                     MaterialPageRoute(builder: (context) => SettingPage()), );}
              },
              icon: Icon(Icons.settings),
              itemBuilder: (context) => items
                  .map<PopupMenuItem>((element) => PopupMenuItem(
                        child: Text(element['name]),
                        value: element['value'],
                      ))
                  .toList()),


    ));
  }
}

【讨论】：

您好，我想在点击或单击设置 PopupMenuItem 时导航到 SettingPage()。
我已经完成了，但它显示：错误：未找到：'dart:js'。我已经导入了 dart:js

【解决方案4】：

现在有一个onTap() for PopupMenuItem。

      PopupMenuButton(
        itemBuilder: (context) => [
          PopupMenuItem(
            child: Text("tap me"),
            onTap: () => print("TAP"),
          )
        ],
      ),

【讨论】：

【解决方案5】：

可调用值。

PopupMenuButton(
  icon: Icon(Icons.settings),
  onSelected: (value) {
    value();
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      child: Text('Settings'),
      value: () {
        debugPrint('open Settings');
      },
    ),
    PopupMenuItem(
      child: Text('Flutter.io'),
      value: () {
        debugPrint('goto Flutter.io');
      },
    ),
  ],
)

【讨论】：

【解决方案6】：

使用showMenu(...) 显示弹出窗口时使用继承

class PopupItem<T> extends PopupMenuItem<T> {

  final Function() onTap;

  PopupItem({this.onTap, Widget child, Key key})
      : super(child: child, key: key);

  @override
  _PopupItemState<T> createState() => _PopupItemState<T>();
}

class _PopupItemState<T> extends PopupMenuItemState<T, PopupItem<T>> {
  @override
  void handleTap() {
    widget.onTap?.call();
    super.handleTap();
  }
}

用法：

  Widget _itemDelete() => PopupItem(
        onTap: () {
          // Handle tap here
        },
        child: Text(...)
      );

【讨论】：

【解决方案7】：

我在使用弹出菜单按钮导航屏幕时遇到了类似的问题，我通过将此方法放在 PopupMenuItem 的 onTap 回调中解决了这些问题：

    onTap: (){
WidgetsBinding.instance!.addPostFrameCallback((_) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) {
                            return ScreenName();
                          },
                        ),
                      );
                    });
}

【讨论】：