Qt笔记

最后更新于1年前

Qt笔记

疑惑处理

1.Qt出现卡死现象

可能是有道词典的问题

一、Qt准备工作

Qt介绍

Qt 是一个跨平台的应用程序框架，广泛用于开发具有图形用户界面（GUI）的软件，同时也可以用来开发非 GUI 程序，如控制台工具和服务器。它最初由挪威的 Trolltech 公司开发，后来经过多次收购和公司变更，目前由 The Qt Company 维护

Qt 支持多种操作系统和平台，包括 Windows、macOS、Linux、iOS、Android 以及各种嵌入式设备

Qt 提供了一套丰富的 GUI 组件（如按钮、文本框、菜单等），方便开发者快速构建直观、吸引人的用户界面

QT的安装

下载，这里我选择下载Windows版本

注册qt账号(可用邮箱注册)并登录

选择qt的安装目录

安装Qt的组件，你们可以按照我这样勾选

开始安装，时间可能会比较久

安装完成后自动打开QT Creator

Qt项目创建

创建一个新项目，选择Qt Widgets Application，表示创建窗口应用程序

填写项目的名称和路径

选择构建系统，此处我选择CMake

填写类信息，Class Name表示你要创建的新类的名称，通常是你主窗口或主要对话框的类名

Base Class表示新创建的类将继承的 Qt 的基类(父类)，通常，对于一个标准的窗口应用程序，你可能会选择 QMainWindow 作为基类

QMainWindow 提供了一个典型的主窗口的框架，包括菜单栏、工具栏、状态栏等，也就是说，基类定义了您的窗口或对话框的基本功能和行为

选择翻译文件，这里我填写无

选择编译器，此处选择MingGW的gcc编译器

Qt项目创建完成

项目里有几个文件，这里我简单解释一下

CMakeLists.txt：若创建的项目是基于CMake构建系统的，项目会生成一个CMakeLists.txt 构建配置文件，它包含了项目的配置和设置，后续若要打开一个项目需通过打开它来实现
main.cpp：应用程序的入口文件，此文件通常创建一个 QApplication 对象，并创建您的主窗口类的实例
mainwindow.cpp：主窗口类的实现文件，它通常包含主窗口类的构造函数，以及该窗口的任何特定功能或逻辑，在这个类中，您可以定义窗口的行为、处理用户交互、设置窗口中的控件等
mainwindow.ui：这是一个 XML 格式的文件，用于定义主窗口的用户界面，此文件可以在 Qt Designer 中可视化编辑，允许您拖放控件（如按钮、文本框、菜单等）来设计您的界面

单机mainwindow.ui自动跳转至设计页面，左侧界面是Qt的窗口控件，按住鼠标左键可将控件拖拽至面板上。例如此处我拖拽过去了一个按钮和文本框，按ctrl + s保存，随后点击左下角的绿三角运行窗口程序

如下是窗口程序运行后的界面

可能遇到的问题

1.Qt Creator运行卡死

Qt Creator运行时不要打开有道词典，否则容易出现卡死情况

二、Qt控件

布局控件(layout)

介绍

Qt 提供了多种布局管理器来帮助开发者有效地组织窗口中的小部件（widgets），分别有垂直布局(vertical layout)、水平布局(horizontal layout)、网格布局(grid layout)和表格布局(form layout)

水平布局（QHBoxLayout）：
- 将小部件水平排列。
- 小部件按添加的顺序从左到右排列。
垂直布局（QVBoxLayout）：
- 将小部件垂直排列。
- 小部件按添加的顺序从上到下排列。
网格布局（QGridLayout）：
- 将小部件排列在网格中。
- 开发者可以指定小部件占用网格中的哪一行和哪一列，以及跨越多少行和列。
- 这种布局非常灵活，适用于复杂的界面布局。
表单布局（QFormLayout）：
- 专门用于表单类界面，将小部件排列成两列。
- 通常左列是标签（如 "姓名："），右列是相应的输入字段。
- 这种布局特别适合需要收集用户输入的界面。

操作演示

