QT入门

[擎天殿]

5.7 UI 文件管理

使用UI文件创建界面很轻松很便捷，他的原理就是每次我们保存UI文件的时候，QtCreator就自动帮我们将UI文件翻译成C++的图形界面创建代码。可以通过以下步骤查看代码

到工程编译目录，一般就是工程同级目录下会生成另一个编译目录，会找到一个带ui_前缀跟ui文件同名的.h文件，这就是代码





代码内容：



在项目MainWindow的构造函数中会调用这个函数来初始化窗口，其实这里边就是初始化我们的各个控件。

代码： 全选

    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        //如果想要使用ui里边的控件对象
        //代码必须写在setupUi之下
        //否则ui各个控件没有初始化时使用会出问题
        ui->pushButton->setText("Hello");
    }

[擎天殿]

5.8 UI 文件下使用信号和槽
5.8.1 转到槽

在UI编辑界面中使用信号和槽很方便，比如，拖出一个Button到窗口上，右键这个button，选择转到槽：



此时会出现这个控件（QPushButton）可以连接的各个信号，我们可以根据具体需求选中信号来创建一个连接这个信号的槽函数：



以click(bool)信号为例，创建了一个槽函数



这个槽函数是QtCreator自动帮我们创建的，而且也使用生成C++代码的方式帮我们做好了连接，我们可以直接在这个函数体内实现功能就行。很方便，比使用Lambda表达式还方便。

[擎天殿]

5.8.2 信号槽编辑器

可以使用动作编辑器旁边的信号槽编辑器，里边也可以添加信号和槽的连接，比如添加actionQuit的triggered信号和窗口close槽的连接：

[擎天殿]

5.9 资源文件

Qt 资源系统是一个跨平台的资源机制，用于将程序运行时所需要的资源以二进制的形式存储于可执行文件内部。如果你的程序需要加载特定的资源（图标、文本翻译等），那么，将其放置在资源文件中，就再也不需要担心这些文件的丢失。也就是说，如果你将资源以资源文件形式存储，它是会编译到可执行文件内部。

使用 Qt Creator 可以很方便地创建资源文件。我们可以在工程上点右键，选择“添加新文件…”，可以在 Qt 分类下找到“Qt 资源文件”：



点击“选择…”按钮，打开“新建 Qt 资源文件”对话框。在这里我们输入资源文件的名字和路径：



点击下一步，选择所需要的版本控制系统，然后直接选择完成。我们可以在 Qt Creator 的左侧文件列表中看到“资源文件”一项，也就是我们新创建的资源文件：



右侧的编辑区有个“添加”，我们首先需要添加前缀，比如我们将前缀取名为 images。然后选中这个前缀，继续点击添加文件，可以找到我们所需添加的文件。这里，我们选择 document-open.png 文件。当我们完成操作之后，Qt Creator 应该是这样子的：



接下来，我们还可以添加另外的前缀或者另外的文件。这取决于你的需要。当我们添加完成之后，我们可以像前面一章讲解的那样，通过使用 : 开头的路径来找到这个文件。比如，我们的前缀是 /images，文件是 document-open.png，那么就可以使用:/images/document-open.png找到这个文件。

这么做带来的一个问题是，如果以后我们要更改文件名，比如将 docuemnt-open.png 改成 docopen.png，那么，所有使用了这个名字的路径都需要修改。所以，更好的办法是，我们给这个文件去一个“别名”，以后就以这个别名来引用这个文件。具体做法是，选中这个文件，添加别名信息：



这样，我们可以直接使用:/images/doc-open引用到这个资源，无需关心图片的真实文件名。

Qrc文件只是记录了我们要用到的资源文件在项目路径哪个位置的一个信息，如果我们使用文本编辑器打开 res.qrc 文件，就会看到以下内容：

代码： 全选

    <RCC>
        	<qresource prefix="/images">
            	<file alias="doc-open">document-open.png</file>
        	</qresource>
        	<qresource prefix="/images/fr" lang="fr">
            	<file alias="doc-open">document-open-fr.png</file>
        	</qresource>
    </RCC>

当我们编译工程之后，我们可以在构建目录中找到 qrc_res.cpp 文件。



这就是 Qt 将我们的资源编译成了 C++ 代码：



