教程：Qt Widgets应用程序

本教程说明如何使用Qt VS工具创建一个Qt Widgets应用程序。您将使用项目向导创建项目，并使用Qt Designer设计基于小部件的UI。

开始之前

在开始之前，您必须

创建Qt Widgets应用程序项目

在Visual Studio中创建Qt Widgets应用程序项目

转到文件 > 新建 > 项目。
搜索 Qt Widgets应用程序。
选择项目向导，然后选择 下一步。
在 项目名称 中输入 AddressBook，然后选择确定。
要确认欢迎对话框，请选择 下一步。
设置调试构建配置并选择要包含在项目中的模块
默认情况下已选择在小部件应用程序项目中通常需要的模块。
选择 启用PCH支持 以使用预编译的头文件。
选择 下一步 以继续到创建类页面
在基类中，输入 QWidget 作为基类类型。
选择 小写文件名 以在生成文件的名称中仅使用小写字母。
选择 添加默认应用程序图标 以使用应用程序的默认图标。
选择完成以创建项目。

现在您有一个小型的可工作Qt应用程序。转到构建 > 构建解决方案 以构建它，然后转到调试 > 不调试启动（或按 Ctrl+F5）以运行它。目前，结果是空窗口。

设计主窗口

使用Qt Designer设计应用程序的主窗口，其中包含一些小部件被放置在布局中

AddressBook's main dialog

默认情况下，Qt Designer在Visual Studio中打开。要将其作为独立应用程序打开，请选择分离。

有关使用Qt Designer的更多信息，请参阅Qt Designer手册。

添加小部件

要添加UI中的小部件并为它们设置属性

在Visual Studio的 解决方案资源管理器 中，双击 addressbook.ui 文件，将它打开在Qt Designer中。
在 Qt Designer 的 控件盒 中，选择 列表控件 并将其拖到表单中以添加一个 QListWidget。
在 属性编辑器 中，将 对象名称 属性设置为 addressList。
将两个 推按钮 控件拖到表单的右上角，以添加 QPushButton 对象用于添加和删除按钮。
将按钮名称设置为 addButton 和 deleteButton，并将文本属性值设置为添加和删除。
将两个标签控件拖到表单中，以添加 QLabel 对象用于显示列表中的选定项。
将第一个标签重命名为 nameLabel，并更改其文本属性为 <未选择项>。
将第二个标签重命名为 emailLabel，并保留其文本属性为空。

将控件定位如图所示。为了正确定位控件并使表单大小改变时控件自动调整大小，需要将布局添加到表单中。

将控件添加到布局中

需要为按钮添加纵向布局以及一个空格控件以将按钮推到布局的顶部。此外，还需要第二个布局来管理其他控件以及按钮布局的定位。

为布局添加控件

将一个 垂直空格 项目拖到表单上以添加一个空格。
选择按钮和空格控件，然后选择表单 > 垂直排列 以添加一个垂直布局 (QVBoxLayout)。
选择列表控件、两个标签和按钮布局，然后选择表单 > 网格排列 以添加一个网格布局 (QGridLayout)。

注意：请确保标签的宽度几乎与表单相同。否则，网格布局将使它们的宽度仅与地址列表相同。
选择表单 > 预览以预览表单而无需编译。
转到文件 > 保存以保存表单。

构建并运行应用程序以检查主窗口。

添加对话框

现在主窗口已经就绪，接下来为应用程序添加功能。为了在用户点击添加按钮时打开对话框，必须创建一个 添加地址 对话框，并从连接到添加按钮的一个槽中调用该对话框。

使用 Visual Studio 中的 Qt 文件向导创建一个包含确定和取消按钮的 UI 表单，这些按钮连接到 QDialog::accept() 和 QDialog::reject() 槽，分别。使用 Qt Designer 向表单添加其他控件。

创建对话框

将对话框添加到项目

在 Visual Studio 中，转到项目 > 添加新项 > 已安装 > Visual C++ > Qt > Qt 小部件类。
要确认欢迎对话框，请选择 下一步。
在名称中输入 AddDialog。
在基类中输入 QDialog 作为基类类型。
选择 多重继承 单选按钮。
选择 小写文件名 以在生成文件的名称中仅使用小写字母。
选择完成以创建对话框的源、头和 UI 文件。

设计对话框

Add Address Dialog

为设计对话框

