Qt 优秀开源项目 SARibbon

发布时间 2023-03-23 16:02:51作者: 一杯清酒邀明月

这是Qt(最低要求Qt5,支持C++11的编译器)下一个轻量级的Ribbon控件(Office样式UI),界面截图:

编译方法
  使用Qt Creator直接打开SARibbon.pro,并编译即可,会编译出SARibbonBar库和一个(目前只有一个例子)例子,lib和例子的目录位于bin_qt{Qt版本}_{debug/release}_{32/64}目录下
在debug模式编译的库后面会加上d以作区别

使用方法

可以把编译好的整个目录移动到需要的工程目录下,然后在项目的pro文件中,include SARibbonBar.pri即可,示例如下:

include($$PWD/SARibbonBar/SARibbon/SARibbonBar.pri)

快速开始

要使用SARibbon,需要对QMainWindow替换为SARibbonMainWindow,SARibbonMainWindow修改了QMainWindow对menubar的渲染方式
示例代码如下:

1 #include "SARibbonMainWindow.h"
2 class MainWindow : public SARibbonMainWindow
3 {
4     Q_OBJECT
5 public:
6     MainWindow(QWidget* par = nullptr);
7     ...
8 }

当然SARibbonMainWindow也支持普通模式的渲染,其构造函数为:

SARibbonMainWindow(QWidget *parent = nullptr, bool useRibbon = true);

第二个参数如果设置为false,将会使用普通的菜单工具栏模式,预留这个接口是为了一些项目需要能在ribbon和经典菜单工具栏切换的场景设计的,SARibbon不支持热切换,如果需要切换,用户可以设置一个配置文件或者注册表,在下次重启时给第二个参数传入false即可进入到经典菜单工具栏模式

简单的理解,Ribbon是把菜单栏和工具栏合并了,并通过一个tab控件进行展示,SARibbon在设计时参考了MFC Ribbon接口的命名风格,标签页称之为Category(种类),每个Category下面有多个pannel(面板),面板下面才是具体的toolbutton,其层次结构如下图所示,这些命名参考了MFC的ribbon界面类
Category 类别,代表一个标签所呈现的内容,对应SARibbonCategory
Context Category 上下文类别,这个是一种特殊的类别,它正常不显示,需要基于上下文判断是否应该显示,最常用的就是word中插入图片后,会有图片修改相关的标签出现,如果没选中图片,这个标签就消失,这个就是上下文类别,对应SARibbonContextCategory
Pannel 面板,这个是一组菜单的集合,office里面板都会有个面板标题,显示在面板最下方,面板之后就是工具栏按钮(Action)
Application Button 应用按钮,标签栏最左边的按钮(word就是对应文件按钮),这个按钮会触发一些特殊的页面或菜单,对应SARibbonApplicationButton,可以隐藏
Quick Access Bar 快速响应栏,位于最顶部的一个简单工具栏,用于放置一些常用的action,对应SARibbonQuickAccessBar
Gallery 预览控件,这是Ribbon最吸引眼球的控件,用直观的图像把功能显示出来,甚至有些会根据上下文进行实时渲染,典型的就是word开始标签下的样式选择,对应SARibbonGallery
简单的层次示意如下图所示:

创建Category和Pannel

创建ribbon过程先创建类别,再创建面板,最后创建对应的toolbutton(action)

 1 //添加主标签页 - 通过addCategoryPage工厂函数添加
 2 SARibbonCategory* categoryMain = ribbon->addCategoryPage(tr("Main"));
 3  //使用addPannel函数来创建SARibbonPannel,效果和new SARibbonPannel再addPannel一样
 4 SARibbonPannel* pannel1 = categoryMain->addPannel(("Panel 1"));
 5 QAction* actSave = new QAction(this);
 6 actSave->setText("save");
 7 actSave->setIcon(QIcon(":/icon/icon/save.svg"));
 8 actSave->setObjectName("actSave");
 9 actSave->setShortcut(QKeySequence(QLatin1String("Ctrl+S")));
10 pannel1->addLargeAction(actSave);

上面的操作添加了一个按钮,效果如下图所示:

 通过addLargeAction、addMediumAction、addSmallAction可以组合出不同的布局样式。具体可见./src/example/MainWindowExample/mainwindow.cpp