可以看出Qt帮我们将资源文件内容一个字节一个字节的读出来最终放到了代码里，使用字符数组的形式保存着，所以程序启动的时候这些资源就会以数组的形式占用到程序内存里。当我们使用qt的qrc资源文件时要考虑内存占用的问题，如果Qt程序资源很多，而且并不是每次运行程序都会加载所有的资源，比如制作一个游戏，所需要的图片声音资源量很大，可能超过了机器内存大小，这时候使用qrc加载资源的方式很不合适。

可以考虑动态加载资源的方式，当切入到某个游戏场景的时候才加载场景相关的图片声音资源。Qt有提供rcc的方式动态加载资源，不过不常用，所以一般游戏资源都放在可执行文件exe所在目录或者子目录下，程序运行的时候就从游戏exe文件路径去搜寻资源。

[擎天殿]

六、QDialog 对话框
6.1 基本概念

对话框是 GUI 程序中不可或缺的组成部分。很多不能或者不适合放入主窗口的功能组件都必须放在对话框中，比如用于完成一次性任务的功能（如登录功能、选择某个文件打开、保存文件）。对话框通常会是一个顶层窗口，出现在程序最上层，用于实现短期任务或者简洁的用户交互。

Qt 中使用QDialog类实现对话框，但是声明一个QDilaog对象的时候，不管这个对话框对象跟哪个窗口建立了父子关系，当他显示出来的时候都还是一个顶层的窗口。

对话框分为模态对话框和非模态对话框。

1.模态对话框，当对话框打开时，不能操作同一个应用程序的其他窗口，只有当对话框关闭的时候才可以操作。

模态对话框很常见，比如“打开文件”功能。你可以尝试一下记事本的打开文件，当打开文件对话框出现时，我们是不能对除此对话框之外的窗口部分进行操作的。

2.此相反的是非模态对话框，例如查找对话框，我们可以在显示着查找对话框的同时，继续对记事本的内容进行编辑。

[擎天殿]

6.1.1 模态对话框

Qt 有两种级别的模态对话框：

1.应用程序级别的模态

当该种模态的对话框出现时，用户必须首先对对话框进行交互，直到关闭对话框，然后才能访问程序中其他的窗口。

使用QDialog::exec()实现应用程序级别的模态对话框

2.窗口级别的模态

该模态仅仅阻塞与对话框关联的窗口，但是依然允许用户与程序中其它窗口交互。窗口级别的模态尤其适用于多窗口模式。

使用QDialog::open()实现窗口级别的模态对话框

一般情况下我们只使用应用程序级别的模态对话框。

在下面的示例中，我们调用了exec()将对话框显示出来，因此这就是一个模态对话框。当对话框出现时，我们不能与主窗口进行任何交互，直到我们关闭了该对话框。

代码： 全选

     QDialog dialog;
        dialog.setWindowTitle(tr("Hello, dialog!"));

下面我们试着将exec()修改为show()，看看非模态对话框：

代码： 全选

     QDialog dialog(this);
        dialog.setWindowTitle(tr("Hello, dialog!"));
        dialog.show();

是不是事与愿违？对话框竟然一闪而过！这是因为，show()函数不会阻塞当前线程，对话框会显示出来，然后函数立即返回，代码继续执行。注意，dialog 是建立在栈上的，show()函数返回，MainWindow::open()函数结束，dialog 超出作用域被析构，因此对话框消失了。知道了原因就好改了，我们将 dialog 改成堆上建立，当然就没有这个问题了：

代码： 全选

    QDialog *dialog = new QDialog;
        dialog->setWindowTitle(tr("Hello, dialog!"));
        dialog->show();

如果你足够细心，应该发现上面的代码是有问题的：dialog 存在内存泄露！dialog 使用 new 在堆上分配空间，却一直没有 delete。解决方案也很简单：将 MainWindow 的指针赋给 dialog 即可。还记得我们前面说过的 Qt 的对象树吗？

不过，这样做有一个问题：如果我们的对话框不是在一个界面类中出现呢？由于QWidget的 parent 必须是QWidget指针，那就限制了我们不能将一个普通的 C++ 类指针传给 Qt 对话框。另外，如果对内存占用有严格限制的话，当我们将主窗口作为 parent 时，主窗口不关闭，对话框就不会被销毁，所以会一直占用内存。在这种情景下，我们可以设置 dialog 的WindowAttribute：

