在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:SARibbon开源软件地址:https://gitee.com/czyt1988/SARibbon开源软件介绍:简介这是Qt(最低要求Qt5,支持C++11的编译器)下一个轻量级的Ribbon控件(Office样式UI),界面截图: MIT协议,欢迎大家使用并提出意见 gitee(码云) - https://gitee.com/czyt1988/SARibbon github - https://github.com/czyt1988/SARibbon 编译方法使用Qt Creator直接打开
使用方法可以把编译好的整个目录移动到需要的工程目录下,然后在项目的pro文件中, include($$PWD/SARibbonBar/SARibbon/SARibbonBar.pri) 快速开始要使用SARibbon,需要对 示例代码如下: #include "SARibbonMainWindow.h"class MainWindow : public SARibbonMainWindow{ Q_OBJECTpublic: MainWindow(QWidget* par = nullptr); ...} 当然 SARibbonMainWindow(QWidget *parent = nullptr, bool useRibbon = true); 第二个参数如果设置为false,将会使用普通的菜单工具栏模式,预留这个接口是为了一些项目需要能在ribbon和经典菜单工具栏切换的场景设计的, 简单的理解,Ribbon是把菜单栏和工具栏合并了,并通过一个tab控件进行展示,
简单的层次示意如下图所示: 创建Category和Pannel创建ribbon过程先创建类别,再创建面板,最后创建对应的toolbutton(action) //添加主标签页 - 通过addCategoryPage工厂函数添加SARibbonCategory* categoryMain = ribbon->addCategoryPage(tr("Main")); //使用addPannel函数来创建SARibbonPannel,效果和new SARibbonPannel再addPannel一样SARibbonPannel* pannel1 = categoryMain->addPannel(("Panel 1"));QAction* actSave = new QAction(this);actSave->setText("save");actSave->setIcon(QIcon(":/icon/icon/save.svg"));actSave->setObjectName("actSave");actSave->setShortcut(QKeySequence(QLatin1String("Ctrl+S")));pannel1->addLargeAction(actSave); 上面的操作添加了一个按钮,效果如下图所示: 通过 更加具体复杂的例子可见SARibbon的布局章节 不同的“按钮”布局
不同的方法添加的action最后在pannel里显示的效果不一样,具体见pannel的布局 ContextCategory 上下文标签所谓上下文标签是指在特殊情况下才出现的标签/标签组,例如office word在选中图片时会出现图片编辑的上下文标签,如下图所示: SARibbon中上下文标签对应的类为 上下文标签一般在程序初始化的时候就创建好,平时隐藏,等待需要显示的时候再显示,创建上下文标签如下: 由于上下文标签需要使用时唤起,因此,用一个成员变量保存起来是一个比较好的选择,当然也可以遍历查找( 头文件: SARibbonContextCategory* m_contextCategory; cpp文件: SARibbonBar* ribbon = ribbonBar();//创建一个contextCategory,颜色随机m_contextCategory = ribbon->addContextCategory(tr("context"), QColor());SARibbonCategory* contextCategoryPage1 = m_contextCategory->addCategoryPage(tr("Page1"));//对contextCategoryPage1进行操作......SARibbonCategory* contextCategoryPage2 = m_contextCategory->addCategoryPage(tr("Page2"));//对contextCategoryPage2进行操作...... 由 要显示一个上下文只需要调用 void MainWindow::onShowContextCategory(bool on){ if (on) { this->ribbonBar()->showContextCategory(m_contextCategory); } else { this->ribbonBar()->hideContextCategory(m_contextCategory); }} 注意: 如果要删除 不同样式的contextCategory有不一样的风格,具体可见:SARibbon样式以及不同样式下的显示对比 ApplicationButtonribbon界面左上角有个特殊且明显的按钮,称之为 SARibbonBar* ribbon = ribbonBar();ribbon->applicationButton()->setText(("File")); 默认的applicationButton继承自 QuickAccessBar和rightButtonGroupQuickAccessBar是左上角的快速工具栏,rightButtonGroup是右上角的快速工具栏,在office模式下分左右两边,在wps模式下,左右将合起来,统一放到右边 SARibbon中:
SARibbonBar在初始化时会默认创建QuickAccessBar和RightButtonGroup,通过 QAction* MainWindow::createAction(const QString& text, const QString& iconurl, const QString& objName){ QAction* act = new QAction(this); act->setText(text); act->setIcon(QIcon(iconurl)); act->setObjectName(objName); return act;}void MainWindow::initQuickAccessBar(){ SARibbonBar* ribbon = ribbonBar(); SARibbonQuickAccessBar* quickAccessBar = ribbon->quickAccessBar(); quickAccessBar->addAction(createAction("save", ":/icon/icon/save.svg", "save-quickbar")); quickAccessBar->addSeparator(); quickAccessBar->addAction(createAction("undo", ":/icon/icon/undo.svg"),"undo"); quickAccessBar->addAction(createAction("redo", ":/icon/icon/redo.svg"),"redo"); quickAccessBar->addSeparator();}void MainWindow::initRightButtonGroup(){ SARibbonBar* ribbon = ribbonBar(); SARibbonButtonGroupWidget* rightBar = ribbon->rightButtonGroup(); QAction* actionHelp = createAction("help", ":/icon/icon/help.svg","help"); connect(actionHelp, &QAction::triggered, this, &MainWindow::onActionHelpTriggered); rightBar->addAction(actionHelp);} SARibbon样式
Office Ribbon 样式office模式是最常见的ribbon模式,tab和标题栏占用位置较多。 此模式和Office的Ribbon样式一致,office的word界面截图如下 SARibbon的 针对上面样式的布局,见SARibbon的布局 WPS Ribbon 样式wps设计的ribbon模式进行了改良,它为了减小ribbon的高度,把标签和标题栏设置在一起,这样减少了一个标题栏高度,有效利用了垂直空间,这是WPS对ribbon的第一次改动 SARibbon的 针对上面样式的布局,见SARibbon的布局 在正常屏幕下,WPS 样式会比 Office 样式减少至少30像素左右的垂直高度,相比1920*1080的屏幕来说,相当于节约了接近3%的垂直空间 不同样式下的显示对比:
更小的垂直空间为了更好的利用垂直空间,WPS把原来的3行变为了2行,这样可以释放更多的垂直空间,这是WPS对ribbon的第二次布局更改,新版WPS的截图如下:
office ribbon样式的2行显示效果: wps ribbon样式的2行显示效果: 正常屏幕下不同样式的垂直高度如下表所示:
由上表可见WPS Ribbon 2line样式的垂直高度为普通Office Ribbon 样式的65%,相比1920*1080的屏幕来说,相当于节约了接近5%的垂直空间 在感观上,WPS Ribbon 2line 样式的显示效果还是比传统的office布局多出很多空间 SARibbon的布局不同样式有不同的布局方法 Office布局模式——SARibbonBar::OfficeStyle
这个布局和office的默认布局是一致的 WPS布局模式——SARibbonBar::WpsLiteStyle此模式和Office的Ribbon样式有区别,参考了WPS的ribbon界面做法,把office ribbon较占空间的标题栏进行利用,实现了界面的最大利用,这个模式下可以减少一个标题栏的高度 pannel的布局在标准的pannel中,一个action(按钮)有3种布局,以office word为例,pannel的三种布局其实是所占行数:
因此,pannel的布局其实归根结底就是行数,可以理解为 枚举 /** * @brief 定义了行的占比,ribbon中有large,media和small三种占比 */enum RowProportion { None ///< 为定义占比,这时候将会依据expandingDirections来判断,如果能有Qt::Vertical,就等同于Large,否则就是Small , Large ///< 大占比,一个widget的高度会充满整个pannel , Medium ///< 中占比,在@ref SARibbonPannel::pannelLayoutMode 为 @ref SARibbonPannel::ThreeRowMode 时才会起作用,且要同一列里两个都是Medium时,会在三行中占据两行 , Small ///< 小占比,占SARibbonPannel的一行,Medium在不满足条件时也会变为Small,但不会变为Large}; SARibbonPannel里管理的每个action都会带有一个占位的属性( 上面讲到了pannel的布局,pannel布局一个很关键的点就是 下面针对不同行数进行详细介绍。 3行模式三行模式是传统的pannel布局方式,如下图所示: 3行模式下有三种占位(
3行模式下的pannel会显示pannel的标题在 2行模式两行模式是传统的WPS的改进布局法(具体是否是WPS首先这样做的不清楚,我是按照WPS的布局进行参考的),如下图所示: 2行模式下medium和small占位( 另外两行模式下pannel是不显示标题的。 2行模式是按照WPS的2020进行参考编写的,WPS2020的截图如下:
SARibbon的自定义功能ribbon的自定义是ribbon的一个特色,参考了office和wps的自定义界面,用户可以为自己的ribbon定义非常多的内容,甚至可以定义出一个完全和原来不一样的界面。 以下是office的自定义界面 以下是wps的自定义界面 SARibbon参考office和wps的界面,封装了方便使用的
实际用户使用仅会面对
如何给界面添加自定义功能这里演示如何添加自定义功能 首先定义 //MainWindow.h 中定义成员变量SARibbonActionsManager* m_ribbonActionMgr;///< 用于管理所有action 在MainWindow的初始化过程中,还需要创建大量的 //MainWindow的初始化,生成QAction//生成ribbon布局m_ribbonActionMgr = new SARibbonActionsManager(mainWinowPtr);m_ribbonActionMgr->autoRegisteActions(mainWinowPtr);
在需要调用 QString cfgpath = "customization.xml";SARibbonCustomizeDialog dlg(this, this);dlg.setupActionsManager(m_ribbonActionMgr);dlg.fromXml(cfgpath);//调用这一步是为了把已经存在的自定义步骤加载进来,在保存时能基于原有的自定义步骤上追加if (QDialog::Accepted == dlg.exec()) { dlg.applys();//应用自定义步骤 dlg.toXml(cfgpath);//把自定义步骤保存到文件中} 在MainWindow生成前还需要把自定义的内容加载,因此在构造函数最后应该加入如下语句: //MainWindow的构造函数最后sa_apply_customize_from_xml_file("customization.xml", this, m_ribbonActionMgr);
这样软件每次启动都会按照配置文件加载。 SARibbon实现自定义只需上述几步即可实现。 更多截图
github - https://github.com/czyt1988/sa gitee - https://gitee.com/czyt1988/SA 题外这个Ribbon主要靠 目前基本的布局和ToolButton功能以及完成,简单的RibbonGallery控件也有初步实现,后续还需对Gallery进行完善 更多界面截图可看: github - https://github.com/czyt1988/sa gitee - https://gitee.com/czyt1988/SA SARibbon项目是SA项目的子项 具体Ribbon的生成代码可见:https://github.com/czyt1988/sa/blob/master/src/signA/MainWindowPrivate.cpp 这个ribbon主要通过QTabbar和QStackWidget实现,按照微软MFCRibbbon的接口命名方式来写,主要通过qss来控制,默认qss在资源文件中,理论上能满足各种样式,可以实现样式的切换(换肤) 若有空会把这个 计划及进度计划
已知bug
其他
|
请发表评论