Qt實現的多菜單選擇界面

這種菜單樣式比較常用，實現的方法也有很多種，比如可以直接使用QTableWidget，也可以用QStackedWidget實現。這里我是用QToolButton和QWidget+QScrollArea實現的。這個可以在實例化時指定菜單按鍵數。

效果展示

實現代碼

菜單實現代碼

頭文件

#ifndef?CBASECONFIG_H
#define?CBASECONFIG_H

/************************************************************************
?*?名稱：上導航菜單欄界面
?*?上邊是導航按鍵，下面是對應的界面
?*?作者：fens
*************************************************************************/

#include?<QWidget>
#include?<QToolButton>
#include?<QMap>

namespace?Ui?{
class?CBaseConfig;
}

class?CBaseConfig?:?public?QWidget
{
????Q_OBJECT

public:
????explicit?CBaseConfig(QWidget?*parent?=?nullptr);
????~CBaseConfig();
????//設置菜單按鍵的最小寬度
????void?setMenuMiniWidth(int?minw);
????//設置菜單按鍵的最小高度
????void?setMenuMiniHeight(int?minh);
????//設置菜單按鍵的最大寬度
????void?setMenuMaxWidth(int?maxw);
??//設置菜單按鍵的最大高度
????void?setMenuMaxHeight(int?maxh);

????//用于設置按鍵屬性,固定大小/縮放
????void?setMenuBtnSizePolicy(QSizePolicy?val);
????//初始化生成菜單按鍵和對應界面
????void?initMenu(QVector<QPair<QString,?QWidget*>?>&?listItem);

signals:
????void?clicked(int?,?bool?);?//按鍵序號，從0開始，?狀態(tài)-true選中；false-未選中

private?slots:
????void?onToolButtonClicked();

private:
????Ui::CBaseConfig?*ui;

????QString?m_bakebtnName;?//備份當前顯示的界面按鍵
????QVector<QToolButton*>m_btnMap;???????//用于保存菜單按鍵
????QMap<QString,?QWidget*>m_widgetsMap;?//用于保存菜單對應的界面
????QSizePolicy?m_btnQSizePolicy;?????
};

#endif?//?CBASECONFIG_H

源文件

#include?"cbaseconfig.h"
#include?"ui_cbaseconfig.h"
#include?<QDebug>

CBaseConfig::CBaseConfig(QWidget?*parent)?:
????QWidget(parent),
????ui(new?Ui::CBaseConfig)
{
????ui->setupUi(this);
????this->setProperty("form",?true);

????this->setWindowFlags(Qt::FramelessWindowHint?|?Qt::WindowSystemMenuHint?|?Qt::WindowMinMaxButtonsHint);

//????m_btnQSizePolicy?=?QSizePolicy(QSizePolicy::Expanding,?QSizePolicy::Fixed);
????m_btnQSizePolicy?=?QSizePolicy(QSizePolicy::Expanding,?QSizePolicy::Expanding);
}

CBaseConfig::~CBaseConfig()
{
????delete?ui;
}

void?CBaseConfig::setMenuMiniHeight(int?minh)
{
????ui->widgetSetMenu->setMinimumWidth(minh);
}

void?CBaseConfig::setMenuMiniWidth(int?minw)
{
????ui->widgetSetMenu->setMinimumWidth(minw);
}

void?CBaseConfig::setMenuMaxHeight(int?maxh)
{
????ui->widgetSetMenu->setMaximumHeight(maxh);
}

void?CBaseConfig::setMenuMaxWidth(int?maxw)
{
????ui->widgetSetMenu->setMaximumWidth(maxw);
}

void?CBaseConfig::setMenuBtnSizePolicy(QSizePolicy?val)
{
????m_btnQSizePolicy?=?val;
}

//根據傳入的菜單名稱和QWidget界面來生成菜單界面
void?CBaseConfig::initMenu(QVector<QPair<QString,?QWidget*>?>&?listItem)
{
????m_btnMap.clear();
????m_widgetsMap.clear();

????QToolButton?*ptbn?=?NULL;

????for?(int?i?=?0;?i?<?listItem.count();?i++)
????{
????????ptbn?=?new?QToolButton;
????????ptbn->setObjectName(QString("tbSetMenu%1").arg(i));
????????ptbn->setText(listItem.at(i).first);
????????ptbn->setSizePolicy(m_btnQSizePolicy);
????????ptbn->setCheckable(true);
????????connect(ptbn,?&QToolButton::clicked,?this,?&CBaseConfig::onToolButtonClicked);

????????ui->horizontalLayout->addWidget(ptbn);
????????ui->mainLayout->addWidget(listItem.at(i).second);
????????listItem.at(i).second->hide();
????????m_btnMap.push_back(ptbn);
????????m_widgetsMap[listItem.at(i).first]?=?listItem.at(i).second;
????}

????m_btnMap.at(0)->setChecked(true);
????m_bakebtnName?=?listItem.at(0).first;
????listItem.at(0).second->show();
}

