• Qt自定义菜单

     Qt开发过程中，弹出菜单时我们一般使用QMenu,但是QMenu都是一条项固定的格式，如查想要自己的设计界面就没法使用默认的Action项了，因此我们得用自定义的QMenu。

    本篇介绍使用自定义的QMenu设计出UI。我们使用QWidget + QWidgetAction来实现。QWidgetAction继承自QAction，无法通过继承来实现一个界面，但它提供了setDefaultWidget来绑定一个界面，使用起来就更加方便了。

    首先创建一个PlayWidget带UI的类，里面添加两个按钮，然后把这个类嵌进QWidgetAction中。代码如下：

    1. #ifndef PLAYWIDGET_H
    2. #define PLAYWIDGET_H
    3.  
    4. #include 
    5.  
    6. namespace Ui {
    7. class PlayWidget;
    8. }
    9.  
    10. class PlayWidget : public QWidget
    11. {
    12.     Q_OBJECT
    13.  
    14. public:
    15.     explicit PlayWidget(QWidget *parent = nullptr);
    16.     ~PlayWidget();
    17.  
    18. private:
    19.     Ui::PlayWidget *ui;
    20. };
    21.  
    22. #endif // PLAYWIDGET_H

    1. #include "playwidget.h"
    2. #include "ui_playwidget.h"
    3.  
    4. PlayWidget::PlayWidget(QWidget *parent) :
    5.     QWidget(parent),
    6.     ui(new Ui::PlayWidget)
    7. {
    8.     ui->setupUi(this);
    9. }
    10.  
    11. PlayWidget::~PlayWidget()
    12. {
    13.     delete ui;
    14. }
    1. void CustomMenu::initData()
    2. {
    3.     QString strLineEditStyle = QString("QLineEdit{background-color:#E9E9EA;color:#6D6E6B;border-radius:8px;}"
    4.                                        "QLineEdit:hover{background-color:#E9E9EA;border-radius:8px;border:2px solid rgba(47, 137, 252, 1);}"
    5.                                        "QLineEdit:focus{background-color:#E9E9EA;border-radius:8px;border:2px solid rgba(47, 137, 252, 1);}"
    6.                                        "QLineEdit:disabled{background-color:#F0F0F0;border-radius:8px;}");
    7.     QFont font = qApp->font();
    8.     font.setPixelSize(12);
    9.  
    10.  
    11.     QLineEdit *pLineEdit = new QLineEdit(this);
    12.     pLineEdit->setFont(font);
    13.     pLineEdit->setMaximumSize(QSize(86, 24));
    14.     pLineEdit->setMinimumSize(QSize(86, 24));
    15.     pLineEdit->setStyleSheet(strLineEditStyle);
    16.     //播放项
    17.     QWidgetAction *pWdtAction = new QWidgetAction(this);
    18.     //播放项界面，继承自QWidget的类
    19.     PlayWidget *playWdt = new PlayWidget(this);
    20.     playWdt->setMinimumSize(QSize(200, 50));
    21.     pWdtAction->setDefaultWidget(playWdt);
    22.  
    23.     //创建一个包含声音调整控件的界面项
    24.     QWidgetAction *pVoice = new QWidgetAction(this);
    25.     QWidget *pVoiceWdt = new QWidget(this);
    26.     QSlider *pSlider = new QSlider(Qt::Horizontal);
    27.     QHBoxLayout *layout = new QHBoxLayout(pVoiceWdt);
    28.     layout->addWidget(pSlider);
    29.     layout->addWidget(pLineEdit);
    30.     pVoiceWdt->setLayout(layout);
    31.     pVoice->setDefaultWidget(pVoiceWdt);
    32.     //生成菜单栏
    33.     if(m_menu == nullptr) {
    34.         m_menu = new QMenu(this);
    35.         m_menu->addAction(pWdtAction);
    36.         m_menu->addSeparator();
    37.         m_menu->addAction(pVoice);
    38.         m_menu->addAction(QStringLiteral("显示歌词"));
    39.         m_menu->addAction(QStringLiteral("锁定歌词"));
    40.  
    41.         m_menu->addSeparator();
    42.         m_menu->addAction(QStringLiteral("选项设置"));
    43.         m_menu->addSeparator();
    44.         m_menu->addAction(QStringLiteral("登陆"));
    45.         m_menu->addAction(QStringLiteral("退出"));
    46.     }
    47. }
    48.  
    49. void CustomMenu::initConnect()
    50. {
    51.     connect(ui->btnCreateMenu, SIGNAL(clicked()), this, SLOT(slotCreateMenu()));
    52. }
    53.  
    54.  
    55. void CustomMenu::slotCreateMenu()
    56. {
    57.     QPoint point = ui->btnCreateMenu->pos();
    58.     point.setY(point.y() + 50);
    59.     m_menu->popup(this->mapToGlobal(point));
    60.     //ui->btnCreateMenu->setMenu(m_menu);
    61.  
    62. }

     运行效果

    这是使用QMenu的方式，还有一个直接使用QWidget的方式，把属性设置为

    setWindowFlags(Qt::FramelessWindowHint|Qt::Popup);

    这样弹出菜单后，点击其他地方会自动关闭此Widget，达到与弹出菜单一样的效果。

    完整代码如下：

    1. #ifndef PROVINCEWIDGET_H
    2. #define PROVINCEWIDGET_H
    3.  
    4. #include 
    5.  
    6. class QLineEdit;
    7. class QListView;
    8.  
    9. class ProvinceWidget : public QWidget
    10. {
    11.     Q_OBJECT
    12. public:
    13.     explicit ProvinceWidget(QWidget *parent = nullptr);
    14.  
    15.     void initView();
    16.     void initConnect();
    17.     void setClearFocus();
    18.  
    19. signals:
    20.     void signalChangeScale(int scale);
    21.  
    22. protected:
    23.     void paintEvent(QPaintEvent *event) override;
    24.  
    25. public slots:
    26.     void slotReturnPressed();
    27.     void slotEditingFinished();
    28.     void slotClicked(const QModelIndex &index);
    29.  
    30. private:
    31.     QListView *m_listView;
    32.     QLineEdit *m_lineEdit;
    33.  
    34.  
    35. };
    36.  
    37. #endif // PROVINCEWIDGET_H

    1. #include "provincewidget.h"
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11. #include 
    12. #include 
    13.  
    14. ProvinceWidget::ProvinceWidget(QWidget *parent)
    15.     : QWidget{parent}
    16.     ,m_listView(new QListView(this))
    17.     ,m_lineEdit(new QLineEdit(this))
    18. {
    19.     setWindowFlags(Qt::FramelessWindowHint|Qt::Popup);
    20.     initView();
    21.     initConnect();
    22. }
    23.  
    24. void ProvinceWidget::initView()
    25. {
    26.     QString strLineEditStyle = QString("QLineEdit{background-color:#E9E9EA;color:#6D6E6B;padding-left:20px;border-radius:8px;}"
    27.                                        "QLineEdit:hover{background-color:#E9E9EA;border-radius:8px;border:2px solid rgba(47, 137, 252, 1);}"
    28.                                        "QLineEdit:focus{background-color:#E9E9EA;border-radius:8px;border:2px solid rgba(47, 137, 252, 1);}"
    29.                                        "QLineEdit:disabled{background-color:#F0F0F0;border-radius:8px;}");
    30.     QFont font = qApp->font();
    31.     font.setPixelSize(14);
    32.     m_lineEdit->setFont(font);
    33.     m_lineEdit->setMaximumSize(QSize(108, 24));
    34.     m_lineEdit->setMinimumSize(QSize(108, 24));
    35.     m_lineEdit->setStyleSheet(strLineEditStyle);
    36.  
    37.  
    38.     // 使用QListView显示一个简单的列表
    39.     QStringListModel* model = new QStringListModel();
    40.     model->setStringList({QStringLiteral("广东"), QStringLiteral("广西"), QStringLiteral("海南"),QStringLiteral("云南"), QStringLiteral("浙江"), QStringLiteral("江西"),QStringLiteral("北京"), QStringLiteral("黑龙江")});
    41.  
    42.     m_listView->setModel(model);
    43.     //margin item离外边框的间距 padding 内容与item项的边框
    44.     QString listViewStyle = QString("QListView{color:#6D6E6B; background-color:white;border:none;outline:none;}"
    45.                                     "QListView::item{height:24px;background:gray;margin-top:3px; margin-right:10px;margin-bottom:4px; margin-left:10px;padding-left:20px;padding-right:10px;color:#333333;border:none;outline:none;}"
    46.                                     "QListView::item:hover{background:#2F89FC;color:#ffffff;border-radius:4px;border:none;outline:none;}"
    47.                                     "QListView::item:selected{background:white;color:#ff0000;border:none;outline:none;}"
    48.                                     "QListView::item:selected:!active{background:white;color:#00ff00;border:none;outline:none;}"
    49.                                     "QListView::item:selected:active{background:white;color:#0000ff;border:none;outline:none;}");
    50.  
    51.     QString listViewStyle2 = QString("QListView{color:#6D6E6B; background-color:white;border:none;outline:none;}"
    52.                             "QListView::item{height:24px;background:white;margin-top:3px; margin-right:10px;margin-bottom:4px; margin-left:10px;padding-left:20px;padding-right:10px;color:#333333;border:none;outline:none;}"
    53.                             "QListView::item:hover{background:#2F89FC;color:#ffffff;border-radius:4px;border:none;outline:none;}"
    54.                             "QListView::item:selected{background:white;color:#ff0000;border:none;outline:none;}"
    55.                             "QListView::item:selected:!active{background:white;color:#00ff00;border:none;outline:none;}"
    56.                             "QListView::item:selected:active{background:white;color:#0000ff;border:none;outline:none;}");
    57.  
    58.     m_listView->setStyleSheet(listViewStyle2);
    59.  
    60.     QVBoxLayout *layout = new QVBoxLayout();
    61.     layout->setContentsMargins(0, 1, 0, 0);
    62.     layout->setSpacing(1);
    63.     layout->addWidget(m_listView);
    64.     layout->addWidget(m_lineEdit);
    65.     setLayout(layout);
    66. }
    67.  
    68. void ProvinceWidget::initConnect()
    69. {
    70.     connect(m_lineEdit, SIGNAL(returnPressed()), this, SLOT(slotReturnPressed()));
    71.     connect(m_lineEdit, SIGNAL(editingFinished()), this, SLOT(slotEditingFinished()));
    72.     connect(m_listView, SIGNAL(clicked(const QModelIndex &)), this, SLOT(slotClicked(const QModelIndex &)));
    73. }
    74.  
    75. void ProvinceWidget::setClearFocus()
    76. {
    77.     m_listView->clearFocus();
    78.     m_listView->clearSelection();
    79.     m_lineEdit->clearFocus();
    80. }
    81.  
    82.  
    83. void ProvinceWidget::paintEvent(QPaintEvent *event)
    84. {
    85.     Q_UNUSED(event);
    86. //    QPainterPath path;
    87. //    path.setFillRule(Qt::WindingFill);
    88. //    path.addRoundedRect(5, 5, this->width() - 5 * 2, this->height() - 5 * 2, 3, 3);
    89. //    painter.fillPath(path, QBrush(Qt::red));
    90.  
    91.     //绘制样式
    92.     QStyleOption opt;
    93.     opt.initFrom(this);
    94.     QPainter p(this);
    95.     style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);//绘制样式
    96.     QBitmap bmp(this->size());
    97.     bmp.fill();
    98.     QPainter painter(&bmp);
    99.     painter.setPen(Qt::NoPen);
    100.     painter.setBrush(Qt::black);
    101.     painter.setRenderHint(QPainter::Antialiasing);
    102.     //设置边框为圆角12px
    103.     painter.drawRoundedRect(bmp.rect(), 8, 8);
    104.     setMask(bmp);
    105.  
    106.     //再画颜色块
    107.     QRect tmpRect = QRect(0, 0, this->width(), this->height());
    108.     QBrush brush = QBrush(QColor("#ffffff"));
    109.     p.setPen(Qt::NoPen);  //去掉边框线
    110.     p.setBrush(brush);
    111.     p.drawRect(tmpRect);
    112.  
    113.  
    114.  
    115. //    QColor color(Qt::gray);
    116. //    for (int i = 0; i < 5; i++)
    117. //    {
    118. //        QPainterPath path;
    119. //        path.setFillRule(Qt::WindingFill);
    120. //        path.addRoundedRect(5 - i, 5 - i, this->width() - (5 - i) * 2, this->height() - (5 - i) * 2, 3 + i, 3 + i);
    121. //        color.setAlpha(80 - qSqrt(i) * 40);
    122. //        painter.setPen(color);
    123. //        painter.drawPath(path);
    124. //    }
    125.  
    126. }
    127.  
    128. void ProvinceWidget::slotReturnPressed()
    129. {
    130.     int scale = m_lineEdit->text().toInt();
    131.     qDebug() << "slotReturnPressed===========================" << scale;
    132.     emit signalChangeScale(scale);
    133. }
    134.  
    135. void ProvinceWidget::slotEditingFinished()
    136. {
    137.     int scale = m_lineEdit->text().toInt();
    138.     qDebug() << "slotEditingFinished===========================" << scale;
    139. }
    140.  
    141. void ProvinceWidget::slotClicked(const QModelIndex &index)
    142. {
    143.     QString data = index.data().toString();
    144.     int scale = data.left(data.size() - 1).toInt();
    145.     qDebug() << "PopupScaleList::slotClicked==========data======" << data << data.size() << scale;
    146.     emit signalChangeScale(scale);
    147. }

    1. #ifndef CUSTOMMENU_H
    2. #define CUSTOMMENU_H
    3.  
    4. #include 
    5. #include "provincewidget.h"
    6.  
    7. class QMenu;
    8.  
    9. QT_BEGIN_NAMESPACE
    10. namespace Ui { class CustomMenu; }
    11. QT_END_NAMESPACE
    12.  
    13. class CustomMenu : public QMainWindow
    14. {
    15.     Q_OBJECT
    16.  
    17. public:
    18.     CustomMenu(QWidget *parent = nullptr);
    19.     ~CustomMenu();
    20.  
    21.     void initData();
    22.     void initConnect();
    23.  
    24. public slots:
    25.     void slotCreateMenu();
    26.     void slotPopupMenu();
    27.     void slotTriggered(QAction *action);
    28.  
    29. private:
    30.     Ui::CustomMenu *ui;
    31.     ProvinceWidget *provinceWidget{nullptr};
    32.     QMenu *m_menu{nullptr};
    33.  
    34. };
    35. #endif // CUSTOMMENU_H

    1. #include "custommenu.h"
    2. #include "ui_custommenu.h"
    3. #include "playwidget.h"
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10.  
    11. CustomMenu::CustomMenu(QWidget *parent)
    12.     : QMainWindow(parent)
    13.     , ui(new Ui::CustomMenu)
    14. {
    15.     ui->setupUi(this);
    16.  
    17.     initData();
    18.     initConnect();
    19. }
    20.  
    21. CustomMenu::~CustomMenu()
    22. {
    23.     delete ui;
    24. }
    25.  
    26.  
    27.  
    28. void CustomMenu::initData()
    29. {
    30.  
    31.     provinceWidget = new ProvinceWidget(this);
    32.     provinceWidget->setObjectName(QString::fromUtf8("provinceWidget"));
    33.     provinceWidget->setMinimumSize(QSize(108, 280));
    34.     provinceWidget->setMaximumSize(QSize(108, 280));
    35.  
    36.     QString strLineEditStyle = QString("QLineEdit{background-color:#E9E9EA;color:#6D6E6B;border-radius:8px;}"
    37.                                        "QLineEdit:hover{background-color:#E9E9EA;border-radius:8px;border:2px solid rgba(47, 137, 252, 1);}"
    38.                                        "QLineEdit:focus{background-color:#E9E9EA;border-radius:8px;border:2px solid rgba(47, 137, 252, 1);}"
    39.                                        "QLineEdit:disabled{background-color:#F0F0F0;border-radius:8px;}");
    40.     QFont font = qApp->font();
    41.     font.setPixelSize(12);
    42.  
    43.  
    44.     QLineEdit *pLineEdit = new QLineEdit(this);
    45.     pLineEdit->setFont(font);
    46.     pLineEdit->setMaximumSize(QSize(86, 24));
    47.     pLineEdit->setMinimumSize(QSize(86, 24));
    48.     pLineEdit->setStyleSheet(strLineEditStyle);
    49.     //播放项
    50.     QWidgetAction *pWdtAction = new QWidgetAction(this);
    51.     //播放项界面，继承自QWidget的类
    52.     PlayWidget *playWdt = new PlayWidget(this);
    53.     playWdt->setMinimumSize(QSize(200, 50));
    54.     pWdtAction->setDefaultWidget(playWdt);
    55.  
    56.     //创建一个包含声音调整控件的界面项
    57.     QWidgetAction *pVoice = new QWidgetAction(this);
    58.     QWidget *pVoiceWdt = new QWidget(this);
    59.     QSlider *pSlider = new QSlider(Qt::Horizontal);
    60.     QHBoxLayout *layout = new QHBoxLayout(pVoiceWdt);
    61.     layout->addWidget(pSlider);
    62.     layout->addWidget(pLineEdit);
    63.     pVoiceWdt->setLayout(layout);
    64.     pVoice->setDefaultWidget(pVoiceWdt);
    65.     //生成菜单栏
    66.     if(m_menu == nullptr) {
    67.         m_menu = new QMenu(this);
    68.         m_menu->addAction(pWdtAction);
    69.         m_menu->addSeparator();
    70.         m_menu->addAction(pVoice);
    71.         m_menu->addAction(QStringLiteral("显示歌词"));
    72.         m_menu->addAction(QStringLiteral("锁定歌词"));
    73.  
    74.         m_menu->addSeparator();
    75.         m_menu->addAction(QStringLiteral("选项设置"));
    76.         m_menu->addSeparator();
    77.         m_menu->addAction(QStringLiteral("登陆"));
    78.         m_menu->addAction(QStringLiteral("退出"));
    79.     }
    80. }
    81.  
    82. void CustomMenu::initConnect()
    83. {
    84.     connect(ui->btnCreateMenu, SIGNAL(clicked()), this, SLOT(slotCreateMenu()));
    85.     connect(ui->btnPopupMenu, SIGNAL(clicked()), this, SLOT(slotPopupMenu()));
    86.     connect(m_menu, SIGNAL(triggered(QAction *)), this, SLOT(slotTriggered(QAction *)));
    87. }
    88.  
    89.  
    90. void CustomMenu::slotCreateMenu()
    91. {
    92.     QPoint point = ui->btnCreateMenu->pos();
    93.     point.setY(point.y() + 50);
    94.     m_menu->popup(this->mapToGlobal(point));
    95.     //ui->btnCreateMenu->setMenu(m_menu);
    96.  
    97. }
    98.  
    99. void CustomMenu::slotPopupMenu()
    100. {
    101.     QPoint point = ui->btnPopupMenu->pos();
    102.     point.setY(point.y() + 50);
    103.     QPoint mapPoint = mapToGlobal(point);
    104.     provinceWidget->setClearFocus();
    105.     provinceWidget->move(mapPoint);
    106.     provinceWidget->show();
    107. }
    108.  
    109. void CustomMenu::slotTriggered(QAction *action)
    110. {
    111.     qDebug() << "slotCreateMenu====================" << action->text();
    112. }
    113.  
    1. #include "custommenu.h"
    2.  
    3. #include 
    4. #include 
    5.  
    6. int main(int argc, char *argv[])
    7. {
    8.     QApplication a(argc, argv);
    9.     QFont defaultFont = qApp->font();
    10.     defaultFont.setFamily("Microsoft YaHei");
    11.     qApp->setFont(defaultFont);
    12.     CustomMenu w;
    13.     w.show();
    14.     return a.exec();
    15. }

    运行效果：

     

    参考：

    https://www.cnblogs.com/lingluotianya/p/3789245.html
    https://blog.csdn.net/yyz_1987/article/details/130986313

  • 相关阅读:
    ThreadPoolExecutor BlockingQueue讲解
    通过minikube搭建k8s单机环境
    Rancher - 更换Linux发行版
    【Spring云原生系列】SpringBoot+Spring Cloud Stream：消息驱动架构（MDA）解析，实现异步处理与解耦合
    面试题-C++多线程打印的问题
    Spring基于Annotation装配Bean
    【JavaScript 18】属性描述对象 获取 自身全部属性名 定义or修改属性 判断可遍历性 元属性 存取器
    WebGL笔记：WebGL的基本绘图原理
    前端—— 分层模型和应用协议
    camunda_05_integrity_architect
  • 原文地址：https://blog.csdn.net/chenyijun/article/details/133386092