《QT Creator快速入门》第二章：Hello world

1、新建一个Qt GUI应用，并且使Qt自动为我们实现这个GUI应用：菜单栏->新建文件或项目->应用程序->Qt Gui应用->输入项目名称和所在路径->选择默认构建套件->设置主界面类名及其基类（可以从三种基类之一继承：QMainWindow，QWidget，QDialog）->设置项目管理和版本控制->完成。

　　这时候我们构建并运行程序就可以看到显示了一个对话框。接着我们通过双击.ui界面文件来进入界面设计模式，从部件列表中拖动一个Label部件到主设计区，并编辑Label显示内容为"hello world! 你好，世界！"，还可以在部件的属性栏设置Label的名称、位置、大小等属性。然后再次构建运行程序，可以看到对话框上有了我们添加的Label部件，且Label上显示的是我们刚才设置的文字内容。在这个项目中，Qt自动为我们生成和实现了对话框的头文件和源文件、main函数、.ui文件。

2、新建一个空的Qt项目，通过我们自己编写全部代码来实现这个GUI应用：在新建项目的时候我们选择其他项目->空的Qt项目，项目创建好后我们为项目添加和实现main函数，代码如下，记得添加头文件<QDebug>来能够调试（qDebug()方法可以向应用程序输出栏输出各种格式，如int、string、QObject（输出对象名）、QObjectList等，如 qDebug() << "get value: " << value;）：

#include <QApplication>
#include <QDialog>
#include <QLabel>
#include <QString>
#include <QTextCodec>
#include <QDebug>

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

    QDialog dlg;
    dlg.resize(300, 400);

    QLabel label(&dlg);
    label.move(100, 100);

    /**********Qt Creator中字符串常量默认使用的是utf8编码**********/

    //1、使用QTextCodec::setCodecForCStrings设置QString使用的字符编码，此方法在QT5中已废除
    //QTextCodec::setCodecForCStrings(QTextCodec::codecForName("UTF-8"));
    //QString str = "你好hello";

    //2、使用QTextCodec::setCodecForTr设置tr函数使用的字符编码, tr方法实际上是用来实现国际化的，
    //所以这样做实际上是兜了个圈子
    //QTextCodec::setCodecForTr(QTextCodec::codecForName("UTF-8"));
    //QString str = QObject::tr("hello你好");

    //3、使用QString的from...方法来直接设置QString应该使用的字符编码
    QString str = QString::fromUtf8("你hello好");
    QString wstr = QString::fromStdWString(L"你好hello");

    //4、QTextCodec可以提供两种编码之间的转换，比如下面是将utf8转换为unicode
    QByteArray encodedString = "hello你好";
    QTextCodec *codec = QTextCodec::codecForName("UTF-8"); //使用utf8编码的codec
    QString ustr = codec->toUnicode(encodedString);

    QChar*data = ustr.data();
    int res = memcmp(data, L"hello你好", sizeof(L"hello你好"));
    qDebug() << res; //输出为0

    //5、QTextCodec::codecForLocale()可以获得最适合本机环境使用的编码，以下是将unicode转换为utf8
    QByteArray aryByte = codec->fromUnicode(ustr);
    res = memcmp(aryByte.data(), "hello你好", sizeof("hello你好"));
    qDebug() << res; //输出为0

    /*********Qt Creator中sizeof字符串得到的大小与VS中不同*********/
    qDebug("%d
", sizeof("ab测试")); //输出为9
    qDebug() << sizeof(L"ab测试") << endl; //输出为10

    //6、QStringList的使用
    QStringList l;
    l << QString::fromUtf8("item1") << QString::fromUtf8("item2");
    for(int i = 0; i < l.size(); i++)
        qDebug() << l[i] << endl;

    label.setText(str);
    dlg.show();
    return app.exec(); //进入事件循环
}

View Code

通过我们自己生成的项目与上面QT自动为我们生成的项目对比，可以看到QT自动生成的项目里与我们自己的项目在整体流程上是相同的，都是在main函数里定义一个Widget窗口，然后调用show来显示这个窗口。但是不同的是QT自动生成的项目里是把对这个窗口的布局、子控件的生成和处理等操作都统一放到了Ui::MainWindow类中，Ui::MainWindow对象作为窗口的成员，在窗口构造函数中调用Ui::MainWindow成员的setupUi方法来对窗口布局进行初始化操作，而当我们在设计模式下对窗口进行设计编译后，Qt Creator会自动对Ui::MainWindow类进行相应的调整。

