QtQt入门


备注

正如官方文档所述,Qt是一个面向桌面,嵌入式和移动的跨平台应用程序开发框架。支持的平台包括Linux,OS X,Windows,VxWorks,QNX,Android,iOS,BlackBerry,Sailfish OS等。

本节概述了Qt是什么,以及开发人员可能想要使用它的原因。

它还应该提到Qt中的任何大型主题,并链接到相关主题。由于qt的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

发布日期
Qt 3.0 2001-10-16
Qt 3.3 2004-02-05
Qt 4.1 2005-12-20
Qt 4.8 2011-12-15
Qt 5.0 2012年12月19日
Qt 5.6 2016年3月16日
Qt 5.7 2016年6月16日
Qt 5.8 2017年1月23日
Qt 5.9 2017年5月31日

QtCreator和QtDesigner的基本应用程序

QtCreator目前是创建Qt应用程序的最佳工具。在这个例子中,我们将看到如何创建一个管理按钮和编写文本的简单Qt应用程序。

要创建新应用程序,请单击文件 - >新文件或项目:

在此处输入图像描述

然后选择Projects-> Application-> Qt Widgets Application

在此处输入图像描述

然后,您可以选择项目的名称和路径:

在此处输入图像描述

接下来,您可以选择要使用的套件。如果您没有任何套件,QtCreator将使用您的Qt版本和您计算机的主编译器创建一个套件。如果您没有任何编译器,则可以安装一个。在Windows上:安装Visual Studio。在Linux / Mac上:安装g ++或clang ++。

在此处输入图像描述

然后,您可以选择主窗口类的名称,继承的类,与主窗口类对应的文件的名称。如果您正在学习或测试Qt,您实际上并不需要更改它们。

在此处输入图像描述

最后一步可以是选择该项目的子项目并添加版本控制,如git和svn。如果它仅用于测试,则不需要更改它们。

在此处输入图像描述

然后单击“完成”按钮。现在你应该在这里:

在此处输入图像描述

这是您的应用程序的基础。如果现在通过单击Build-> Run或ctrl + R(默认情况下)运行它,您将看到一个空窗口。

现在我们将添加一个文本和一个按钮。要做到这一点,我们将使用Qt Designer。双击mainwindow.ui所以现在你应该看到:(如果没有,你会看到一些xml文件,点击左边的Design按钮)

在此处输入图像描述

在这里Qt设计师!看起来很复杂。但是一旦你习惯它,它真的很棒。我们将添加一些文本和一个按钮。在左侧,有项目列表。您可以单击一个并拖放对象。单击“按钮”并将其放在窗口中。然后搜索Label,并执行相同的操作(左上角有一个过滤器,您可以在其中编写您要查找的对象)。

你现在应该有类似的东西:

在此处输入图像描述

通过双击对象,您可以更改它们上的文本。或者,您可以在右下角看到您现在所在对象的属性,并找到text属性。您还可以在此处更改名称。

现在,如果您保存并运行(更好地单击编辑按钮然后再次保存以确保您的修改已保存),您将得到:

在此处输入图像描述

咦?为什么我的标签和按钮就像我跑的那样?这是因为我们的中心对象没有布局。顺便说一句,如果您调整主窗口的大小,您可以看到对象保持其位置。所以为了解决它,我们将添加一个布局。让我们说一个垂直布局。因此,从左侧的对象列表中拖放垂直布局。现在您应该看到:

在此处输入图像描述

浮动布局。

所以现在右键单击主窗口,除了标签和按钮之外的任何地方。 c \单击“布局” - >“垂直布局”。现在您应该看到您的对象在窗口中垂直对齐。所以现在在布局中移动(再次拖放)你的标签和按钮。现在你应该得到:

在此处输入图像描述

在你的设计师。如果你运行你的应用程序:

在此处输入图像描述

在这里,您可以使用标签和按钮查看您的应用程序。如果您调整窗口大小,标签和按钮也会调整大小。

但我们的按钮仍然无效。我们可以用两种不同的方式改变它。第一种是使用我们创建的方法连接按钮。我们可以使用方法名称connect来完成。那么让我们回到我们的代码并转到mainwindow.cpp现在添加:

connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
 

在你的MainWindow的构造函数之后的ui->setupUI(this); 初始化ui。

然后我们可以在.cpp类中创建MainWindow :: whenButtonIsClicked(),它可以改变标签的文本:

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}
 

在我们的mainwindow.h中,我们需要添加:

public slots:
    void whenButtonIsClicked();
 

公共时隙意味着可以在接收到信号时调用此方法。当我们点击按钮和一个方法来连接链接信号。

所以现在如果我们运行我们的应用程序并单击按钮,我们得到:

在此处输入图像描述

这意味着我们的连接正在运行。但是使用Qt Designer,我们有一种更简单的方法。如果你想做另一种方式,删除连接以取消连接按钮(因为我们将以不同方式连接它),返回mainwindow.ui并右键单击按钮。单击Go to slot ...,选择clicked()并按ok。

在此处输入图像描述

然后你应该转移到这个功能:

