Qt是一個跨平臺框架，通常用作圖形工具包，它不僅創(chuàng)建CLI應(yīng)用程序中非常有用。而且它也可以在三種主要的臺式機(jī)操作系統(tǒng)以及移動操作系統(tǒng)（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式設(shè)備，Android（Necessitas）和iOS的端口上運(yùn)行。現(xiàn)在我們?yōu)槟闾峁┝嗣赓M(fèi)的試用版。

下載Qt6最新試用版

Qt組件推薦：

平臺：win10 64bit + VS2013 update5 + Qt5.6.0 64bit（色彩效果仿照windows的寫字板，效果通過QSS實(shí)現(xiàn)）

新建一個Qt應(yīng)用程序工程，刪掉UI默認(rèn)的菜單欄和工具欄。

添加一個widget和一個scrollArea到UI，兩個控件采用垂直布局。widget中放置一個pushButton和一個TabWidget，widget采用水平布局，scrollArea中放置一個widget，采用水平布局（垂直布局也可），完成后效果如下：

說說我的思路吧！左上方的按鈕打算做成一個文件菜單，里面有打開、保存、關(guān)于等按鈕，tabwidget用來模仿Ribbon效果，下方的scrollArea就是配角而已，看著好看而已的，我們繼續(xù)。。。

將主界面和上方widget的layout邊距設(shè)為0，spacing也設(shè)為0，修改按鈕和tabwidget的文字。設(shè)置scrollArea中的widget背景色為白色，固定一個合適的寬度，設(shè)置srollArea的背景色（ui.scrollArea->setBackgroundRole(QPalette::Mid);），完成后效果如下：

我們需要把文件菜單放到主頁的左邊，然后主頁這些標(biāo)簽依次向右移動。按鈕放到tabwidget上面好辦，絕對位置即可，可是tabwidge的標(biāo)簽怎么移動呢？這就要借助QSS了，代碼如下：

按鈕移動代碼：

ui.pushButton_MenuFile->setParent(ui.tabWidget);

tabWidget的tab移動QSS代碼：

#tabWidget_Main::tab-bar {
left: 65px;
}

#pushButton_MenuFile{
min-width:50px;
max-width:50px;
min-height:22px;
max-height:22px;
}

#tabWidget_Main QTabBar::tab{
min-width:60px;
max-width:60px;
min-height:22px;
max-height:22px;
}

設(shè)置按鈕效果：

#pushButton_MenuFile{
color:white;
border: 1px solid #416ABD;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 #467FBD, stop:0.5 #2A5FAC,stop:0.51 #1A4088, stop:1 #419ACF);
}
#pushButton_MenuFile::hover{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 #7BB2EB, stop:0.5 #477ECD,stop:0.51 #114ECF, stop:1 #80E1FF);
}
#pushButton_MenuFile::pressed{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 #467BBB, stop:0.5 #2F63AE,stop:0.51 #1C438A, stop:1 #358BC9);
}

#tabWidget_Main QTabBar::tab {
background: transparent;
margin-left: 4px;
margin-right: 4px;
}
#tabWidget_Main QTabBar::tab:selected, QTabBar::tab:hover {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
#tabWidget_Main::tab-bar {
border: 1px solid #BAC9DB;
}
#tabWidget_Main QTabBar::tab:selected{
border: 1px solid #BAC9DB;
background: white;
border-bottom-color: #FFFFFF;
}
#tabWidget_Main QTabBar::tab:hover:!selected{
border: 1px solid #ECBC3D;
}
#tabWidget_Main QTabBar::tab:!selected {
margin-top: 1px;
}

基本的效果已經(jīng)出來了，下面我們設(shè)置文件菜單的效果，如果直接使用QMenu，設(shè)置效果有很多限制，好在Qt提供了QWidgetAction，可以將菜單做成Widget，再使用QSS，感覺棒棒噠！首先我們設(shè)置一個菜單的Widget的類：