首先我们来测试下垂直布局，先将一个垂直布局拖拽至页面，再将四个按钮拖拽至垂直布局里面，随后这四个按钮会以垂直布局的方式进行排列

那么如何将这些按钮从垂直布局中分离出来呢？你可以依次鼠标左键选择这些按钮并拖拽至垂直布局之外的地方

又或者按住ctrl键勾选全部按钮，然后一次性拖拽出去

如下是网格布局的演示，当你将一个控件移动至网格布局的左右两侧时(会出现蓝边提示)，它会自动添加一列，移动至上下两侧时会自动添加一行

间隔控件(spacer)

介绍

在 Qt 中，Spacers（间隔器）是一种特殊的控件，用于在布局中创建额外的空间，帮助控制小部件（widgets）之间的间距和位置。Spacers 不显示任何可视化元素，它们纯粹用于调整布局，主要类型的 Spacers 包括：

水平间隔器（Horizontal Spacer）：用于在水平布局中添加空间。可以使布局中的小部件彼此分开，或者推动小部件靠向布局的一侧
垂直间隔器（Vertical Spacer）：用于在垂直布局中添加空间。似于水平间隔器，但用于在垂直方向上创建间隔

操作演示

如下图所示，有四个按钮控件，当我们放大窗口时，按钮之间的间隔并没有随之调整，而是保持之前的间隔。那么如何才能让按钮的位置随着窗口调整而变化呢，这就要依赖间隔控件和总体栅格布局

当我们在上下两个按钮控件之间添加一个垂直间隔控件时，然后勾选它们并布置垂直布局，随后两个按钮控件就会以垂直间隔的距离互相靠拢，这就是间隔控件的作用

再添加两个水平间隔，然后勾选所有控件并布置水平布局，然后点击面板空白处布置栅格布局

运行窗口应用程序后，当你调整窗口大小时，按钮的位置也会随之调整

按钮控件(button)

信号/槽

Qt中的信号和槽机制是一种强大的事件通信系统，用于对象间的通信

信号是由QObject或其子类发出的消息，用于指示发生了某种事件或状态变化。例如QPushButton有一个 clicked() 信号，当按钮被点击时发出

信号是 Qt 对象发出的，但它们本身不执行任何操作。相反，信号需要连接到一个或多个槽上，才能触发实际的动作

槽是一个函数，当它与某个信号相连接时，该信号被发出时会调用这个函数。

信号与槽的连接：通过调用 QObject::connect() 函数，可以将信号和槽连接起来。当发出信号时，将调用与之相连的槽

**使用案列：**当用户点击按钮时，发出按钮的 clicked() 信号，此信号与某个槽函数（比如自定义的 onButtonClicked() 函数）连接，随后槽函数被调用

1.push button

这是最常见的按钮类型，用于执行命令或触发事件。可以包含文本、图像或两者的组合。可以配置为可点击、不可点击（禁用状态）和默认按钮（在窗体中按回车时触发）

点击上方工具栏的信号/槽，随后鼠标左键按住按钮控件不放，往窗口空白处滑去，以此表示指定主窗口的槽。随后弹出配置连接的窗口，勾选上显示从QWidget基础的信号和槽，pushButton选择clicked信号，主窗口选择close函数，这样表示当此按钮被点击时，主窗口就会关闭

2.tool button

QToolButton 通常显示一个图标而不是文本(尽管它也可以显示文本)，因此常用于工具栏中。它提供了多种显示模式，比如ToolButtonIconOnly（仅图标）、ToolButtonTextOnly（仅文本）、ToolButtonTextBesideIcon（文本在图标旁边）等

QToolButton 可以与下拉菜单关联，当用户点击按钮时，菜单会显示出来

在左下角的属性栏可以设置按钮的图标以及按钮风格，例如此处我设置的按钮风格是仅显示图标

3.radio button

radio button通常称为单选框按钮，用于在一组选项中选择一个选项，当一个单选按钮被选中时，与它在同一组的其他单选按钮会自动变为未选中状态