我们也可以不使用Qt Creator而直接使用Qt命令行去编译和生成该程序：首先将main.cpp复制到QT的安装目录下的test，在菜单中找到QT下的Command Prompt打开，使用cd命令进入test目录，输入"qmake -project"命令来生成pro工程文件，输入"qmake"命令来生成用于编译的Makefile文件和debug、release目录，输入make命令来编译程序，编译完成后生成了exe文件。Makefile文件中包含了要创建的目标文件或可执行文件、创建目标文件所依赖的文件和需要运行的命令等信息，make就是通过读入Makefile中内容来执行编译工作的。make会为每一个源文件生成对应的.o目标文件,最后将这些目标文件进行链接来生成可执行文件。

3、我们也可以像第1种方法那样来使用QT自动生成UI布局设计类：新建空的Qt项目->添加新文件->Qt->Qt设计师界面->选择界面模板类型，这里有Dialog with buttons、Main Window、Widget，我们选择Dialog with buttons->输入Qt设计师文件的名称(一般以.ui结尾)和路径->确认->然后就进入到了设计模式，在这里可以对界面进行设计，比如添加一个Label部件并编辑部件显示文本、设置其属性。设计好后ctrl+s保存。这时点击编辑模式，就可以看到.ui文件即Qt设计师文件里的具体内容了->通过构建项目来生成界面实现类，其生成在debug/release目录下，是一个以ui_开头的头文件，具体内容见下方。每次当我们通过设计模式对.ui文件进行了修改后，再次构建程序即会生成新的界面实现类。->添加main函数，main函数中定义见下方。

//ui_hellodialog.h

#ifndef UI_HELLODIALOG_H
#define UI_HELLODIALOG_H

#include <QtCore/QVariant>
#include <QtGui/QAction>
#include <QtGui/QApplication>
#include <QtGui/QButtonGroup>
#include <QtGui/QDialog>
#include <QtGui/QHeaderView>
#include <QtGui/QLabel>

QT_BEGIN_NAMESPACE

class Ui_HelloDialogUi
{
public:
    QLabel *label;

    void setupUi(QDialog *HelloDialogUi)
    {
        if (HelloDialogUi->objectName().isEmpty())
            HelloDialogUi->setObjectName(QString::fromUtf8("HelloDialogUi"));
        HelloDialogUi->resize(400, 300);
        label = new QLabel(HelloDialogUi);
        label->setObjectName(QString::fromUtf8("label"));
        label->setGeometry(QRect(110, 40, 171, 16));

        retranslateUi(HelloDialogUi);

        QMetaObject::connectSlotsByName(HelloDialogUi);
    } // setupUi

    void retranslateUi(QDialog *HelloDialogUi)
    {
        HelloDialogUi->setWindowTitle(QApplication::translate("HelloDialogUi", "Dialog", 0, QApplication::UnicodeUTF8));
        label->setText(QApplication::translate("HelloDialogUi", "hello world!344275240345245275357274214344270226347225214357274201", 0, QApplication::UnicodeUTF8));
    } // retranslateUi

};