代码： 全选

    QDialog *dialog = new QDialog;
    dialog->setAttribute(Qt::WA_DeleteOnClose);
    dialog->setWindowTitle(tr("Hello, dialog!"));
    dialog->show();

setAttribute()函数设置对话框关闭时，自动销毁对话框。

[擎天殿]

6.2 标准对话框

所谓标准对话框，是 Qt 内置的一系列对话框，用于简化开发。事实上，有很多对话框都是通用的，比如打开文件、设置颜色、打印设置等。这些对话框在所有程序中几乎相同，因此没有必要在每一个程序中都自己实现这么一个对话框。

Qt 的内置对话框大致分为以下几类：

1.QMessageBox： 模态对话框，用于显示信息、询问问题等；

2.QColorDialog： 选择颜色；

3.QFontDialog： 选择字体；

4.QFileDialog： 选择文件或者目录；

5.QInputDialog： 允许用户输入一个值，并将其值返回；

6.QPageSetupDialog： 为打印机提供纸张相关的选项；

7.QPrintDialog： 打印机配置；

8.QPrintPreviewDialog：打印预览；

9.QProgressDialog： 显示操作过程。

[擎天殿]

6.3 消息对话框

QMessageBox用于显示消息提示。我们一般会使用其提供的几个 static 函数：

About

显示关于对话框。

代码： 全选

void about(QWidget * parent, const QString & title, const QString & text)

这是一个最简单的对话框，其标题是 title，内容是 text，父窗口是 parent。对话框只有一个 OK 按钮。



AboutQt

显示关于 Qt 对话框。该对话框用于显示有关 Qt 的信息。

代码： 全选

void aboutQt(QWidget * parent, const QString & title = QString());

Critical

显示严重错误对话框。

代码： 全选

    StandardButton critical(QWidget * parent, 
    const QString & title, 
    const QString & text, 
    StandardButtons buttons = Ok, 
    StandardButton defaultButton = NoButton);

这个对话框将显示一个红色的错误符号。我们可以通过 buttons 参数指明其显示的按钮。默认情况下只有一个 Ok 按钮，我们可以使用StandardButtons类型指定多种按钮。



Information

与critical类似，不同之处在于这个对话框提供一个普通信息图标。

代码： 全选

    StandardButton information(QWidget * parent, 
    const QString & title, 
    const QString & text, 
    StandardButtons buttons = Ok, 
    StandardButton defaultButton = NoButton)

Question

与QMessageBox::critical ()类似，不同之处在于这个对话框提供一个问号图标，并且其显示的按钮是“是”和“否”。

代码： 全选

    StandardButton question(QWidget * parent,
    const QString & title, 
    const QString & text, 
    StandardButtons buttons = StandardButtons( Yes | No ), 
    StandardButton defaultButton = NoButton) 

1.第一个参数是对话框的父窗口是 this。

QMessageBox是QDialog的子类，这意味着它的初始显示位置将会是在 parent 窗口的中央。

2.第二个参数是对话框的标题。

3.第三个参数是我们想要显示的内容。

4.第四个参数是关联的按键类型，我们可以使用或运算符（|）指定对话框应该出现的按钮。比如我们希望是一个 Yes 和一个 No。

5.最后一个参数指定默认选择的按钮。

这个函数有一个返回值，用于确定用户点击的是哪一个按钮。按照我们的写法，应该很容易的看出，这是一个模态对话框，因此我们可以直接获取其返回值。

我们可以通过以下代码来判断问题对话框的返回值：

代码： 全选

    if (QMessageBox::Yes == QMessageBox::question(this,
                          tr("Question"), tr("Are you OK?"),
                          QMessageBox::Yes | QMessageBox::No,
                          QMessageBox::Yes))
            {
                QMessageBox::information(this, tr("Hmmm..."),
            tr("I'm glad to hear that!"));
            }
            else
            {
                QMessageBox::information(this, tr("Hmmm..."),
            tr("I'm sorry!"));
            }

warning

与QMessageBox::critical()类似，不同之处在于这个对话框提供一个黄色叹号图标。

代码： 全选

    StandardButton warning(QWidget * parent, 
    const QString & title, 
    const QString & text, 
    StandardButtons buttons = Ok, 
    StandardButton defaultButton = NoButton)