class MenuItemWidget : public QWidget
{
Q_OBJECT

public:
MenuItemWidget(const QPixmap& icon, const QString& text, QWidget *parent = 0)
{
QLabel* label_Icon = new QLabel(this);
label_Icon->setFixedSize(32, 32);
label_Icon->setScaledContents(true);
label_Icon->setPixmap(icon);

QLabel* label_Text = new QLabel(text,this);

QHBoxLayout* layout = new QHBoxLayout;
layout->setContentsMargins(20, 6, 50, 6);
layout->setSpacing(10);
layout->addWidget(label_Icon);
layout->addWidget(label_Text);
setLayout(layout);

setFixedWidth(240);
}
~MenuItemWidget()
{}

protected:
void paintEvent(QPaintEvent* e) Q_DECL_OVERRIDE{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

private:
};

下面為文件按鈕添加菜單：

QMenu* menu = new QMenu(this);
ui.pushButton_MenuFile->setMenu(menu);

QWidgetAction* actionNew = new QWidgetAction(this);
actionNew->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/file_new.png"), QString::fromStdWString(L"新建"), this));
menu->addAction(actionNew);


QWidgetAction* actionOpen = new QWidgetAction(this);
actionOpen->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/file_open.png"), QString::fromStdWString(L"打開"), this));
menu->addAction(actionOpen);

QWidgetAction* actionSave = new QWidgetAction(this);
actionSave->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/file_save.png"), QString::fromStdWString(L"保存"), this));
menu->addAction(actionSave);

QWidgetAction* actionSaveAs = new QWidgetAction(this);
actionSaveAs->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/file_saveas.png"), QString::fromStdWString(L"另存為"), this));
menu->addAction(actionSaveAs);

menu->addSeparator();

QWidgetAction* actioPrint = new QWidgetAction(this);
actioPrint->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/file_print.png"), QString::fromStdWString(L"打印"), this));
menu->addAction(actioPrint);

menu->addSeparator();

QWidgetAction* actionAout= new QWidgetAction(this);
actionAout->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/about.png"), QString::fromStdWString(L"關(guān)于"), this));
menu->addAction(actionAout);

QWidgetAction* actionExit = new QWidgetAction(this);
actionExit->setDefaultWidget(new MenuItemWidget(QPixmap(":/png/exit.png"), QString::fromStdWString(L"退出"), this));
menu->addAction(actionExit);
connect(actionExit, SIGNAL(triggered()), this, SLOT(close()));

設(shè)置菜單的QSS：

QMenu {
background-color: #FCFCFC;
border: 1px solid #8492A6;
}
QMenu::item {
background-color: transparent;
}
MenuItemWidget::hover{
border: 1px solid #FFB700;
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,stop:0 #FEF9F4, stop:0.38 #FDE0BD,stop:0.39 #FFCE69, stop:1 #FFFFE7);
}
QMenu::item:selected {
background-color: #654321;
}

實(shí)現(xiàn)后效果如下：

接下來設(shè)置tabwidget中的groubox的QSS：

#tabWidget_Main QGroupBox{
border-left: 1px solid gray;
border-top: 0px solid gray;
}

#tabWidget_Main QGroupBox::title {
color: #738399;
subcontrol-position: bottom center;
}

最后的美化：設(shè)置字體為微軟雅黑，設(shè)置tabWidget背景色、隱藏文件按鈕菜單小按鈕，最終效果如下：

如果需要實(shí)現(xiàn)雙擊tab標(biāo)簽關(guān)閉tabwidget的面板，連接標(biāo)簽的doubleClicked信號：

connect(ui.tabWidget_Main, SIGNAL(tabBarDoubleClicked(int)), this, SLOT(hideOrShowTabWidget()));

hideOrShowTabWidget()函數(shù)實(shí)現(xiàn)如下：

void MainWindow::hideOrShowTabWidget()
{
static bool isTabWidgetHide = false;
ui.widget_Top->setFixedHeight(isTabWidgetHide? 150:25);
isTabWidgetHide = !isTabWidgetHide;
}

版權(quán)聲明：本文為CSDN博主「一只螞蟻2」的原創(chuàng)文章
原文鏈接：//blog.csdn.net/csloudx/article/details/51029807