如何用Qt实现ribbon office风格？附源码

Qt是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。

下载Qt6最新试用版

Qt组件推荐：

QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
QtitanChart | 下载试用 :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面

平台：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;
}

控制一下tabbar大小：

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

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

然后效果如下：

基本的效果已经出来了，下面我们设置文件菜单的效果，如果直接使用QMenu，设置效果有很多限制，好在Qt提供了QWidgetAction，可以将菜单做成Widget，再使用QSS，感觉棒棒哒！首先我们设置一个菜单的Widget的类：

class MenuItemWidget : public QWidget
{
Q_OBJECTpublic:
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函数，否则无法使用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"关于"), 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」的原创文章
原文链接：https://blog.csdn.net/csloudx/article/details/51029807

如何用Qt实现ribbon office风格？附源码相关推荐

QT FC坦克大战（附源码）
QT FC坦克大战 QT设计的类似FC坦克大战的程序.暂时只完成了单人模式,双人模式可以后续自行添加. 源码以及图片音频资源下载地址:QTFC坦克大战(C++)-C++文档类资源-CSDN下载 Tan ...
魔改 Qt Creator 插件框架（附源码）
星标/置顶公众号????,硬核文章第一时间送达! 几年前,我曾写过一些插件相关的文章,其中最成体系的当属 CTK 系列,一共 18 个章节,从 0 到 1 讲述了模块化编程在 C++/Qt 中的实际 ...
Qt简单实现雷达扫描[附源码]
先看效果: 刚开始实现,就是QWidget 里采用QPainter绘制图片,绘制线条,绘制椭圆,绘制扇形区域. 然后定时器,刷新和绘制老鼠图第二天逆风飞翔的飞机第三天加刻度盘源码:GitHu ...
程序员如何用“心“表白（结尾附源码）
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
【QT/C++】基于QT开发的一款A-SOUL元素的视频播放器（附源码）
[QT/C++]基于QT开发的一款关于A-SOUL的视频播放器(附源码) 前言一.软件使用说明 1.运行软件的界面如下 2.操作软件的步骤二.软件设计说明 1.UI界面的设计 2.主代码中的部分函 ...
OsgEarth —— 笔记2 - Qt窗口加载earth地球（附源码）
效果相关文章 OSG -- 笔记1 - 指令调用模型 OSG -- 笔记2 - 加载模型(附源码) OSG -- 笔记3 - 绘制矩形(附源码) ...
基于QT开发的音乐播放器（附源码）
基于QT开发的音乐播放器(附源码) 一.简介 1.介绍 2.功能描述 3.系统功能层次模块图 4.各模块功能描述 (1)播放界面 (2)歌词 (3)歌曲信息 (4)歌曲列表 5.文件格式 6.运行环境 ...
QT界面免费版开源图片转文字工具程序完整版附源码
QT界面免费版开源图片转文字工具程序完整版附源码需求源码的朋友请留言操作步骤如下:
酷毙了！三种风格的全屏幻灯片效果【附源码下载】
今天,我们想向您展示如何创建平铺背景图像的幻灯片效果.其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看. 这个幻灯片效果是由四个区域的独立移动构成,通过画面分 ...

如何用Qt实现ribbon office风格？附源码

如何用Qt实现ribbon office风格？附源码相关推荐

最新文章

热门文章