弹出菜单

如果你的梦想，是拯救苍生，那我的梦想，便唯你一人。 --天官赐福

​ 弹出菜单被固定在调用菜单的视图元素上，并且在一个垂直列表中显示菜单项目

• 弹出菜单是在API级别11和更高版本上才有效。
• 弹出菜单是一个视图元素上弹出的模式菜单
• 如果这个视图元素下方有空间，那么弹出菜单将显示在视图元素的下方，否则会显示在上方。

弹出菜单设计步骤

1. 编写Menu配置文件

   <menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       tools:context="com.example.popupmenudemo.MainActivity">
       <item
           android:id="@+id/copy"
           android:orderInCategory="100"
           android:title="@string/copy"
          />
       <item
           android:id="@+id/past"
           android:orderInCategory="100"
           android:title="@string/past"
           />
   </menu>
   

2. 加载PopupMenu

• 通过PopupMenu的构造函数实例化一个PopupMenu对象，传递一个当前上下文对象以及绑定的View控件

  /*构建弹出菜单对象，第二个参数表明绑定那个view*/
  PopupMenu pm = new PopupMenu(MainActivity.this,view);
  

• 使用menulnflater.infllate()方法加载配置文件到PopupMenu.getMenu()

   /*表明要填充的内容菜单*/
  pm.inflate(R.menu.menu_main);
  

• 在需要的时候调用PopupMenu.shou()方法

   /*弹出菜单显示出来*/
  pm.show();
  

3. 调用PopupMenu.setOnMenultemClickListener()设置一个PopupMenu选项的选中事件

 pm.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                        switch (menuItem.getItemId()){
                            case R.id.copy:
                                Toast.makeText(MainActivity.this,"copy",Toast.LENGTH_LONG).show();
                                break;
                            case R.id.past:
                                Toast.makeText(MainActivity.this,"past",Toast.LENGTH_LONG).show();
                                break;
                        }
                        return false;
                    }
                });

整个java文件实现源码

public class MainActivity extends AppCompatActivity{

    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        button = findViewById(R.id.mybtn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                /*构建弹出菜单对象，第二个参数表明绑定那个view*/
                PopupMenu pm = new PopupMenu(MainActivity.this,view);
                /*表明要填充的内容菜单*/
                pm.inflate(R.menu.menu_main);
                /*绑定菜单项的点击事件处理*/
                pm.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                        switch (menuItem.getItemId()){
                            case R.id.copy:
                                Toast.makeText(MainActivity.this,"copy",Toast.LENGTH_LONG).show();
                                break;
                            case R.id.past:
                                Toast.makeText(MainActivity.this,"past",Toast.LENGTH_LONG).show();
                                break;
                        }
                        return false;
                    }
                });
                /*弹出菜单显示出来*/
                pm.show();
            }
        });
    }

}

        在Qt中点击按钮弹出菜单，这功能很好写，调用QPushButton的setMenu方法即可，但是，这种点击按钮弹出菜单的效果是很不爽的，需要两次点击才弹出菜单，第一次点击按钮右侧出现箭头，第二次点击才弹出菜单，而且菜单不是居中显示，这些问题该如何处理呢。

        点击按钮弹出弹出菜单的代码

m_pSetMenu = new QMenu(this);

QAction *pAct1 = new QAction("game mode", this);
QAction *pAct2 = new QAction("work mode", this);
QAction *pAct3 = new QAction("help", this);
m_pSetMenu->addAction(pAct1);
m_pSetMenu->addAction(pAct2);
m_pSetMenu->addAction(pAct3);

ui->btnSet->setMenu(m_pSetMenu);

        运行结果

    我们先把右侧的箭头去掉，修改样式表，即可去掉箭头，如下

ui->btnSet->setStyleSheet("QPushButton::menu-indicator{image:none}");

   但是点击两次的问题还是没有解决，设置为根据鼠标的位置弹出:

m_pSetMenu->exec(QPoint(QCursor::pos().x(), QCursor::pos().y()));

  本例子全部代码

  .h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QMenu>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public slots:
    void on_btnSet_clicked();

private:
    Ui::Widget *ui;

    QMenu* m_pSetMenu;
};
#endif // WIDGET_H

  .cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    m_pSetMenu = new QMenu(this);
    ui->btnSet->setStyleSheet("QPushButton::menu-indicator{image:none}");
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_btnSet_clicked()
{
    QAction *pAct1 = new QAction("game mode", this);
    QAction *pAct2 = new QAction("work mode", this);
    QAction *pAct3 = new QAction("help", this);
    m_pSetMenu->addAction(pAct1);
    m_pSetMenu->addAction(pAct2);
    m_pSetMenu->addAction(pAct3);

    ui->btnSet->setMenu(m_pSetMenu);
    m_pSetMenu->exec(QPoint(QCursor::pos().x(), QCursor::pos().y()));
}

  运行结果

html代码

<body oncontextmenu="showMenu(event)">
<div class="contextmenu" id="context">
    <ul>
        <li><a href="javascript:toDetail_();">详情</a></li>
        <li><a href="javascript:toTelecontrol_();">操作</a> </li>
		<li><a href="javascript:;">剪切</a></li>
		<li><a href="javascript:;">下载</a></li>
		<li><a href="javascript:;">上传</a></li>
    </ul>
</div>
</body>

css代码

  ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #333;
    }
    .contextmenu {
        width: 200px;
        border: 1px solid #999;
        box-shadow: 3px 3px 3px #ccc;
        background-color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        display: none;
        z-index:9999999
    }
    .contextmenu li {
        height: 40px;
        line-height: 40px;
    }
    .contextmenu li a {
        display: block;
        padding: 0 30px;
    }
    .contextmenu li a:hover {
        background-color: #ccc;
        font-weight: bold;
        color: #fff;
    }

js代码

	
	    function showMenu(env){
	    	env.preventDefault();	    	
	        //env 表示event事件
	        // 兼容event事件写法
	        var e = env || window.event;
	        
	        // 获取菜单，让菜单显示出来
	       var context = document.getElementById("context");
	       context.style.display = "block";
	
	       //  让菜单随着鼠标的移动而移动
	       //  获取鼠标的坐标
	       var x = e.clientX;
	       var y = e.clientY;
	
	       //  调整宽度和高度
	       context.style.left =x-200+"px" //Math.min(w-202,x)+"px";
	       context.style.top = y+"px" //Math.min(h-230,y)+"px";
	
	      // return false可以关闭系统默认菜单
	       return false;
	    };
	  // 当鼠标点击后关闭右键菜单
	  document.onclick = function(){
		  closeMenu()
	
	  };
	  function closeMenu(){
			var contextmenu = document.getElementById("context");
		      contextmenu.style.display = "none";
	}