Qt系列文章之(十) ui文件的使用

上一篇文章在主函数中构造了一个简单的主窗口界面,继承了一些基本元素,如菜单栏、工具栏、悬浮窗口、主界面等元素。不过这些元素都是在栈区开辟的临时变量,放在主函数里面来实现。 这不是一种标准的UI界面开发手段。 一般在界面项目开发之中有几个典型的开发规则:

• 将控件布局设计和底层函数开发解耦;这种方式就是构造专门的类来负责界面控件布局设计,构造另外一个类来实现各个控件关联的动作函数和属性。一般第二个类直接继承第一个类(或者集成第一个类)来开发。(Python 中开发界面是继承第一个类开发,而C++中一般是在第二个类中集成第一个类,常见的集成方式是作用域,如经常见到的Ui::mainWindow *ui。)

• 在界面开发时,将绝大部分的控件设计和底层函数封装到一个专门的用户界面类中,当其他类需要使用该界面类时直接对界面类进行实例化,而不再次对界面类中的布局和方法进行开发,只是调用界面类对外开放的方法和属性。(这也是核心功能封装和工作解耦的思路)

• 在界面类中添加新的控件绝大部分都使用堆区开辟内存的方式实现,很少使用栈区指针或者临时变量的方式。

上面介绍的第一步中提到了将界面设计和后端函数解耦,Qt为了方便开发者快速开发界面,界面设计可以采用控件拖拽的方式来设计,生成.ui文件。 Qt在编译时会自动将ui文件编译成cpp和h文件。

界面设计文件(.ui)

前期文章中新建一个窗口项目的时候生成了三个文件,分别是:mainwindow.h、mainwindow.cpp和mainwindow.ui。Qt实际生成的文件还有两个:ui_mainwindow.h和moc_mainwindow.cpp。不过这两个文件都是基于前三个文件自动生成的,不需要我们去手动实现。这其中的.ui文件就是用来完成对界面内控件进行布局和设计。mainwindow.h和mainwindow.cpp文件是用来实现后端界面相关属性和方法函数代码开发。这样就可以实现界面设计和后端代码解耦开发。
在这里插入图片描述
打开上一篇帖子开发的项目,对其先做一些基本的修改:
mainwindow.h头文件添加一些私有属性:

private:
    Ui::mainWindow *ui;
    QMenu *m_fileMenu;     //添加一些menu
    QToolBar *m_fileToolBar; //添加一些工具栏
QDockWidget *m_dockWidget = nullptr;

mainwindow.cpp源文件构造函数中对其属性进行设置:

mainWindow::mainWindow(QWidget *parent)
    : QMainWindow(parent)
      , ui(new Ui::mainWindow)
      ,m_dockWidget (new QDockWidget("Dock Widget", this))
{
    ui->setupUi(this);

    m_fileMenu = menuBar()->addMenu("&File");
    m_fileMenu->addAction("newAction");
    m_fileMenu->addAction("openAct");
    m_fileMenu->addAction("saveAct");

    m_fileToolBar = addToolBar("File");
    m_fileToolBar->addAction("newAction");
    m_fileToolBar->addAction("openAct");
    m_fileToolBar->addAction("saveAct");

    m_dockWidget->setAllowedAreas(Qt::LeftDockWidgetArea |
                                    Qt::RightDockWidgetArea);
    addDockWidget(Qt::LeftDockWidgetArea, m_dockWidget);
}

编译运行项目:
在这里插入图片描述
双击.ui文件,进入Qt界面设计工具:
在这里插入图片描述

左侧是一些典型控件图标,可以直接通过拖拽进入界面设计区域。关于Qt界面设计工具的使用,本系列文章不会做详细介绍,这方面网上有很多例子和教学视频,对于大部分使用者来说很容易上手。在主界面拖入一个文本编辑框,并应用全局布局让文本编辑框布满整个主界面中心区域。
在这里插入图片描述

编译运行代码,得到几乎和上一文章中一样的界面效果:
在这里插入图片描述

本文用到的头.h文件:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include <QtCore>
#include <QMenu>
#include <QMenuBar>
#include <QToolBar>
#include <QDockWidget>
#include <QPlainTextEdit>
#include <QAction>

QT_BEGIN_NAMESPACE
namespace Ui { class mainWindow; }
QT_END_NAMESPACE

class mainWindow : public QMainWindow
{
    Q_OBJECT

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

private:
    Ui::mainWindow *ui;
    QMenu *m_fileMenu;     //添加一些menu
    QToolBar *m_fileToolBar; //添加一些工具栏
    QDockWidget *m_dockWidget = nullptr;
};
#endif // MAINWINDOW_H

本文用到的.cpp文件:

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

mainWindow::mainWindow(QWidget *parent)
    : QMainWindow(parent)
      , ui(new Ui::mainWindow)
      ,m_dockWidget (new QDockWidget("Dock Widget", this))
{
    ui->setupUi(this);

    m_fileMenu = menuBar()->addMenu("&File");
    m_fileMenu->addAction("newAction");
    m_fileMenu->addAction("openAct");
    m_fileMenu->addAction("saveAct");

    m_fileToolBar = addToolBar("File");
    m_fileToolBar->addAction("newAction");
    m_fileToolBar->addAction("openAct");
    m_fileToolBar->addAction("saveAct");

    m_dockWidget->setAllowedAreas(Qt::LeftDockWidgetArea |
                                    Qt::RightDockWidgetArea);
    addDockWidget(Qt::LeftDockWidgetArea, m_dockWidget);
}

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

主函数main.cpp:

#include "mainwindow.h"

#include <QApplication>
#include <QMainWindow>
#include <QtCore>
#include <QMenu>
#include <QMenuBar>
#include <QToolBar>
#include <QDockWidget>
#include <QPlainTextEdit>
#include <QAction>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    mainWindow w;

//    //在左侧添加一个悬浮窗口



//    //在中间添加一个文本编辑框
//    QPlainTextEdit textArea;
//    w.setCentralWidget(&textArea);

    w.show();
    return a.exec();
}

本文中开发的的.ui文件XML代码(用户另存为.ui文件即可打开):

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>mainWindow</class>
 <widget class="QMainWindow" name="mainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>mainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="0">
     <widget class="QPlainTextEdit" name="plainTextEdit">
      <property name="plainText">
       <string>Welcome to Qt world!</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

此文主要介绍了如何使用ui文件实现前段界面控件设计和后端自定义代码开发的解耦,尚未介绍太多后端代码开发,将在后期文章中依次介绍。


欢迎同好沟通交流,批评指正,欢迎关注我的公号:不如起而行之

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页