沒有Microsoft在其辦公解決方案中提供的界面，就無法想象現(xiàn)代應(yīng)用程序，這個概念稱為Ribbon UI，目前它是使應(yīng)用程序與時俱進的主要屬性。QtitanRibbon是一款遵循Microsoft Ribbon UI Paradigm for Qt技術(shù)的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。

下載最新版QtitanRibbon

平臺：win10 64bit + VS2013 update5 + Qt5.6.0 64bit（色彩效果仿照windows的寫字板，效果通過QSS實現(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_Main::tab-bar {
    left: 65px;
}

控制一下文件按鈕的大小：

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

控制一下tabbar大小：

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

設(shè)置tabbar的效果：

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

然后效果如下：

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

親們注意了，如果自己繼承QWidget，則需要向上面代碼那樣重寫paintEvent函數(shù)，否則無法使用QSS，Qt助手上面說。

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

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

實現(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背景色、隱藏文件按鈕菜單小按鈕，最終效果如下：

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

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

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

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

本文轉(zhuǎn)載自： //blog.csdn.net/csloudx/article/details/51029807?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-3.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-3.nonecase