QT界面开发1：使用QtitanRibbon5开发软件界面

本文介绍使用QtitanRibbon UI控件开发QT软件界面，与QMainWindow的整体布局类似。本文均以开发gis软件的整体布局进行介绍。

一、界面框架介绍

1.QtitanRibbon介绍

QtitanRibbon是一款收费软件，QtitanRibbon实现了Microsoft Ribbon for Qt的概念，风格与Microsoft  Office 相似。在QtitanRibbon5.8.1版本中，实现了Office  2016的风格。

在项目中添加QtitanRibbon的引用参考这篇文章：

QGIS二次开发1: vs工程环境配置_guoqiong07的博客-CSDN博客

2.整体布局介绍

首先看一下本文所实现的软件界面：

其中布局1指软件的title；布局2对应QtitanRibbon 中的ribbonBar，用来放置QAction、QMenu等；布局3为中间控件，在中间控件中放置画布QgsMapCanvas；布局4为QgsDockWidget，用来展示如图层树形控件、要素属性列表等。

二、各布局实现

 先看在构造函数中整体需要实现的函数：

    sInstance = this;
	//设置软件title
    setWindowTitle(QStringLiteral("QtGis"));
	//创建地图画布
    createMapCanvas();
	//创建QAction
    createActions();
	//创建菜单
    createMenuFile();
	//创建快速访问按钮
    createQuickAccessBar();
	//创建RibbonPage并添加QAction
    createRibbonBar();
	//创建DockWidget
	createDockWidget();

1. 创建地图画布

以下是对函数createMapCanvas()的实现：

	//创建一个QTabWidget
    mCenterTabWidget = new QTabWidget(this);
	//创建一个画布
    mMapCanvas = new QgsMapCanvas();
    mMapCanvas->setObjectName("mapCanvas");
	//设置画布背景色、选中色、缓存、更新间隔等属性
    mMapCanvas->setPreviewJobsEnabled(true);
    mMapCanvas->setCanvasColor(QColor(255, 255, 255));
    mMapCanvas->setSelectionColor(QColor(0, 255, 255));
    mMapCanvas->setProject(QgsProject::instance());
    mMapCanvas->setParallelRenderingEnabled(true);
    mMapCanvas->setCachingEnabled(true);
    mMapCanvas->setMapUpdateInterval(250);

    // set project linked to main canvas
    mMapCanvas->setProject(QgsProject::instance());
	//将画布添加在创建的QTabWidget控件mCenterTabWidget中
    mCenterTabWidget->addTab(mMapCanvas, "Map View");
    mCenterTabWidget->tabBar()->setTabButton(mCenterTabWidget->indexOf(mMapCanvas), QTabBar::RightSide, nullptr) ;
	//设置该QTabWidget控件mCenterTabWidget展示在窗体的中间
    setCentralWidget(mCenterTabWidget);
    mMapCanvas->setFocus();

2.创建QAction

将软件中所需要用到的QAction在此函数中初始化，比如创建添加矢量、栅格的按钮，并绑定相应的槽函数，以下是对createActions()函数的实现：

    mFileNew = new QAction(DemoRibbonWindow::createIcon(Image_New),tr("New"));
    mFileNew->setToolTip(QStringLiteral("New File"));
    connect(mFileSaveAs, SIGNAL(triggered()), this, SLOT(slot_fileNew()));

    mFileOpen = new QAction(DemoRibbonWindow::createIcon(Image_Open),tr("Open"));
    mFileOpen->setToolTip(QStringLiteral("Open File"));
    connect(mFileSaveAs, SIGNAL(triggered()), this, SLOT(slot_fileOpen()));

    mFileSave = new QAction(DemoRibbonWindow::createIcon(Image_Save),tr("Save"));
    mFileSave->setToolTip(QStringLiteral("Save File"));
    connect(mFileSaveAs, SIGNAL(triggered()), this, SLOT(slot_fileSave()));

    mFileSaveAs = new QAction(DemoRibbonWindow::createIcon(Image_SaveAs), tr("Save As"));
    mFileSaveAs->setToolTip(QStringLiteral("Save File As"));
    connect(mFileSaveAs, SIGNAL(triggered()), this, SLOT(slot_fileSaveAs()));

    mFileClose = new QAction(DemoRibbonWindow::createIcon(Image_Close), tr("Close"));
    mFileClose->setToolTip(QStringLiteral("Close File"));
    connect(mFileSaveAs, SIGNAL(triggered()), this, SLOT(slot_fileClose()));

    mFileExit = new QAction(DemoRibbonWindow::createIcon(Image_Exit), tr("Exit"));
    connect(mFileSaveAs, SIGNAL(triggered()), this, SLOT(slot_fileExit()));

    mAddRasterLayer = new QAction(DemoRibbonWindow::createIcon(Add_RasterLayer), tr("Add Raster Layer"));
    connect(mAddRasterLayer, SIGNAL(triggered()), this, SLOT(slot_addRaterLayer()));

    mAddVectorLayer = new QAction(DemoRibbonWindow::createIcon(Add_VectorLayer), tr("Add Vector Layer"));
    connect(mAddVectorLayer, SIGNAL(triggered()), this, SLOT(slot_addVectorLayer()));