QMessageBox类的 static 函数优点是方便使用，缺点也很明显：非常不灵活。我们只能使用简单的几种形式。为了能够定制QMessageBox细节，我们必须使用QMessageBox的属性设置 API。如果我们希望制作一个询问是否保存的对话框，我们可以使用如下的代码：

代码： 全选

    QMessageBox msgBox;
    msgBox.setText(tr("The document has been modified."));
    msgBox.setInformativeText(tr("Do you want to save your changes?"));
    msgBox.setDetailedText(tr("Differences here..."));
    msgBox.setStandardButtons(QMessageBox::Save
                              | QMessageBox::Discard
                              | QMessageBox::Cancel);
    msgBox.setDefaultButton(QMessageBox::Save);
    int ret = msgBox.exec();
    switch (ret) 
    {
    case QMessageBox::Save:
        qDebug() << "Save document!";
        break;
    case QMessageBox::Discard:
        qDebug() << "Discard changes!";
        break;
    case QMessageBox::Cancel:
        qDebug() << "Close document!";
        break;
    }

msgBox 是一个建立在栈上的QMessageBox实例。我们设置其主要文本信息为“The document has been modified.”，informativeText 则是会在对话框中显示的简单说明文字。下面我们使用了一个detailedText，也就是详细信息，当我们点击了详细信息按钮时，对话框可以自动显示更多信息。我们自己定义的对话框的按钮有三个：保存、丢弃和取消。然后我们使用了exec()是其成为一个模态对话框，根据其返回值进行相应的操作。

[擎天殿]

6.4 标准文件对话框

QFileDialog，也就是文件对话框。在本节中，我们将尝试编写一个简单的文本文件编辑器，我们将使用QFileDialog来打开一个文本文件，并将修改过的文件保存到硬盘。

首先，我们需要创建一个带有文本编辑功能的窗口。借用我们前面的程序代码，应该可以很方便地完成：

代码： 全选

    openAction = new QAction(QIcon(":/images/file-open"),tr("&Open..."), this);
    openAction->setStatusTip(tr("Open an existing file"));
    saveAction = new QAction(QIcon(":/images/file-save"), tr("&Save..."), this);
    saveAction->setStatusTip(tr("Save a new file"));
    QMenu *file = menuBar()->addMenu(tr("&File"));
    file->addAction(openAction);
    file->addAction(saveAction);
            
    QToolBar *toolBar = addToolBar(tr("&File"));
    toolBar->addAction(openAction);
    toolBar->addAction(saveAction);
            
    textEdit = new QTextEdit(this);
    setCentralWidget(textEdit);

我们在菜单和工具栏添加了两个动作：打开和保存。接下来是一个QTextEdit类，这个类用于显示富文本文件。也就是说，它不仅仅用于显示文本，还可以显示图片、表格等等。不过，我们现在只用它显示纯文本文件。QMainWindow有一个setCentralWidget()函数，可以将一个组件作为窗口的中心组件，放在窗口中央显示区。显然，在一个文本编辑器中，文本编辑区就是这个中心组件，因此我们将QTextEdit作为这种组件。

我们使用connect()函数，为这两个QAction对象添加响应的动作：

代码： 全选

     connect(openAction, &QAction::triggered, 
            this, &MainWindow::openFile);
            connect(saveAction, &QAction::triggered, 
            this, &MainWindow::saveFile);

下面是最主要的openFile()和saveFile()这两个函数的代码：

代码： 全选

    //打开文件
    void MainWindow::openFile()
    {
        QString path = QFileDialog::getOpenFileName(this,
                                                    tr("Open File"), ".", tr("Text Files(*.txt)"));
        if(!path.isEmpty()) 
        {
            QFile file(path);
            if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) 
            {
                QMessageBox::warning(this, tr("Read File"),
                                     tr("Cannot open file:\n%1").arg(path));
                return;
            }
            QTextStream in(&file);
            textEdit->setText(in.readAll());
            file.close();
        } 
        else 
        {
            QMessageBox::warning(this, tr("Path"),
                                 tr("You did not select any file."));
        }
    }
     
    //保存文件
    void MainWindow::saveFile()
    {
        QString path = QFileDialog::getSaveFileName(this,
                                                    tr("Open File"), ".", tr("Text Files(*.txt)"));
        if(!path.isEmpty()) 
        {
            QFile file(path);
            if (!file.open(QIODevice::WriteOnly | QIODevice::Text)) 
            {
                QMessageBox::warning(this, tr("Write File"),
                                     tr("Cannot open file:\n%1").arg(path));
                return;
            }
            QTextStream out(&file);
            out << textEdit->toPlainText();
            file.close();
        } 
        else 
        {
            QMessageBox::warning(this, tr("Path"),
                                 tr("You did not select any file."));
        }
    }

