QT搭建ArcGis_pro Office式界面————SARibbon的布局思路

目录

一、Ribbon是什么?

二、优秀的QT开源项目-SARibbon

1.项目链接

2.编译方法

三、使用方法

1.简单的层次示意

2. 拆分下的SARibbonBar层级关系

 四、模仿搭建一个ArcGis_pro界面

1.创建Category和Pannel:

 2.QAction 加入菜单

3.添加Gallery 预览控件

 五、总结


前言

        office式界面就是传说中的ribbon模式了,就是我们经常看到的word模式,office模式的tab和标题栏占用位置较多的一种界面模式。

如:word界面

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第1张图片

WPS Ribbon 样式

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第2张图片

一、Ribbon是什么?

        Ribbon是现代化的方式帮助用户高效和直接的查找、理解和使用工具命令——通过最少的点击,减少从“尝试-错误”(trainl-and-error)方式中恢复操作,寻找新的操作的需要,并且不再需要区查看软件帮助。

        Ribbon是一种命令工具条(command bar),将软件的功能集成到窗口上方的一系列标签(tabs)中。使用Ribbon可以使得软件的功能和特性更容易被用户发现,加快软件整体学习的速度,使用户能够根据他们自身的经验更好的控制整个程序。Ribbon可以代替传统的菜单栏和工具栏。

简单的理解,Ribbon是把菜单栏和工具栏合并了,并通过一个tab控件进行展示。

二、优秀的QT开源项目-SARibbon

1.项目链接

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

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

2.编译方法

         使用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的渲染

示例代码如下:

#include "SARibbonMainWindow.h"
class MainWindow : public SARibbonMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget* par = nullptr);
    ...
}

         Ribbon是把菜单栏和工具栏合并了,并通过一个tab控件进行展示,SARibbon在设计时参考了MFC Ribbon接口的命名风格,标签页称之为Category(种类),每个Category下面有多个pannel(面板),面板下面才是具体的toolbutton。

1.简单的层次示意

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第3张图片

 QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第4张图片

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第5张图片 

2. 拆分下的SARibbonBar层级关系

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第6张图片

 看到这里,我们对它的构造层级就有了一定的了解,接下来我们再具体了解其中的各个控件

Ribbon标签(tabs)有许多“组”(group)构成,这些组中一些密切相关的功能的集合。出了标签和组,ribbons还包括:

  •  一个应用程序按钮(Application Button),会弹出一个命令菜单,其中的命令会对整个文档或者工作空间做一些操作(笔者注:如保存,设置属性等),或者利用文档或者工作空间做一些事情(笔者注:如打印,发送邮件等),比如一些和文件相关的操作。
  • 一个快捷工具栏(Quick Access Toolbar),是一个小的自定工具栏,显示常用的工具。
  • 核心标签(Core tabs):总是会显示的标签面板。
  • 上下文标签(Contextual tabs),只用当特定标签的对象被选中时才会显示。一直会显示的标签成为核心标签(Core tabs)
  • 标签集(tab set)是针对某一特定标签的对象的标签面板的集合。因为对象可能属于不同个类型(例如一个表格中带有图片的的标题具有三个类别),可以有多个上下文标签组同时显示。
  • 模态标签(Modal tabs),是一类特殊的核心标签,能够显示特定的临时模块,比如打印预览。
  • 库按钮(Galleries),是以图形化显示的命令或者选项的列表。一个基于结果的库按钮显示了这个命令或者选项的会产生的效果,而不仅仅是命令本身。一个Ribbon内的库按钮(In-Ribbon gallery)是在Ribbon内的库按钮,代替弹出窗口的作用。
  • 加强型提示(Enhanced Tooltips),简明的解释他们对应的命令的,并提示对应的快捷键。这些提示往往还带有响应的图形和帮助参考。加强型提示减少了使用功能帮助的可能性。
  • 对话框加载按钮(Dialog Box Launcher),是一些在“组”下面的按钮,使用这些按钮,会弹出包含和功能组相关的特性的对话框。
  • Category 类别,代表一个标签所呈现的内容,对应SARibbonCategory
  • Context Category 上下文类别,这个是一种特殊的类别,它正常不显示,需要基于上下文判断是否应该显示,最常用的就是word中插入图片后,会有图片修改相关的标签出现,如果没选中图片,这个标签就消失,这个就是上下文类别,对应SARibbonContextCategory
  • Pannel 面板,这个是一组菜单的集合,office里面板都会有个面板标题,显示在面板最下方,面板之后就是工具栏按钮(Action)
  • Application Button 应用按钮,标签栏最左边的按钮(word就是对应文件按钮),这个按钮会触发一些特殊的页面或菜单,对应SARibbonApplicationButton,可以隐藏
  • Quick Access Bar 快速响应栏,位于最顶部的一个简单工具栏,用于放置一些常用的action,对应SARibbonQuickAccessBar
  • Gallery 预览控件,这是Ribbon最吸引眼球的控件,用直观的图像把功能显示出来,甚至有些会根据上下文进行实时渲染,典型的就是word开始标签下的样式选择,对应SARibbonGallery

 四、模仿搭建一个ArcGis_pro界面

