开源Qt Ribbon控件——SARibbon的布局思路及介绍-Toy模板网

这篇具有很好参考价值的文章主要介绍了开源Qt Ribbon控件——SARibbon的布局思路及介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原文链接：https://blog.csdn.net/czyt1988/article/details/113811620

https://devpress.csdn.net/gitcode/6412b1fe986c660f3cf9294a.html?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2_defaultCTRLIST_{activity-4-108312948-blog-126431338.235^v31^pc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2}default_CTRLISTactivity-4-108312948-blog-126431338.235^v31pc_relevant_default_base3&utm_relevant_index=7#devmenu2

Qt 下结合SARibbon、Dock 开发Opencascade应用的基础框架

SARibbon的布局

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

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

SARibbon名词定义

无论是后面介绍的wps模式还是office模式，这些专有名称都是一致的，这些命名参考了MFC的ribbon界面类。
基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,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界面截图如下
基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon
SARibbon OfficeStyle的布局如下图所示：

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

WPS布局模式——SARibbonBar::WpsLiteStyle

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

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

基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon
wps模式布局：

pannel的布局

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

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

基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon
因此，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的截图如下：

基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon
通过这个改动，机智挖掘了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
};

SARibbonPannel里管理的每个action都会带有一个占位的属性（SARibbonPannelItem::RowProportion），这个占位属性决定了这个action在pannel里的布局。

下面针对不同行数进行详细介绍。

3行模式

三行模式是传统的pannel布局方式，如下图所示：

基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon
3行模式下有三种占位(SARibbonPannelItem::RowProportion)，分别为large、medium和small

large大占比，一个widget的高度会充满整个pannel
medium中占比，pannel里一列放置2个窗体，前提是这一列2个都是medium，否则会显示异常（暂时还未做medium条件降级到small的处理，后续会实现）
small小占比，pannel里一列放置3个窗体
3行模式下的pannel会显示pannel的标题在Pannel Title区域，另外还有一个OptionAction的区域，这个是给这个action添加特殊触发使用的，如果没有设置OptionAction，这个区域是隐藏。

三行模式最经典的布局就是word：

基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon

2行模式

两行模式是传统的WPS的改进布局法（具体是否是WPS首先这样做的不清楚，我是按照WPS的布局进行参考的），如下图所示：
基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon
2行模式下medium和small占位(SARibbonPannelItem::RowProportion)是一样的，不做区分。

另外两行模式下pannel是不显示标题的。

2行模式是按照WPS的2020进行参考编写的，WPS2020的截图如下：

基于qt的ribbon开源框架,Qt经验总结,工控软件,开源,qt,ribbon

测试案例

在*.pro文件中添加自己的库路径
INCLUDEPATH += $$PWD/lib/SARibbonBar_include/.

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QAction>
#include <QMessageBox>
#include "SARibbonMainWindow.h"
#include "SARibbonBar.h"
#include "SARibbonCategory.h"
#include "SARibbonCategoryLayout.h"
#include "SARibbonPannel.h"
#include "SARibbonToolButton.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public SARibbonMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : SARibbonMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    SARibbonBar *ribbon = ribbonBar();
    ribbon->setRibbonStyle(SARibbonBar::RibbonStyle::OfficeStyle);
    ribbon->setFont(QFont("微软雅黑", 12));
    ribbon->applicationButton()->setVisible(true);

    //创建SARibbonCategory实例
    SARibbonCategory *categoryMain = new SARibbonCategory();
    categoryMain->setCategoryName("Category1");
    categoryMain->setObjectName("categoryMain");
    categoryMain->setFont(QFont("微软雅黑", 12));
    ribbon->addCategoryPage(categoryMain);

    SARibbonCategory *categoryMain2 = new SARibbonCategory();
    categoryMain2->setCategoryName("Category2");
    categoryMain2->setObjectName("categoryMain2");
    categoryMain2->setFont(QFont("微软雅黑", 12));
    ribbon->addCategoryPage(categoryMain2);

    //创建SARibbonPannel实例
    SARibbonPannel *pannel = categoryMain->addPannel("pannel1");
//    QAction *action1 = new QAction("动作1");
    QAction *action1 = new QAction(QIcon(":/prefix1/bing.ico"), tr("动作1"));
    pannel->addLargeAction(action1);
    QAction *action2 = new QAction(QIcon(":/prefix1/kinventorymgr.ico"), tr("动作2"));
    pannel->addLargeAction(action2);
    //创建SARibbonPannel实例
    SARibbonPannel *pannel2 = categoryMain2->addPannel("pannel2");
    QAction *action2_1 = new QAction(QIcon(":/prefix1/qq.ico"), tr("动作2_1"));
    pannel2->addLargeAction(action2_1);
    QAction *action2_2 = new QAction(QIcon(":/prefix1/wpsbox_sharefolder.ico"), tr("动作2_2"));
    pannel2->addLargeAction(action2_2);
    //创建SARibbonPannel实例
    SARibbonPannel *pannel1_2 = categoryMain->addPannel("pannel1_2");
    QAction *action1_2 = new QAction(QIcon(":/prefix1/sync.ico"), tr("动作1_2"));
    pannel1_2->addLargeAction(action1_2);
    QAction *action1_3 = new QAction(QIcon(":/prefix1/print_property.ico"), tr("动作1_3"));
    pannel1_2->addLargeAction(action1_3);

    connect(action1, &QAction::triggered, this, [=]{
        QMessageBox::information(this,"action1消息提示", "这是一条消息提示内容");
//        categoryMain2->setVisible(true);
        ribbon->showCategory(categoryMain2);
//        pannel2->setVisible(true);
        action2_1->setVisible(true);

    });
    connect(action2_2, &QAction::triggered, this, [=]{QMessageBox::information(this,"action2_2消息提示", "这是一条消息提示内容");});
    connect(action2, &QAction::triggered, this, [=]{
//        pannel2->setVisible(false);
        action2_1->setVisible(false);
     ribbon->hideCategory(categoryMain2);
    });
}

MainWindow::~MainWindow()
{
    delete ui;
}