在 Visual Studio 的 解决方案资源管理器 中，双击一个 adddialog.ui 文件以在 Qt Designer 中打开它。
在 Qt Designer 中，将 添加地址 设置为 windowTitle。
在表单中添加一个标签，并将其 objectName 属性设置为 nameText，text 属性设置为 Name:。
添加另一个标签，并将其 objectName 属性设置为 emailText，text 属性设置为 Email:。
添加一个 行编辑（QLineEdit），并将其 objectName 属性设置为 nameEdit。将 text 属性留空。
添加另一个 行编辑，并将其 objectName 属性设置为 emailEdit。将 text 属性留空。
选择标签和行编辑，然后转到表单 > 在网格中布局 以添加网格布局。
添加一个 推按钮，并将其 objectName 属性设置为 okButton，text 属性设置为 OK。
在按钮左侧添加一个水平间距。
为间距和按钮添加一个水平布局。
在标签和按钮之间添加一个垂直间距。
为标签和间距添加一个垂直布局。
为两个布局添加一个网格布局。
转到表单 > 预览以预览您的表单，而无需编译。
转到文件 > 保存以保存表单。

连接到对话框的 OK 按钮

要使 OK 按钮调用 QDialog::accept() 槽，点击 编辑信号/槽 工具栏按钮以进入 Qt Designer 的信号和槽编辑模式。

点击 OK 按钮，将鼠标光标拖到表单的空白区域，然后释放鼠标按钮。在 配置连接 对话框中，将按钮的 QPushButton::clicked() 信号连接到表单的 QDialog::accept() 槽。

从主窗口打开对话框

为了在用户在主窗口中选择添加时调用对话框，您必须向 AddressBook 类添加一个槽，并从此槽调用 AddDialog。

使用 Qt Designer 创建的表单调用 QMetaObject::connectSlotsByName() 以建立表单子小部件发出的信号和遵循 on_<sender>_<signal>() 命名约定的槽之间的连接。为了使应用程序在用户点击添加按钮时做出适当反应，您必须实现一个名为 on_addButton_clicked() 的槽。

要实现该槽，请在 Visual Studio 中打开 addressbook.h 文件，并添加对槽的声明。

private slots:
    void on_addButton_clicked();

然后打开 addressbook.cpp 文件，并添加对槽的定义

void AddressBook::on_addButton_clicked()
{
    AddDialog dialog(this);
    dialog.exec();
}

要连接到其他一些信号，您必须将信号添加到 AddressBook 类中。这需要编辑头文件 addressbook.h 和实现文件 addressbook.cpp。

将 adddialog.h 包含到 addressbook.cpp 中

#include "adddialog.h"

要测试您的更改，构建并运行应用程序。选择添加按钮，打开 添加地址 对话框，然后选择 OK 以关闭它。

当用户选择 OK 时，应将一个项目添加到 QListWidget 中。要实现此功能，请按以下方式更改 on_addButton_clicked() 槽中的代码

    AddDialog dialog(this);

    if (dialog.exec()) {
        QString name = dialog.nameEdit->text();
        QString email = dialog.emailEdit->text();

        if (!name.isEmpty() && !email.isEmpty()) {
            QListWidgetItem *item = new QListWidgetItem(name, ui.addressList);
            item->setData(Qt::UserRole, email);
            ui.addressList->setCurrentItem(item);
        }
    }

对话框已执行。如果用户通过选择确定来接受它，则提取名称和邮箱字段，并创建一个包含指定信息的QListWidgetItem。

显示所选项

当用户在列表窗口中选择一个项来更新表单底部的nameLabel和emailLabel时，向AddressBook类中添加另一个槽。

在addressbook.h文件中，在类的private slots部分添加以下代码

    void on_addressList_currentItemChanged();

然后，将以下代码块添加到addressbook.cpp

void AddressBook::on_addressList_currentItemChanged()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        ui.nameLabel->setText("Name: " + curItem->text());
        ui.emailLabel->setText("Email: " + curItem->data(Qt::UserRole).toString());
    } else {
        ui.nameLabel->setText("<No item selected>");
        ui.emailLabel->clear();
    }
}

命名约定使此槽能够自动连接到addressList的QListWidget::currentItemChanged()信号并随时调用所选列表项发生变化时。

添加删除按钮的功能

要实现删除按钮的槽，请打开Visual Studio中的addressbook.h文件并添加on_deleteButton_clicked()槽的声明。然后打开addressbook.cpp并添加on_deleteButton_clicked()的槽定义。

在槽的主体中编写以下代码

void AddressBook::on_deleteButton_clicked()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        int row = ui.addressList->row(curItem);
        ui.addressList->takeItem(row);
        delete curItem;

        if (ui.addressList->count() > 0)
            ui.addressList->setCurrentRow(0);
        else
            on_addressList_currentItemChanged();
    }
}

您的应用程序现已完成。

另请参阅教程：Qt Quick应用。

教程教程：Qt Quick应用

教程：Qt Widgets应用程序

开始之前

创建Qt Widgets应用程序项目

设计主窗口

添加小部件

将控件添加到布局中

添加对话框

创建对话框

设计对话框

连接到对话框的 OK 按钮

从主窗口打开对话框

向列表小部件添加元素

显示所选项

添加删除按钮的功能