void?CBaseConfig::onToolButtonClicked()
{
????QToolButton?*b?=?(QToolButton?*)sender();
????QString?name?=?b->text();

????for?(?int?i?=?0;?i?<?m_btnMap.size();?i++?)
????{
????????if?(m_btnMap.at(i)?==?b)
????????{
????????????m_btnMap.at(i)->setChecked(true);
????????????emit?clicked(i,?true);
????????}
????????else
????????{
????????????if(?m_btnMap.at(i)->isChecked()?)
????????????????emit?clicked(i,?false);
????????????m_btnMap.at(i)->setChecked(false);
????????}
????}

//?????qDebug()<<"in?CBaseConfig::onToolButtonClicked,?button?"<<name<<",?checked!"<<"last:?"<<m_bakebtnName;

????m_widgetsMap[m_bakebtnName]->hide();
????m_widgetsMap[name]->show();
????m_bakebtnName?=?name;

}

應用代碼

使用代碼源文件

#include?"mainwindow.h"
#include?"ui_mainwindow.h"
#include?"cbaseconfig.h"
#include?<QLabel>
#include?<QDebug>

MainWindow::MainWindow(QWidget?*parent)?:
????QMainWindow(parent),
????ui(new?Ui::MainWindow)
{
????ui->setupUi(this);

????init();

????//設置菜單鍵樣式，實際應用時，建議寫在單獨的qss文件中
????QStringList?qss;
????qss.append("QToolButton{color:rgb(250,?250,250);font:14px;min-width:72px;min-height:37px;background-color:?qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0?#0931B4,stop:1?#050A51);border:1px;border-right-color:?rgb(20,?20,?20);border-left-color:?rgb(20,?20,?20);/*border-radius控制圓角大小*/??}");
????qss.append("QToolButton:pressed{background-color:?qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0?#0931B4,stop:1?#050A51);}");
????qss.append("QToolButton:checked{background-color:?qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0?#420064,stop:1?#0D22DE);}");

????this->setStyleSheet(qss.join(""));

}

MainWindow::~MainWindow()
{
????delete?ui;
}

void?MainWindow::init()
{
????int?heigth?=?76;
????CBaseConfig?*baseConfig?=?new?CBaseConfig;
????baseConfig->setMenuMiniHeight(heigth);
????baseConfig->setMenuMaxHeight(heigth);


????QVector<QPair<QString,?QWidget*>?>?listItem;
????//基本設置
????listItem.clear();

????QWidget?*pWidget;
????QGridLayout?*playout?;
????QLabel?*lab;
??
??//循環(huán)添加7個菜單按鍵
????for?(int?i?=?1;?i?<=?7;?i++)
????{
????????pWidget?=?new?QWidget;
????????playout?=?new?QGridLayout;
????????lab?=?new?QLabel;
????????lab->setText(QString("菜單%1").arg(i));
????????lab->setAlignment(Qt::AlignCenter);
????????lab->setStyleSheet("font:?48px");

????????playout->addWidget(lab);
????????pWidget->setLayout(playout);

????????listItem.push_back(qMakePair(QString("菜單%1").arg(i),pWidget));
????}

????connect(baseConfig,?&CBaseConfig::clicked,?this,?[this](int?no,?bool?flag){
????????if?(flag?)
????????????qDebug()<<"no:?"<<no<<"?enter?screen.";
????????else
????????????qDebug()<<"no:?"<<no<<"?leave?screen.";
????});

????baseConfig->initMenu(listItem);
??
??//這里為什么要使用QScrollArea，這樣菜單界面內容超出一頁內容時，可以像網頁一頁向下滾動。
????ui->scrollArea->setWidget(baseConfig);
}

這里每個頁面也可以再嵌入菜單；這個只是實現了一個簡單的菜單框架，這個菜單可以再改進添加上菜單鍵的翻頁，菜單鍵太多，就兩邊加上箭頭，用于把隱藏的按鍵顯示出來；還可以把按鍵改為豎著排放的。

示例代碼下載： 碼云：https://gitee.com/fenstec/demo_code.git