3.创建菜单

在本软件中，菜单只包含截图中的部分，主要是实现工程的新建、打开保存、关闭、退出、最近打开的工程列表等功能。

以下是对createMenuFile()函数的实现：

    QIcon iconLogo;
    iconLogo.addPixmap(QPixmap(QStringLiteral(":/QtGis/images/qtitanlogo32x32.png")));
	//添加Project菜单
    QAction* actionFile = ribbonBar()->addSystemButton(iconLogo, tr("&Project"));
    ribbonBar()->systemButton()->setToolButtonStyle(Qt::ToolButtonTextOnly);
    actionFile->setToolTip(tr("Click here to see everything you can do with your document"));
    RibbonSystemMenu* systemMenu = qobject_cast<RibbonSystemMenu*>(actionFile->menu());
	//在菜单下添加相应的按钮
    systemMenu->addAction(mFileNew);
    systemMenu->addAction(mFileOpen);
    systemMenu->addAction(mFileSave);
    systemMenu->addAction(mFileSaveAs);
    systemMenu->addAction(mFileClose);
    systemMenu->addAction(mFileExit);
	//在菜单下最近打开的工程列表控件
    RibbonPageSystemRecentFileList* pageRecentFile = systemMenu->addPageRecentFile(QStringLiteral("Recent Maps"));
	//设置最多展示已打开的9个工程
    pageRecentFile->setSize(9);
	//绑定槽函数
    connect(pageRecentFile, SIGNAL(openRecentFile(const QString&)), this, SLOT(openRecentFile(const QString&)));
    connect(this, SIGNAL(updateRecentFileActions(const QStringList&)), pageRecentFile, SLOT(updateRecentFileActions(const QStringList&)));

4.创建快速访问按钮

如果需要添加快速访问按钮，可以使用以下代码段实现。本软件实现了将打开工程、保存工程按钮添加为快速访问按钮，如截图部分所示：

 

 

 以下是对createQuickAccessBar()函数的实现：

    RibbonQuickAccessBar* quickAccessBar = ribbonBar()->quickAccessBar();
    QAction* action = quickAccessBar->actionCustomizeButton();
    action->setToolTip(tr("Customize Quick Access Bar"));

    QAction* smallButton = quickAccessBar->addAction(DemoRibbonWindow::createIcon(Image_Open), QStringLiteral("Open Project"));
    smallButton->setToolTip(QStringLiteral("Open Project"));
    connect(smallButton, SIGNAL(triggered()), this, SLOT(slot_fileOpen()));

    smallButton = quickAccessBar->addAction(DemoRibbonWindow::createIcon(Image_Save), QStringLiteral("Save Project"));
    smallButton->setToolTip(QStringLiteral("Save Project"));
    connect(smallButton, SIGNAL(triggered()), this, SLOT(slot_fileSave()));

    quickAccessBar->setVisible(true);

5.创建RibbonPage并添加QAction

如截图所示，Tab部分的Layer对应为RibbonPage，在该page下可以添加如AddRasterLayer、AddVectorLayer的按钮，并且将这两个按钮都分组到下方Layer分组中。

 以下是对createRibbonBar()函数的实现：

	//创建page Layer
    RibbonPage* pageFile = ribbonBar()->addPage(tr("&Layer"));
	//创建分组 Layer
    RibbonGroup* layerGroup = pageFile->addGroup(QStringLiteral("Layer"));
	//在分组 Layer下添加按钮
    layerGroup->addAction(mAddRasterLayer, Qt::ToolButtonTextUnderIcon);
    layerGroup->addAction(mAddVectorLayer, Qt::ToolButtonTextUnderIcon);

    ribbonBar()->setFrameThemeEnabled();

6.添加侧边栏

在本软件中，侧边栏都是使用QgsDockWidget控件实现，可以任意拖拽。以下是对createDockWidget()函数的实现。

	//新建图层QgsDockWidget
	mLayerMapDock = new QgsDockWidget(this);
	mLayerMapDock->setWindowTitle(tr("Layer Maps"));
	mLayerMapDock->setObjectName(QStringLiteral("LayerMaps"));
	//将图层QgsDockWidget 添加在左侧展示
	addDockWidget(Qt::LeftDockWidgetArea, mLayerMapDock);

	mAttributeDock = new QgsDockWidget(this);
	mAttributeDock->setWindowTitle(tr("Object Attribute"));
	mAttributeDock->setObjectName(QStringLiteral("ObjectAttribute"));
	addDockWidget(Qt::RightDockWidgetArea, mAttributeDock);

以上函数都实现后，就完成了以下的大体框架，接下来就可以在框架中实现具体的功能。

 三、其他事项

一般新建的QT widgets Application项目窗体都继承自 QMainWindow类，而使用QtitanRibbon开发界面，需继承自QtitanRibbon提供的类。

如果软件中需要展示SVG格式的图标，则需要将QT plugins目录下的imageformats文件夹拷贝至软件exe生成的目录下。