Qt5学习笔记3:Qt的ui界面文件与程序源代码的生成关系及访问

首先,按照前面章节的方法,创建一个工程demo,位于目录demo/下,然后直接编译运行。弹出一个空窗口,如下:

工程项目在Qt creator的管理界面显示如下:

在工程目录demo/下,生成了两个文件夹:build-xxx-Debug和demo,

所含文件分别如下:

Qt creator中的项目界面显示的文件与这两个文件夹分别是什么关系?demo里面的就是Qt creator中显示的文件,是重要的源码文件,而build-xxx-Debug似乎并不重要,只是编译生成的一些目标文件。确实也如此,把build-xxx-Debug文件夹删掉,重新编译工程,还能重新生成。

 

一、文件夹build-xxx-Debug与demo之间的关系

从上面的实验来看,build-xxx-Debug只是临时生成的,无关重要,而demo里面的才是真正有用的文件。

首先从xxx.ui文件入手,这是个界面文件,添加控件:一个“Hello world”的标签label

然后,编译,运行,结果:如你所想

查看代码添加了什么内容。。。没变化???!!!

按理来说,我把一个控件拉进界面里面,重新编译出来的源码会添加相应的代码,但是,事实并没有并没有。

mainwindow.cpp代码如下:

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

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

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

确实没有"Hello world"的label相关代码,但是发现包含的一个头文件“ui_mainwindow.h”,这个文件不在Qt creator的项目界面上,也不在demo目录下,而是在build-xxx-Debug里面。其代码如下:

/********************************************************************************
** Form generated from reading UI file 'mainwindow.ui'
**
** Created by: Qt User Interface Compiler version 5.12.4
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_MAINWINDOW_H
#define UI_MAINWINDOW_H

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QLabel>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QMenuBar>
#include <QtWidgets/QStatusBar>
#include <QtWidgets/QToolBar>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE

class Ui_MainWindow
{
public:
    QWidget *centralWidget;
    QLabel *label;
    QMenuBar *menuBar;
    QToolBar *mainToolBar;
    QStatusBar *statusBar;

    void setupUi(QMainWindow *MainWindow)
    {
        if (MainWindow->objectName().isEmpty())
            MainWindow->setObjectName(QString::fromUtf8("MainWindow"));
        MainWindow->resize(400, 300);
        centralWidget = new QWidget(MainWindow);
        centralWidget->setObjectName(QString::fromUtf8("centralWidget"));
        label = new QLabel(centralWidget);
        label->setObjectName(QString::fromUtf8("label"));
        label->setGeometry(QRect(60, 60, 101, 31));
        MainWindow->setCentralWidget(centralWidget);
        menuBar = new QMenuBar(MainWindow);
        menuBar->setObjectName(QString::fromUtf8("menuBar"));
        menuBar->setGeometry(QRect(0, 0, 400, 28));
        MainWindow->setMenuBar(menuBar);
        mainToolBar = new QToolBar(MainWindow);
        mainToolBar->setObjectName(QString::fromUtf8("mainToolBar"));
        MainWindow->addToolBar(Qt::TopToolBarArea, mainToolBar);
        statusBar = new QStatusBar(MainWindow);
        statusBar->setObjectName(QString::fromUtf8("statusBar"));
        MainWindow->setStatusBar(statusBar);

        retranslateUi(MainWindow);

        QMetaObject::connectSlotsByName(MainWindow);
    } // setupUi

    void retranslateUi(QMainWindow *MainWindow)
    {
        MainWindow->setWindowTitle(QApplication::translate("MainWindow", "MainWindow", nullptr));
        label->setText(QApplication::translate("MainWindow", "Hello world", nullptr));
    } // retranslateUi

};

namespace Ui {
    class MainWindow: public Ui_MainWindow {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_MAINWINDOW_H

竟然惊奇地发现,有我们之前添加的label,而且setText设置文本为"Hello world"!

看来,就是它了!不信?可以再拉些控件进来重新编译生成,再看这个文件是否有产生相关代码。

 

二、操作xxx.ui界面文件如何转换成相应程序代码?

其实,xxx.ui文件是一个XML文件,在Qt creator双击打开就是显示窗口界面,以文本方式打开:

<?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>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>60</x>
      <y>60</y>
      <width>101</width>
      <height>31</height>
     </rect>
    </property>
    <property name="text">
     <string>Hello world</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>400</width>
     <height>28</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

可看出,全是XML语言描述的,其作用就是通过XML语言定义了窗口上的所有组件的属性设置、布局,及其信号与槽函数的关联等。当我们在界面上添加/删除控件时,其界面会被解析为相应的XML代码,所以其代码与界面是相互转换、等价的。

其实,Qt是通过一个名为“uic”的工具,将ui文件生成.h文件的(有兴趣的可以自行用命令执行)。

当我们在界面上操作控件时,查看xxx.ui文件会产生相应的代码,如我们添加的label,也出现在上面。

可通过比对“在界面上操作控件”前后代码的变化来一探究竟。

 

三、通过代码来访问ui界面文件中的控件

1、在ui界面中设置组件属性

我们可以在ui界面右下角的组件属性窗口设置组件的属性,属于图形界面设计方式,如下:

如设置label字体大小和内容在QWidget的“font”和QLabel的“text”里(如图),具体每项属性就不详细列出了。

 

2、通过代码来访问并操作组件

首先,想要代码访问,必须先知道它的标签是什么,也就是变量名是什么?

在ui界面右下角的组件属性的QObject中objectName就是了,如label的如下图,且支持修改。

同理,往界面上拖入一个按键Push Button组件,可在objectName将其修改(如改为“myButton”)。

现在回到代码中,在mainwindow.cpp中的构造函数访问label组件和button组件,设置其text内容、大小等。

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

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    /* 设置label属性 */
    ui->label->setText("Welcome Zengzr");
    ui->label->resize(300,60);

    /* 设置PushButton属性 */
    ui->myButton->setText("My Button");
}

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

编译运行,如下图:

如上,通过ui->label和ui->myButton访问,label和myButton均是objctName项的名称。

添加其他组件亦是如此道理。

 

以上举例较简单,意在梳理清楚ui界面及代码之间的联系。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章