void MainWindow::on_pushButton_clicked()
{
}
 

这是单击按钮时将调用的函数。所以你可以添加

ui->label->setText("it's even easier !");
 

进去。转到mainwindow.h保存更改(当你转到插槽时,它会创建一个与你要求的信号相关联的方法。它在.h中定义函数但是不保存它。所以你应该去到文件并保存)。

现在,当您运行应用程序并按下按钮时,您可以看到新消息(如果您仍然看到旧消息,则表明您没有删除连接)。

在此处输入图像描述

我们还可以在我们的标签中添加一个int,double等,这要归功于QVariant ,这是一个很棒的类,它可以在很多其他东西中转换很多东西。所以左边添加一个int,当我们按下按钮时会增加。

那么.h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void whenButtonIsClicked();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow  *ui;
    double          _smallCounter;
};

#endif // MAINWINDOW_H
 

.cpp:

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

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
    _smallCounter = 0.0f;
}

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

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

void MainWindow::on_pushButton_clicked()
{
    _smallCounter += 0.5f;
    ui->label->setText("it's even easier ! " + QVariant(_smallCounter).toString());
}
 

现在,我们可以再次保存并运行。每次单击按钮,它都会显示“它更容易!”,其值为_smallCounter。所以你应该有类似的东西:

在此处输入图像描述

本教程已完成。如果您想了解有关Qt的更多信息,让我们在StackOverflow文档Qt文档中查看Qt的其他示例和文档。

你好,世界

在此示例中,我们只需在桌面上的窗口框架中创建并显示按钮。按钮将标有Hello world! 标签Hello world!

这代表了最简单的Qt程序。

首先,我们需要一个项目文件:

helloworld.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp
 
  • QT用于指示此项目中正在使用的库(Qt模块)。由于我们的第一个应用程序是一个小型GUI,我们需要QtCore和QtGui。由于Qt5将QtWidgets与QtGui分开,我们需要添加greaterThan 行以便用Qt5编译它。
  • TARGET是应用程序或库的名称。
  • TEMPLATE描述了要构建的类型。它可以是应用程序(app),库(lib)或简单的子目录(子目录)。
  • SOURCES是构建项目时要使用的源代码文件列表。

我们还需要包含Qt应用程序的main.cpp:

main.cpp中

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton button ("Hello world!");
    button.show();

    return a.exec(); // .exec starts QApplication and related GUI, this line starts 'event loop'    
}
 
  • QApplication对象。此对象管理应用程序范围的资源,并且是运行具有GUI的任何Qt程序所必需的。它需要argv和args,因为Qt接受一些命令行参数。调用a.exec() ,会启动Qt事件循环。
  • QPushButton对象。带有标签Hello world! 按钮Hello world! 。下一行button.show() 在其自己的窗口框架中显示屏幕上的按钮。

最后,要运行该应用程序,请打开命令提示符,然后输入您拥有该程序的.cpp文件的目录。键入以下shell命令以生成程序。

qmake -project
qmake
make
 

在Windows和Linux上安装和设置

下载Qt for Linux开源版本

转到https://www.qt.io/download-open-source/并单击立即下载,确保您正在下载适用于Linux的Qt安装程序。

Qt Linux开源下载页面

将下载名为qt-unified-linux-x-online.run的文件,然后添加exec权限

chmod +x qt-unified-linux-x-online.run
 

请记住为安装程序的实际版本更改“x”。然后运行安装程序

./qt-unified-linux-x-online.run
 

下载Qt for Windows开源版本

转到https://www.qt.io/download-open-source/ 。以下屏幕截图显示了Windows上的下载页面:

Qt Windows开源下载页面

你现在应该做什么取决于你将使用哪个IDE。如果您要使用安装程序中包含的Qt Creator,只需单击立即下载并运行可执行文件。

如果您要在Visual Studio中使用Qt,通常“立即下载”按钮也应该起作用。确保下载的文件名为qt-opensource-windows-x86-msvc2015_64-xxxexe或qt-opensource-windows-x86-msvc2015_32-xxxexe(其中xxx是Qt的版本,例如5.7.0)。如果不是这种情况,请单击“查看所有下载”,然后在“Windows主机”下选择前四个选项之一。

如果您要在Code :: Blocks中使用Qt,请单击View All Downloads并在Windows Host下选择Qt xxx for Windows 32-bit(MinGW xxx,1.2 GB)。

下载相应的安装程序文件后,运行可执行文件并按照以下说明操作。请注意,您需要成为管理员才能安装Qt。如果您不是管理员,可以在此处找到几种替代解决方案。

在任何操作系统中安装Qt

一旦下载了Qt并打开了安装程序,所有操作系统的安装过程都是相同的,尽管屏幕截图可能看起来有点不同。这里提供的屏幕截图来自Linux。

使用现有Qt帐户登录或创建新帐户:

Qt安装程序

选择安装Qt库和工具的路径

安装路径

选择库版本和所需的功能

Qt特征

下载并完成安装后,转到Qt安装目录并启动Qt Creator或直接从命令行运行它。

在此处输入图像描述