开源Qt Ribbon控件——SARibbon的布局思路及介绍

最新推荐文章于 2025-03-11 21:05:28 发布

尘中远

最新推荐文章于 2025-03-11 21:05:28 发布

阅读量1w

点赞数 18

分类专栏： qt 文章标签： Qt Ribbon Ribbon office 界面 Qt

本文链接：https://blog.youkuaiyun.com/czyt1988/article/details/113811620

版权

qt 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了SARibbonBar的四种布局模式，包括OfficeStyle、WpsLiteStyle及其2行版本，涵盖了Category、ContextCategory、Pannel、ApplicationButton和QuickAccessBar等关键名词，并展示了WPS对传统Ribbon布局的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章列表

SARibbon介绍、编译教程
 SARibbon入门篇-ribbon名词及布局方式教程

SARibbonBar是Qt的开源Ribbon控件，代码托管于github和gitee

SARibbon介绍[github],[gitee]
SARibbon布局入门[github],[gitee]

SARibbon的布局

在介绍如何使用SARibbon之前，需要首先了解SARibbon是如何布局的，在src/SARibbonBar/doc下有个ppt对Ribbon的布局进行了介绍，本文内容与ppt一直，增加了一些文字说明。

由于SARibbon支持四种布局模式，这四种布局模式定义在SARibbonBar的枚举SARibbonBar::RibbonStyle,由于布局模式会影响显示效果和实际函数调用的方法，因此有必要先对SARibbon支持的这四种布局模式进行介绍。

SARibbon名词定义

无论是后面介绍的wps模式还是office模式，这些专有名称都是一致的，这些命名参考了MFC的ribbon界面类

msdn ribbon 介绍页

Category 类别，代表一个标签所呈现的内容，对应SARibbonCategory
Context Category 上下文类别，这个是一种特殊的类别，它正常不显示，需要基于上下文判断是否应该显示，最常用的就是word中插入图片后，会有图片修改相关的标签出现，如果没选中图片，这个标签就消失，这个就是上下文类别，对应SARibbonContextCategory
Pannel 面板，这个是一组菜单的集合，office里面板都会有个面板标题，显示在面板最下方，面板之后就是工具栏按钮（Action）
Application Button 应用按钮，标签栏最左边的按钮（word就是对应文件按钮），这个按钮会触发一些特殊的页面或菜单，对应SARibbonApplicationButton,可以隐藏
Quick Access Bar 快速响应栏，位于最顶部的一个简单工具栏，用于放置一些常用的action，对应SARibbonQuickAccessBar
Gallery 预览控件,这是Ribbon最吸引眼球的控件，用直观的图像把功能显示出来，甚至有些会根据上下文进行实时渲染，典型的就是word开始标签下的样式选择，对应SARibbonGallery

Office布局模式——SARibbonBar::OfficeStyle

此模式和Office的Ribbon样式一致，office的word界面截图如下

office 界面截图

SARibbon OfficeStyle的布局如下图所示：

OfficeStyle 布局

这个布局和office的默认布局是一致的

WPS布局模式——SARibbonBar::WpsLiteStyle

此模式和Office的Ribbon样式有区别，参考了WPS的ribbon界面做法，把office ribbon较占空间的标题栏进行利用，实现了界面的最大利用，这个模式下可以减少一个标题栏的高度，WPS模式截图如下：

这个图时WPS对ribbon的第一次更改，wps对ribbon的第二次改动，在行数这一节会有介绍

Wps 改动了ribbon的布局方式，第1次改动

wps模式布局：

WpsLiteStyle 布局

pannel的布局

在标准的pannel中，一个action（按钮）有3种布局，以office word为例，pannel的三种布局其实是所占行数:

第一种，占满整个pannel，只有一行，称之为large
第二种，一个pannel下放置两行，称之为medium
第三种，一个pannel放置3行内容，称之为samll

word pannel 布局示例

因此，pannel的布局其实归根结底就是行数，SARibbon一开始是用QGridLayout来对pannel进行布局的，把grid分割为6行，large模式下占全部6行，medium模式下占据3行，small模式下占据2行，后续参考QToolBar的源码，重新实现了pannel的自定义布局。

行数

上一节讲到了pannel的布局，pannel布局一个很关键的点就是行的概念，行的不同定义，会影响整个显示效果。
在高版本的wps中，为了进一步缩减ribbon bar的高度，把ribbon的3行按钮改为了2个，这样使得ribbon bar进一步缩减，对应action不多的category显得会更饱满，相当于只有medium，没有small模式。这是WPS对ribbon的第二次布局更改，新版WPS的截图如下：

Wps 改动了ribbon的布局方式，第2次改动

通过这个改动，机智挖掘了ribbon的高度，SARibbon支持这几种ribbon样式，引入了行数的概念，在SARibbonBar::RibbonStyle的枚举中带TwoRow结尾的都是指代2行模式

/**
* @brief 定义ribbon的风格,第一字节代表样式，第二字节代表是否是2行
*/
enum RibbonStyle {
    OfficeStyle		= 0x0000        ///< 类似office 的ribbon风格
    , WpsLiteStyle		= 0x0001        ///< 类似wps的紧凑风格
    , OfficeStyleTwoRow	= 0x0100        ///< 类似office 的ribbon风格 2行工具栏 三行布局模式，office就是三行布局模式，pannel能布置3行小toolbutton，默认模式
    , WpsLiteStyleTwoRow	= 0x0101        ///< 类似wps的紧凑风格  2行工具栏
};

枚举SARibbonPannelItem::RowProportion是为了表征每个窗体在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
};