4.3 自定义菜单栏

在4.2节中，小豆君跟大家分享了标准的菜单栏，但是对于现今的用户体验要求的不断提高，很难满足用户的新的需求，所以需要我们来设计操作简单，样式漂亮的自定义菜单栏，所以小豆君今天来演示如何使用Qt制作自定义菜单栏。

自定义菜单栏，关键要用到一个类为QWidgetAction，它继承于QAction，使用setDefaultWidget接口将自定义窗口放到QWidgetAction中，然后再像添加QAction一样，将QWidgetAction添加到QMenu中就可以了。

下面我们来制作一个类似于Word中的文字颜色菜单栏，我这里只是简单的写一下，主要是为了演示如何制作自定义菜单栏。

image

4.3.1 示例代码

在上一节的代码中，继续添加一个ui界面类SelectColorWidget，这个类用来作为我们需要的自定义窗口，它是一个颜色选择框，如上图。

selectcolorwidget.h

#ifndef SELECTCOLORWIDGET_H#define SELECTCOLORWIDGET_H#include <QWidget>namespace Ui {class SelectColorWidget;}class QButtonGroup;class SelectColorWidget : public QWidget
{
    Q_OBJECTpublic:    explicit SelectColorWidget(QWidget *parent = 0);
    ~SelectColorWidget();

signals:    void clrButtonClicked(const QColor& clr);private:
    Ui::SelectColorWidget *ui;
    QButtonGroup* m_btnGroup;
};#endif // SELECTCOLORWIDGET_H

selectcolorwidget.cpp

#include <QPushButton>#include <QButtonGroup>#include "selectcolorwidget.h"#include "ui_selectcolorwidget.h"SelectColorWidget::SelectColorWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SelectColorWidget)
{
    ui->setupUi(this);
    m_btnGroup = new QButtonGroup(this);    //创建一个4*4的颜色选择表，这里用了Qt中预定义的颜色
    for (int i = 0; i < Qt::transparent-3; ++i)
    {            int col  = i % 4;            int row = i/4;
            QPushButton * btn = new QPushButton;
            QColor clr = (Qt::GlobalColor)(i+2);
            btn->setStyleSheet(QString("background-color:%1").arg(clr.name()));
            ui->gridLayout->addWidget(btn, row, col);
            m_btnGroup->addButton(btn, i+2);
    }

    connect(m_btnGroup, static_cast<void(QButtonGroup::*)(int)>(&QButtonGroup::buttonClicked),
                 [=](int index)
                {
                    QColor clr = (Qt::GlobalColor)index;
                    emit clrButtonClicked(clr);
                });

}

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

再在原MainWindowMenu类中添加如下代码

mainwindowmenu.h

private slots:    void setTextColor(const QColor& clr);//用于设置textedit中的文本颜色private:    void createTextColorMenu();//用于创建自定义颜色窗口private:
    QMenu* m_menuColor;//颜色菜单栏

在定义中添加如下接口函数，并且在构造函数中调用createTextColorMenu()

mainwindowmenu.cpp

void MainWindowMenu::setTextColor(const QColor &clr)
{
    QPalette palette = ui->textEdit->palette();
    palette.setColor(QPalette::Text, clr);
    ui->textEdit->setPalette(palette);

    m_menuColor->close();
}

void MainWindowMenu::createTextColorMenu()
{
    SelectColorWidget* wgt = new SelectColorWidget;
    m_menuColor = new QMenu("文字颜色");    //这个QWidgetAction可以将我们自定义的窗口加入到菜单栏中
    QWidgetAction* act = new QWidgetAction(m_menuColor);
    act->setDefaultWidget(wgt);
    connect(wgt, SIGNAL(clrButtonClicked(QColor)),
                 this, SLOT(setTextColor(QColor)));

    m_menuColor->addAction(act);
    menuBar()->addMenu(m_menuColor);
}

编译运行程序，选择不同的颜色，文本框中的文字就会改变成该颜色。

image

学会了自定义菜单栏，你就可以按照你设计，将更多好看美观的窗口加入到菜单栏中，就像word中的各式菜单栏一样，你的程序也一定会变得更棒。

作者：小豆君的干货铺
链接：https://www.jianshu.com/p/0630a8732bbd