Qt是一個跨平臺框架，通常用作圖形工具包，它不僅創建CLI應用程序中非常有用。而且它也可以在三種主要的臺式機操作系統以及移動操作系統（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式設備，Android（Necessitas）和iOS的端口上運行。現在我們為你提供了免費的試用版。

下載Qt6最新試用版

Qt組件推薦：

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

新建一個Qt應用程序工程，刪掉UI默認的菜單欄和工具欄。

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

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

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

我們需要把文件菜單放到主頁的左邊，然后主頁這些標簽依次向右移動。按鈕放到tabwidget上面好辦，絕對位置即可，可是tabwidge的標簽怎么移動呢？這就要借助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;
}

設置按鈕效果：

#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;
}

基本的效果已經出來了，下面我們設置文件菜單的效果，如果直接使用QMenu，設置效果有很多限制，好在Qt提供了QWidgetAction，可以將菜單做成Widget，再使用QSS，感覺棒棒噠！首先我們設置一個菜單的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"關于"), 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()));

設置菜單的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;
}

實現后效果如下：

接下來設置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;
}

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

如果需要實現雙擊tab標簽關閉tabwidget的面板，連接標簽的doubleClicked信號：

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

hideOrShowTabWidget()函數實現如下：

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

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