radio button 发出 toggled() 信号来通知其选中状态的变化。

你可以将单选框按钮归为一个组，这主要通过将它们放置在同一个父容器内来完成，如QWidget、QGroupBox或QFrame来实现，在同一个父容器内的所有单选按钮自动形成一个互斥的组

如下图所示，将单选框按钮的checked属性修改为真，则表示此按钮默认是勾选状态，再拉一个GroupBox组件，将左边的两个单选框按钮归入此组件中，右边的单选框按钮则单独放在一边

效果如下图所示，左边两个单选框按钮由于归为一组了，所以会产生互斥效果

4.check button

CheckBox用于通常有两种状态（选中和未选中），它是实现多选功能的常见方式。此外其还支持第三种状态，即部分选中，这在某些场景中用于表示多个相关选项的混合状态

QCheckBox发出 stateChanged()信号来通知其状态的变化。这使得程序可以响应用户的选择，还有toggled(bool)` 信号，当CheckBox的选中状态发生变化时触发

5.commandLinkButton

QCommandLinkButton 适合于需要向用户提供明确、易理解的操作选择的场景，它常见于设置对话框、安装程序或任何需要指导用户作出决策的界面，可显示图标和文字

6.dialog button box

QDialogButtonBox 用于在对话框中创建标准化的按钮组，这个控件提供了一种简便的方式来添加标准的按钮，如“确定”、“取消”、“应用”等

可在右侧属性栏界面找到standardButtons属性，根据你自己的需求选择多个按钮，并设置其布局方式

视图控件(item view)

Qt 的 Item Views 是一组强大的控件，用于展示和处理数据集合。这些控件提供了丰富的接口来显示、编辑和排序不同类型的数据项。主要的 Item Views 控件包括 QListView、QTreeView、QTableView 和 QColumnView等

1.ListView

QListView 是一种用于展示一个项列表的控件,可以垂直或水平地显示项，并支持多种选择模式

在Qt Designer中，QlistView本身不支持直接添加数据的功能，它仅负责显示数据，而数据实际上是存储在一个独立的模型中，我们需要在代码中去设置这个模型，然后将数据添加到这个模型中

在Qt Designer中，将 QListView 控件拖拽到你的窗口或对话框中，并设置其对象名称

在代码中，创建一个适合你数据的模型，例如QStringListModel 用于显示字符串列表，然后将数据添加至模型，并将模型与QListView 控件关联，代码如下所示：

QStringList 是 Qt 框架中的一个类，它基本上是 QString 对象的列表，即一个包含字符串的容器

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <QStringListModel>
#include <QListView>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 创建一个字符串列表模型
    QStringListModel *model = new QStringListModel(this);
    
    // 添加数据至模型
    QStringList list;
    list << "数据项 1" << "数据项 2" << "数据项 3";
    model->setStringList(list);
    
    // 将模型关联到ListView控件
    ui->listView->setModel(model);

}

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

效果如下图所示：

2.TreeView

QTreeView用于以树状结构展示数据，每个节点可以展开或折叠来显示或隐藏其子节点，非常适合展示具有层级关系的数据，例如文件系统的目录结构

在Qt Designer界面上拖拽一个Tree View控件，代码编写如下所示，用于显示文件目录里的文件

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <QFileSystemModel>
#include <QDir>

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

    // 创建一个文件系统模型
    QFileSystemModel *model = new QFileSystemModel;

    // 设置文件系统模型的根路径,意味着模型将从这个路径开始展示文件系统的内容
    model->setRootPath(QDir::currentPath());

    // 将模型关联到treeView控件
    ui->treeView->setModel(model);

    // 设置数视图的根索引,根索决定了试图显示的数据的起始点,这里将根索引设置为当前工作目录在模型中的索引
    ui->treeView->setRootIndex(model->index(QDir::currentPath()));

}

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

效果如下图所示：

3.TableView

QTableView用于以表格的形式展示数据

在以下示例中，我们首先在 Qt Designer 中添加了 QTableView 控件，然后在代码中创建了一个具有5行3列的QStandardItemModel模型（QStandardItemModel是一种通用数据模型，每个数据项都是一个 QStandardItem 对象，特别适用于树状结构或表格形式的数据）

随后循环遍历模型的每一行和列，并使用model->setItem将新创建的项设置到模型的对应位置

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <QDir>
#include <QStandardItemModel>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 创建一个标准数据模型
    QStandardItemModel *model = new QStandardItemModel(5,3);
    
    // 填充数据
    for(int row = 0;row <5; ++row){
        for (int column = 0; column < 3; ++column) {
            QStandardItem *item = new QStandardItem(QString("行%1, 列%2").arg(row).arg(column));
            model->setItem(row,column,item);
        }
    }
    
    // 将模型与tableview控件关联
    ui->tableView->setModel(model);

}

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

效果如下图所示：

4.ColumnView

QColumnView以多列的形式展示层次化的数据，选择一个列中的项会在旁边的列中显示相关的子项

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <QStandardItemModel>

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

    // 创建一个标准项模型
    QStandardItemModel *model = new QStandardItemModel;

    // 获取模型的根项
    QStandardItem *rootItem = model->invisibleRootItem();

    // 创建一个新的标准项并作为子项添加到根项
    QStandardItem *item1 = new QStandardItem("item1");
    rootItem->appendRow(item1);

    // 为item1添加一个子项
    QStandardItem *childItem = new QStandardItem("childItem");
    item1->appendRow(childItem);

    // columnView关联模型
    ui->columnView->setModel(model);
}

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

效果如下图所示，当点击item1时，左列就会显示其子项childItem

5.Undo View

QUndoView 适用于需要提供复杂撤销/重做功能的应用程序，用于显示和交互 QUndoStack 的内容，QUndoStack 是用于实现撤销/重做功能的类。

QUndoView 显示 QUndoStack 中的所有动作（命令），每个动作作为列表中的一个项，用户可以直接从 QUndoView 中选择一个动作来撤销或重做到该动作

在 Qt 中，"Item Widget" 是指可以放置在某些列表或表格视图中的小部件

如 QListWidget、QTableWidget 和 QTreeWidget，它们允许您直接在每个项中添加小部件，而无需处理复杂的模型-视图架构

1.list widgets

listWidget主要用于显示文本列表项，你可以在代码实现为列表添加项目

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <QStandardItemModel>

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

    ui->listWidget->addItem("henry");
    ui->listWidget->addItem("tom");
    ui->listWidget->addItem("helen");
    ui->listWidget->addItem("karl");

}

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

或者在设计界面鼠标右键编辑list widget控件来实现添加项目

若你实现点击列表的某个指定项目时能调用槽函数, 你可以参考以下代码

在此代码中，当任何列表被点击时，onListItemClicked槽函数就会被调用，然后槽函数会检查被点击的项是否有文本"henry"，如果有，就调用this->close() 来关闭主窗口

#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include <QStandardItemModel>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 连接信号与槽
    connect(ui->listWidget, &QListWidget::itemClicked,this,&MainWindow::onListItemClicked);

}

// 槽函数的实现
void MainWindow::onListItemClicked(QListWidgetItem *item){

    if(item->text() == "henry"){
        this->close();
    }

}

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

此外你还需在头文件声明槽函数， private slots: 部分是声明槽函数的地方

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QListWidgetItem>

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private slots:
    void onListItemClicked(QListWidgetItem *item);


private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

实现效果如下图所示：

QTreeWidget 是 Qt 中用于展示和编辑树形结构数据的控件，用于显示具有层次关系的数据，如目录结构、分类列表等，其使用 QTreeWidgetItem 对象来管理和显示数据，每个 QTreeWidgetItem 可以包含文本、图标、复选框等元素

在设计页面鼠标右键tree widget控件可对其进行编辑，比如添加子项目或同级项目

在下述代码中，QTreeWidget 的 itemClicked 信号有两个参数：一个 QTreeWidgetItem*（表示被点击的项）和一个 int（表示被点击项的列号）。当用户点击树中的某个项时，itemClicked 信号被发出，同时这两个参数被传递给所有连接到这个信号的槽函数。

Qt 中信号与槽机制中传递参数的工作原理：当你使用 connect 函数连接一个信号到槽时，Qt 的事件系统自动处理参数的传递。当信号被触发时，任何与之相连接的槽函数都会被调用，并且信号的参数会被传递给这些槽函数

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


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

    // 连接信号与槽
    connect(ui->treeWidget,&QTreeWidget::itemClicked,this,&MainWindow::onTreeItemClicked);
    
}

// 槽函数的定义
void MainWindow::onTreeItemClicked(QTreeWidgetItem *item, int column){

    if(item->text(column) == "home"){
        this->close();
    }

效果如下图所示，当点击home项时触发关闭主窗口函数

QTableWidget 适合用于简单的表格数据展示和操作，使用 QTableWidgetItem 来表示表中的每个单元格，可在每个单元格中放置文本、图标等，并提供了多种信号，如单元格点击、数据更改等，您可以将这些信号连接到相应的槽函数进行处理

与其他widget一样，在ui设计界面可以对其进行编辑（添加行列和项目）

Containers

1.group box

QGroupBox 用于将相关的控件分组，通常伴随有一个标题，可包含多个控件，如按钮、文本框、标签等，它们在视觉上作为一个组显示

在Qt designer中，想group box添加所需的控件，比如pushbotton、checkbox等等，然后设置布局以及为分组添加标题

2.scroll area

QScrollArea 用于在有限的空间内展示大量内容，当内容超过显示区域时，它能提供垂直或水平的滚动条来浏览这些内容

3.tool box

QToolBox提供了一个分页的容器，每一页都可以包括不同的控件，这类似于一些软件中的工具箱或选项卡界面，用户可以点击不同的标签来切换到不同的页面

例如下图所示，tool box有两个页并分别放置了不同的按钮

4.Tab Box

在 Qt 中，QTabWidget 是一种常用的控件，它提供了一个带有多个选项卡（Tab）的界面，每个选项卡对应一个页面（Page），可以包含各种其他控件。用户可以通过点击不同的选项卡来切换显示不同的页面

5.stacked box

QStackedWidget提供了一个堆叠的页面布局，其中每个页面都是一个 QWidget，但一次只有一个页面可见，适合于需要在多个页面间进行切换的情况，例如安装向导、多步骤表单或具有多个不同视图的应用程序

QStackedWidget默认会有一个页面，可以通过右键点击 QStackedWidget 并选择“插入页”来增加更多页面

在运行时，可以通过调用 QStackedWidget 的 setCurrentIndex方法来切换当前显示的页面，在属性栏可以看到页面序号

如下代码所示，实现点击指定按钮来切换指定页面

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    // 设置stackedWidget的第一页为默认页
    ui->stackedWidget->setCurrentIndex(0);
    
    // 点击按钮切换页面
    connect(ui->pushButton,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(0);

    });

    connect(ui->pushButton_2,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(1);

    });

}

效果如下图所示：

6.frame

QFrame用于显示一个矩形框架，可以包含其他控件，通常用于视觉上区分界面的不同部分，或者仅作为一种视觉装饰

在属性编辑器中，可以设置 QFrame 的 frameShape 和 frameShadow 属性，以更改边框的形状和样式

QWidget 在 Qt 中是所有用户界面元素的基础类。它作为一个通用容器，可以单独使用或作为包含其他控件（如按钮、文本框等）的容器

在 Qt Designer 中，QWidget 可以直接用作容器，支持拖放控件并应用布局

combo box

QComboBox提供了一个下拉列表，允许用户从一组预定义的选项中选择一个

如需要响应用户的选择，可以将QComboBox的currentIndexChanged信号连接到槽函数，如下代码所示，当用户选择下拉框的项目“1”时，则关闭主窗口

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

    connect(ui->comboBox,&QComboBox::currentIndexChanged,[=](int index){
        if(ui->comboBox->itemText(index) == "1"){
            this->close();
        }
    });
}