1.创建Category和Pannel:

//添加主标签页 - 通过addCategoryPage工厂函数添加
 SARibbonCategory* categoryMain = ribbon->addCategoryPage(tr("地图"));

 //使用addPannel函数来创建SARibbonPannel,效果和new SARibbonPannel再addPannel一样
 SARibbonPannel* pannelStyle = page->addPannel(("粘贴板"));

    QAction* actstickup = createAction(tr("粘贴"), ":/icon/icon/EditPaste32.png");
    pannelStyle->addLargeAction(actstickup);
    connect(actstickup, &QAction::triggered, this, [ this ](bool b) {
        Q_UNUSED(b);
        this->m_edit->append("actstickup clicked");
    });

    /*
     * 新增剪贴
     * */
    QAction* clip = createAction(tr("剪贴"), ":/icon/icon/EditCut32.png", "剪贴");
    clip->setCheckable(true);
    pannelStyle->addSmallAction(clip);

    // 复制
    QAction* actShowHideButton = createAction(tr("复制"), ":/icon/icon/EditCopy32.png", "复制");
    actShowHideButton->setCheckable(true);
    pannelStyle->addSmallAction(actShowHideButton);
    connect(actShowHideButton, &QAction::triggered, this, [ this ](bool b) {
        this->ribbonBar()->showMinimumModeButton(b);  //显示ribbon最小化按钮
    });
    actShowHideButton->trigger();

    //复制路径
    QAction* Paste = createAction(tr("复制路径"), ":/icon/icon/EffectsLayerDepthPriority16.png");
    Paste->setCheckable(true);
    Paste->setToolTip("复制路径");
    pannelStyle->addSmallAction(Paste);
    connect(Paste, &QAction::triggered, this, &MainWindow::onActionwordWrapIn2rowTriggered);

查看效果:

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第7张图片

通过addLargeActionaddMediumActionaddSmallAction可以组合出不同的布局样式。

 QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第8张图片

 代码体现:

 QAction* actstickup = createAction(tr("粘贴"), ":/icon/icon/EditPaste32.png");
    pannelStyle->addLargeAction(actstickup);


 QAction* clip = createAction(tr("剪贴"), ":/icon/icon/EditCut32.png", "剪贴");
    clip->setCheckable(true);
    pannelStyle->addSmallAction(clip);


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

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

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第9张图片

 

因此,pannel的布局其实归根结底就是行数,可以理解为QGridLayout来对pannel进行布局的,把grid分割为6行,large模式下占全部6行,medium模式下占据3行,small模式下占据2行(实际并不是用GridLayout布置的)。

枚举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里的布局。

 2.QAction 加入菜单

入浏览中添加:

"顶部图层"   "可见图层 "   "可选图层 "   "内容中的可选内容 "   "无弹出窗口 "  "平面导航 "  " 第一人称导航"

首先创建QAction   在创建menu  最后将menu设置到QAction中。代码如下:

SARibbonMenu *menuLook =  new SARibbonMenu(this);
    QList list;
    list<<"顶部图层"<<"可见图层 "<<"可选图层 "<<"内容中的可选内容 "<<"无弹出窗口 "<<"平面导航 "<< " 第一人称导航";
    QAction* look         = nullptr;
    {
         QIcon itemicon = QIcon(":/icon/icon/item.svg");
         for (int i =0;iaddAction(itemicon, tr("%1").arg(list[i]));
             look->setObjectName(QStringLiteral("item %1").arg(i+1));
         }
    }

    QAction* act = createAction(tr("浏览"), ":/icon/icon/3DNavigationTool32.png");
    act->setMenu(menuLook);
    btn = pannelToolButtonStyle->addLargeAction(act);
    btn->setPopupMode(QToolButton::InstantPopup);
    connect(act, &QAction::triggered, this, &MainWindow::onDelayedPopupCheckabletriggered);

查看效果:

QT搭建ArcGis_pro Office式界面————SARibbon的布局思路_第10张图片

 我们可见其中menu 的图标都一样,不好区分,如果有朋友喜欢在做精致一点可以这样给每一个都加上不同的图标:或者加入分割符。

代码如下

 QAction* Newreport         = nullptr;
    {
         QList  itemicon;
        //加入图标
         itemicon<addAction(itemicon[i], tr("%1").arg(listNewreport[i]));
             
             //在第一行和第二行加一行分隔符。
             if(i == 1)
             {
                  menuConnection->addSeparator();
             }
             Newreport->setObjectName(QStringLiteral("item %1").arg(i+1));
         }
    }

3.添加Gallery 预览控件

如下图所示:

 Gallery 预览控件,这是Ribbon最吸引眼球的控件,用直观的图像把功能显示出来,甚至有些会根据上下文进行实时渲染,典型的就是word开始标签下的样式选择,对应SARibbonGallery

对应代码设计:

SARibbonPannel* pannelLayerTemplates = page->addPannel(tr("图层模板"));
    SARibbonGallery* gallery = pannelLayerTemplates->addGallery();
    QList< QAction* > galleryActions;
    auto lambdaCreateGalleryAction = [ this ](const QString& text, const QString& iconurl) -> QAction* {
        QAction* act = this->createAction(text, iconurl);
        this->connect(act, &QAction::triggered, this, [ this, text ]() {
            if (this->m_edit) {
                this->m_edit->append(QString("%1 triggered").arg(text));
            }
        });
        return act;
    };
    galleryActions.append(lambdaCreateGalleryAction("亮色地图注释", ":/gallery-icon/icon/gallery/Document-File.svg"));
    galleryActions.append(lambdaCreateGalleryAction("深色地图注释", ":/gallery-icon/icon/gallery/Download-File.svg"));
    galleryActions.append(lambdaCreateGalleryAction("浅色地图注释", ":/gallery-icon/icon/gallery/Drive-File.svg"));
    galleryActions.append(lambdaCreateGalleryAction("配对地图注释", ":/gallery-icon/icon/gallery/Dropbox-File.svg"));
    galleryActions.append(lambdaCreateGalleryAction("粉彩地图注释", ":/gallery-icon/icon/gallery/Email-File.svg"));
    galleryActions.append(lambdaCreateGalleryAction("红绿地图注释", ":/gallery-icon/icon/gallery/Encode-File.svg"));

效果如下;

 

 五、总结

总之 SARibbon是一个非常优秀的开源项目,更多更详细的例子参考项目官方文档:GitHub - czyt1988/SARibbon: Ribbon Control for Qt

 本人也在学习中,如有错误欢迎指正。感谢您的阅读

你可能感兴趣的:(qt,C++,笔记,c++,qt,arcgis,开发语言)