在openFile()函数中，我们使用QFileDialog::getOpenFileName()来获取需要打开的文件的路径。这个函数原型如下：

代码： 全选

    QString getOpenFileName(QWidget * parent = 0,
                            const QString & caption = QString(),
                            const QString & dir = QString(),
                            const QString & filter = QString(),
                            QString * selectedFilter = 0,
                            Options options = 0);

不过注意，它的所有参数都是可选的，因此在一定程度上说，这个函数也是简单的。这六个参数分别是：

1.parent：父窗口

2.caption：对话框标题

3.dir：对话框打开时的默认目录

“.” 代表程序运行目录

“/” 代表当前盘符的根目录（特指 Windows 平台；Linux 平台当然就是根目录），这个参数也可以是平台相关的，比如“C:\\”等；

4.filter：过滤器

我们使用文件对话框可以浏览很多类型的文件，但是，很多时候我们仅希望打开特定类型的文件。比如，文本编辑器希望打开文本文件，图片浏览器希望打开图片文件。过滤器就是用于过滤特定的后缀名。如果我们使用“Image Files(*.jpg *.png)”，则只能显示后缀名是 jpg 或者 png 的文件。如果需要多个过滤器，使用“;;”分割，比如“JPEG Files(*.jpg);;PNG Files(*.png)”；

5.selectedFilter：默认选择的过滤器；

6.options：对话框的一些参数设定

比如只显示文件夹等等，它的取值是enum QFileDialog::Option，每个选项可以使用 | 运算组合起来。

QFileDialog::getOpenFileName()返回值是选择的文件路径。我们将其赋值给 path。通过判断 path 是否为空，可以确定用户是否选择了某一文件。只有当用户选择了一个文件时，我们才执行下面的操作。

在saveFile()中使用的QFileDialog::getSaveFileName()也是类似的。使用这种静态函数，在 Windows、Mac OS 上面都是直接调用本地对话框，但是 Linux 上则是QFileDialog自己的模拟。这暗示了，如果你不使用这些静态函数，而是直接使用QFileDialog进行设置，那么得到的对话框很可能与系统对话框的外观不一致。这一点是需要注意的。

[擎天殿]

七、布局

所谓 GUI 界面，归根结底，就是一堆组件的叠加。我们创建一个窗口，把按钮放上面，把图标放上面，这样就成了一个界面。在放置时，组件的位置尤其重要。我们必须要指定组件放在哪里，以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件布局定位的机制。

Qt 提供了两种组件布局定位机制：静态布局和动态布局。

1.静态布局就是一种最原始的定位方法：给出这个组件的坐标和长宽值

这样，Qt 就知道该把组件放在哪里以及如何设置组件的大小。但是这样做带来的一个问题是，如果用户改变了窗口大小，比如点击最大化按钮或者使用鼠标拖动窗口边缘，采用静态布局的组件是不会有任何响应的。这也很自然，因为你并没有告诉 Qt，在窗口变化时，组件是否要更新自己以及如何更新。或者，还有更简单的方法：禁止用户改变窗口大小。但这总不是长远之计。

2.动态布局：你只要把组件放入某一种布局(layout)，布局由专门的布局管理器进行管理。当需要调整大小或者位置的时候，Qt 使用对应的布局管理器进行调整。

动态布局解决了使用静态布局的缺陷。

Qt 提供的动态布局中以下三种是我们最常用的：

1）QHBoxLayout：按照水平方向从左到右布局；

2）QVBoxLayout：按照竖直方向从上到下布局；

3）QGridLayout：在一个网格中进行布局，类似于 HTML 的 table；

7.1 系统提供的布局控件



这4个为系统给我们提供的布局的控件，但是使用起来不是非常的灵活，这里就不详细介绍了。