Qt笔记

疑惑处理

1.Qt出现卡死现象

可能是有道词典的问题

一、Qt准备工作

Qt介绍

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

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

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

1

QT的安装

下载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 中选择一个动作来撤销或重做到该动作

Item Widget

在 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

实现效果如下图所示：

2.tree widget

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项时触发关闭主窗口函数

3.table widget

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 属性，以更改边框的形状和样式

7.widget

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

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

Input widget

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();
        }
    });
}

​

VisualStuido插件

环境准备

• VisualStuido2022或2019

• Qt Creator

使用步骤

1.下载Qt插件

打开VisualStudio，点击管理扩展

选择Qt VisualStudio Tools(Qt开发插件)和Qt Vs CMake Tools(CMake插件)

插件下载完成后关闭VisualStuido，然后会弹出一个VSIX Installer框，点击Modify

2.配置插件

重新启动VisualStudio，点击Qt插件的Qt Versions，选择你安装好的Qt版本

路径填写qmake.exe的路径，例如此处我的是：E:\Qt\6.4.3\msvc2019_64\bin\qmake.exe

Qt version配置好后点击确定

3.创建Qt项目

打开VisualStudio创建一个Qt Widgets Application项目

弹出Qt项目的创建指导框，点击next

选择一个Qt配置，推荐选择Debug

Qt项目的文件结构，默认即可

例如我们要为窗口添加一个标题，修改QtWidgetsApplication文件，添加如下这行代码，然后点击运行

setWindowTitle("This is title");

使用Qt设计

上述使用代码的方式来设置窗口界面是比较麻烦的，我们可使用Qt设计来实现，点击Qt插件的Launch Qt Designer

随后会自动打开Qt Designer，点击打开

选择你之前创建的Qt项目里的ui文件

此时我们就可以在设计界面去布置窗口的控件了

Qt设计完成后记得按ctrl+s保存，然后返回VisualStudio界面运行你的窗口应用程序

Qt Designer添加的控件都可以在代码中来访问

END

​