namespace Ui {
    class HelloDialogUi: public Ui_HelloDialogUi {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_HELLODIALOG_H

View Code

//main.cpp

#include "ui_hellodialog.h"

int main(int argc, char* argv[])
{
    QApplication a(argc, argv);
    QDialog w;
    Ui::HelloDialogUi ui;
    ui.setupUi(&w);
    w.show();
    return a.exec();
}

View Code

4、上面第3种方法是在mian方法里直接定义了一个QDialog对象来使用Ui设计类对象来设计QDialog，我们也可以像第1种方法那样使用一个QDialog的派生类对象：

具体实现为：①、新建空的Qt项目，向项目添加第3种方法中“Qt设计师界面”.ui文件，此时构建项目会在debug/release中生成“Qt设计师界面”生成的界面实现类。

②、向项目添加新文件->C++->C++ Class->输入类名，基类输入QDialog->确认->在生成的新类中调用“Qt设计师界面”生成的界面实现类的设计函数（setupUi()函数）来设计这个QDialog的界面，具体代码见下方。

③、添加main函数，向main函数中添加以下代码。

//hellodialog.h

#ifndef HELLODIALOG_H
#define HELLODIALOG_H

#include <QDialog>

namespace Ui
{
class HelloDialogUi;
}

class HelloDialog : public QDialog
{
    Q_OBJECT
public:
    explicit HelloDialog(QWidget *parent = 0);
    ~HelloDialog();

signals:

public slots:

private:
    Ui::HelloDialogUi* pUi;
};

#endif // HELLODIALOG_H



//hellodialog.cpp

#include "hellodialog.h"
#include "ui_hellodialog.h"

HelloDialog::HelloDialog(QWidget *parent) :
    QDialog(parent)
{
    pUi = new Ui::HelloDialogUi;
    pUi->setupUi(this);
}

HelloDialog::~HelloDialog()
{
    if(pUi)
       delete pUi;
}

View Code

//main.cpp

#include <QApplication>
#include "hellodialog.h"

int main(int argc, char* argv[])
{
    QApplication a(argc, argv);
    HelloDialog w;
    w.show();

    return a.exec();
}

View Code

5、上面第4种方法是使用“Qt设计师界面”来生成.ui设计文件对应的实现类，然后再自己生成一个QDialog的派生类，我们也可以直接一次性生成QDialog的派生类 + ui设计实现类：

①、新建空项目->添加新文件->Qt->Qt设计师界面类->界面模板选择Dialog with buttons->输入类名->确认。

②、这时我们看到项目生成的QDialog派生类头文件、源文件还有.ui文件，我们可以在设计模式下对ui界面进行设计，然后构建项目就可以在DEBUG目录下看到.ui界面的实现头文件。可以看出，“Qt设计师界面类”自动完成了上面第4种方法中除main函数的实现外的所有功能。

③、最后我们添加main函数的实现，如下：

#include <QApplication>
#include "hellodialog.h"

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

    HelloDialog w;
    w.show();

    return a.exec();
}

View Code

6、生成的exe文件如果需要单独运行的话还需从Qt安装目录拷贝所需的DLL文件，如：libgcc_s_dw2-1.dll、libstdc++-6.dll、libwinpthread-1.dll、QtCored4.dll（release版本为QtCore4.dll）、QtGuid4.dll（release版本为QtGui4.dll）。

7、设置exe文件的图标：①、将myico.ico图标文件放置工程目录，新建一个名称为myico，后缀名为.rc的文件，在rc文件中输入 IDI_ICON1 ICON DISCARDABLE "myico.ico"。

②、编辑工程的.pro文件，在其最后加上 RC_FILE += myico.rc。

8、.pro文件说明

 1 #-------------------------------------------------
 2 #
 3 # Project created by QtCreator 2017-08-11T14:14:01
 4 #
 5 #-------------------------------------------------
 6 
 7 QT       += core gui
 8 
 9 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
10 
11 TARGET = untitled14
12 TEMPLATE = app
13 
14 
15 SOURCES += main.cpp
16         widget.cpp
17 
18 HEADERS  += widget.h
19 
20 FORMS    += widget.ui

View Code

　　第7行中的core为Qt非图形用户界面模块，gui为图形用户界面模块。

　　第9行表示如果是Qt5版本，那么就添加QT += widgets。我在Qt 5.5.0版本中新建一个空的Qt项目后，构建提示找不到QApplication头文件错误，然后在.pro文件中加上第9行的内容就可以了。

　　第11行是生成的目标文件（exe文件）的名称，可以更改为其他。

　　第12行使用app模板，表示这是个应用程序。

　　第15、18、20行表示工程包含的源文件、头文件、界面文件。

为了使Qt Creator支持C++11，需要在 pro文件添加：

QMAKE_CXXFLAGS += -std=c++11
　　或
　　CONFIG += c++11

9、Qt Creator中快捷键

　　F1: 显示该方法的帮助文档。
　　F2：转到该方法的定义/声明。
　　F4: 转到当前文件对应的声明/定义文件。
　　Shift + Tab : 减少缩进。
　　Ctrl + F: 当前页面搜索。
　　Ctrl + Shift + F: 指定更多条件的搜索.
　　Ctrl + /：注释/取消注释。
　　Alt + 回车 : 添加对应方法声明的实现。
　　Ctrl + K : 打开定位器。