QT在一個源文件內新建多個UI界面

 1. QT當中，當我們需要一個新的UI界面時，通常可以選擇新建帶配套頭文件和源文件的UI界面。添加步驟如圖1.1所示。

                                        

 

 

                                                                            圖1.1 添加帶頭文件與源文件的界面

這種添加自動生成了h文件和cpp文件，系統自動做了以下工作：

(1) 在頭文件里添加了該界面的類，包括聲明和定義(示例添加的QDialog的UI界面，命名為mydialog)。頭文件代碼如下： 

#ifndef MYDIALOG_H
#define MYDIALOG_H

#include <QDialog>

namespace Ui {
class MyDialog;  //1.命名空間里聲明類名
}

class MyDialog : public QDialog  //2.類的定義
{
    Q_OBJECT

public:
    explicit MyDialog(QWidget *parent = nullptr); 
    ~MyDialog();  //3.構造函數與析構函數

private:
    Ui::MyDialog *ui;  //4.ui界面的指針
};

#endif // MYDIALOG_H

(2) 在mydialog.cpp里添加類的構造與析構函數的具體內容

#include "mydialog.h"
#include "ui_mydialog.h" //此頭文件即為mydialog的UI界面頭文件

MyDialog::MyDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::MyDialog)
{
    ui->setupUi(this);
}

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

(3) 在mydialog的配置文件中有一句代碼：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MyDialog</class>
 <widget class="QDialog" name="MyDialog">  //分別是父類和類名
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Dialog</string>
  </property>
 </widget>
 <resources/>
 <connections/>
</ui>

(4) 在pro的配置文件的FORM項添加

FORMS += \
    mydialog.ui \
    widget.ui

通過以上操作，在主窗口的cpp文件中添加"mydialog.h"，就能在主窗口中使用mudialog.ui了。

本例新建了一個空的widget窗口，窗口內設置一個按鈕，按下按鈕顯示mydialog.ui。如圖1.2所示。

                                                            

 

                                                                           圖1.2 在空Widget中點擊按鈕生成Dialog

 

 

 

注：在新建的QT工程中，有時候可能會出現設計的UI界面與顯示的UI界面不一致，如本例中設計的UI界面和運行時顯示的UI界面如圖1.3所示

                                                        

 

                                               (a) 設計的主界面                                                                        (b) 運行時主界面

                                                                                        圖1.3 設計界面與運行界面不一致

造成此問題的原因是QT對於某些高分辨率小屏幕不支持。可以在main函數的最前面添加以下聲明即可解決該問題：

#if (QT_VERSION >= QT_VERSION_CHECK(5, 6, 0))
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

 

2. 在實際情況中，常常會遇到需要主界面在不同的操作下情況需要生成不同的新界面的情況。比如本例中如果widget中有多個按鈕，每點擊一個按鈕生成一個不同的Dialog。這時需要設計多個UI界面。如果每個UI界面配套一個cpp和h文件，導致文件眾多。此時的需求是一個cpp文件和h文件，配置任意多個UI界面。

為此，我們在之前的mydialog.cpp和mydialog.h中添加配置一個新的UI界面，命名為mydialog_new。

(1) 新建一個純UI界面，如圖2.1

                             

                                                                                                             圖2.1 新建純UI界面

(2) 在mydialog.h中聲明構造函數

namespace Ui {
class MyDialog;  
class mydialog_new; //2.1在原來的命名空間內包含類名
}

//類的聲明,基本仿造mydiaog的代碼，只需要修改類名即可
class mydialog_new:public QDialog
{
    Q_OBJECT
public:
    explicit mydialog_new(QWidget *parent=nullptr);
    ~mydialog_new();
private:
    Ui::mydialog_new* ui_new;  //mydialog_new的指針
};

 

 (2) 在mydialog.cpp開頭添加(即新的UI文件)

 

 

 

 

#include "ui_mydialog_new.h"

並對構造函數和析構函數進行定義(基本仿造mydialog)

mydialog_new::mydialog_new(QWidget* parent):
    QDialog(parent),
    ui_new(new Ui::mydialog_new)
{
    ui_new->setupUi(this);
}

mydialog_new::~mydialog_new()
{
    delete ui_new;
}

 

 

 

編譯之后，主要報錯如下：   

error: invalid use of incomplete type 'class Ui::mydialog_new'   ui_new(new Ui::mydialog_new)

 

                   

此時去查看mydialog_new.ui的配置文件，發現如下：

 

 可以看到，此時類名是Dialog，並不是我們的mydialog_new，修改方法為切換到UI設計界面，如圖2.2所示

                                                                                                                          圖2.2 修改UI界面名，與類名一致

此時再編譯，沒有任何問題，說明添加成功。只需要在主界面使用即可。作為演示，現在widget中再添加一個按鈕，點擊生成新的dialog。如圖2.3 所示。

                                                                    

 

                                                                                圖2.3 點擊mydialog_new，生成新的對話框