本文介绍使用QtitanRibbon UI控件开发QT软件界面,与QMainWindow的整体布局类似。本文均以开发gis软件的整体布局进行介绍。
一、界面框架介绍
1.QtitanRibbon介绍
QtitanRibbon是一款收费软件,QtitanRibbon实现了Microsoft Ribbon for Qt的概念,风格与Microsoft Office 相似。在QtitanRibbon5.8.1版本中,实现了Office 2016的风格。
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生成的目录下。