QT成长笔记（一）

假设你是一个QT小白，会一点C++，了解QT，但是了解的不多。想用QT做一个小项目来练练手，却不知道从何做起，不妨看看我这篇文章，我会以一个应用程序的角度从浅入深的教你一些基本的东西。

创建工程

创建QT widgets Application，项目名任意，选择基类QMainWindow,类名 任意，代表主场景。（注意项目所在路径千万不要出现中文，否则可能会出现点击运行，没有窗口弹出的情况），选择MinGW作为编译器。
构建完毕后，直接运行会得到下面的效果：

此外，还能发现，上面的工程实际上只有两个CPP文件，其中一个是主函数，另一个是MainWindow.cpp也就是这个运行生成的界面。
主函数的代码解释如下：

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    
    
    QApplication a(argc, argv);    //创建一个应用对象
    MainWindow w;       //创建一个主窗口对象
    w.show();           //当你创建一个窗口部件的时候，它是不可见的。你必须调用show()来使它变为可见的。
    return a.exec();    //这里就是main()把控制转交给Qt，并且当应用程序退出的时候exec()就会返回。
}

1.1 修改标题

让我们思考一下，主函数实际上只是创建了一个应用程序对象和一个主窗口对象，然后让其进行显示，那么我们要对主窗口进行改动的话要怎么处理呢？
比方说我们要改动主窗口的标题！

• 很自然的能想到要去MainWindow.cpp的构造函数中去处理
• 加入setWindowTitle(tr(“这是标题”));

代码和效果图如下（setWindowTitle是常见的命令，不要问怎么来的，记住就行）

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

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    
    
    ui->setupUi(this);
    
    setWindowTitle(tr("这是标题"));   //新增了这一行代码
}

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

1.2 切换窗口

现在假设我们需要一个按钮，点击这个按钮，可以进入子窗口，同时子窗口也有返回按钮，可用于返回主窗口。
那么我们需要做两件事：1、在主窗口创建按钮；2、创建一个子窗口。
（1）首先，让我们打开ui界面，在主窗口的添加一个label标签和一个按钮，label标签用于打字，pushbutton用于跳转。

（2）在设计界面右击进入pushbutton，选择转到槽（因为点击按钮的事件是用信号和槽进行驱动的）。

（3）因为触发这个事件的动作是点击按钮，所以我们选择click
（4）完了之后会发现QT在MainWindow.cpp中自动帮我们生成了槽函数，我们可以直接在其中写代码。

（5）在这之前，让我们先创建子窗口。
（6）选择Qt设计师界面类，选择Dialog without Buttons，取类名为SonWindow（这个可任意）。


这时候我们会发现，项目中多了三个文件，分别是cpp文件、h文件和ui文件。如果要在主窗口调用子窗口的话，那么肯定是要包含其头文件的。

（7）和主窗口一样，我们也在子窗口的ui界面中添加一个label标签和一个按钮。（字体的位置和大小可以在ui文件中进行设置）

对了，子窗口是没有标题的，如果要设置的话，可以在子窗口的构造函数中进行设置。
（8）记得添加子窗口的头文件，然后在主窗口的按钮槽函数中写入以下代码

void MainWindow::on_goto_next_clicked()
{
    
    
    SonWindow *son_Window=new SonWindow;  //调用SonWindow类给子窗口创建一个对象（通过new创建出来的都是指针，这个指针指向对象）
    this ->close();                     //this是当前窗体（主窗口）的指针，关闭
    son_Window ->show();              //子窗口显示出来
}

（9）同样的，在子窗口要返回主窗口的话，首先添加主窗口的头文件，然后编写相关的槽函数即可。

1.3 设置背景

做完了上面两个操作有点不知道要干什么了，现在让我们看看能不能给这两个界面设置不同的图片背景。
首先先下载两张图片，我这里设置了一张美女图和一张天空图,最好保存在项目得同一级目录下，我就是放在image文件夹中的。

（1）点击文件 右键——添加新文件——选择QT——选择 QT Resource File——确定Choose-资源项目名称我取得是res。

（2）右键res——添加现有文件——将image中的两张背景图放进去-----弹框选择yes to ALL。

(3）右键res——添加现有文件——将image中的两张背景图放进去。
(4)点击主窗口的ui界面，直接点击界面 ——右键——改变样式表——添加资源——选择背景——然后确定——会提示无效样式表——在url前面输入下面的代码 #MainWindow{border-image: 然后后面加一个右大括号 } ——显示有效样式表，红色字体为设置主窗口的背景。



(5)点击ok即可，然后运行就会发现有效果了，对了ctrl+R是运行得快捷键。

同样的，我们在子窗口的ui界面再进行一次这样的操纵，这一步我就省略不写了。
后续
细心的同学会发现在子窗口设置完没效果，这是为什么呢？我在网上查了一下：有开发人员这样说道：

1. 不要在顶层窗口（无父类的窗口）中使用setStyleSheet() ，否则其一父窗口的背景不会改变，其次其子窗口的背景设置方法变得局限唯一，不能再使用其它方法！
2. 如果一个一般窗口（非顶层窗口）还有子窗口，那最好不要使用setStyleSheet()来设置其背景颜色，因为虽然此时该窗口的背景设置是生效的，但是其子窗口的背景设置也变得局限唯一，只能使用setStyleSheet，而不能使用其它方法！ 当然：你如果就是只想使用这种方法，那也完全可以！！
   　　说白了就是：不要再MainWindow中使用setStyleSheet()！

那么怎么解决呢？ 可以使用绘图事件。

• 因为我们要让子窗口显示背景图片，那么我们在子窗口的头文件中先添加一个受保护的绘图事件函数。

protected:
    //绘图事件函数
    void paintEvent(QPaintEvent *event);

• 然后在函数处按下alt+回车键的命令即可跳转到函数的定义处。
• 跳转到函数的定义处先添加一个画家类的头文件 #include <QPainter>
• 然后在绘制背景图的函数中输入如下三行代码

    // 给子窗口画背景图
    QPainter p(this);    //创建画家对象
    QPixmap pixmap(":/image/background2.PNG");  //获取背景图路径
    p.drawPixmap(0,0,this->width(),this->height(),pixmap);  //绘制背景图

• 步骤图片和最终效果如下
  
  
  

补充：
编译中会出现以下警告：
warning: unused parameter ‘event′ [-Wunused-parameter]
原因是由于函数参数event未使用，这在程序当中有时候很正常；所以个人认为此警告意义不大，可以取消；解决方法点击此处

1.4 文件选择对话框

为什么要说这个功能呢？因为我觉得这个功能比较常见，虽然现在用不到，没这个需求，但是可以试着搞一下。
（1）在MainWindow.cpp中包含头文件 #include< QFileDialog> 其中QFileDialog类是 Qt 提供的一个用于指定操作文件的对话框小部件。
（2）添加一个按钮用于触发文件选择对话框这个事件（Click）。
（3）在按钮的槽函数中添加以下代码

void MainWindow::on_open_file_clicked()
{
    
    
    	//创建一个文件对话框对象
        QFileDialog *fileDialog = new QFileDialog(this);  

        //定义文件对话框标题
        fileDialog->setWindowTitle(QStringLiteral("选择文件"));

        //设置打开的默认文件路径
        fileDialog->setDirectory("C:");

        //设置文件过滤器,只显示.png .jpg  .txt 文件,多个过滤文件使用空格隔开
        fileDialog->setNameFilter(tr("图片文件(*png *jpg);;" "文本文件(*txt)"));

        //设置可以选择多个文件,默认为只能选择一个文件QFileDialog::ExistingFiles
        fileDialog->setFileMode(QFileDialog::ExistingFiles);

        //设置视图模式
        fileDialog->setViewMode(QFileDialog::Detail);

        //获取选择的文件的路径
        QStringList fileNames;
        if (fileDialog->exec()) {
    
    
            fileNames = fileDialog->selectedFiles();
        }
}

演示效果如下：

1.5 修改exe应用程序图标

（1）首先需要准备一个ico图标，可以将png图片转换成ico图标，图标大小可以设置成128x128。不知道怎么转换的可以点击下方链接：

点击此处在线转图片格式
进入网址后，上传你的图片，完毕后会得到一个链接，点击链接会进入一个图片界面，右键另存即可。
（2）转换完毕将exe.ico图标文件放到与.pro同一个目录下(这里我取得名字是exe.ico)

（3）在.pro文件添加一行代码

RC_ICONS = exe.ico    #exe.ico为所需要设置的图标，可以替换成自己需要的

（4）然后执行qmake（顶部的构建–>执行qmake），并运行。
（5）此时可以看到debug目录下的可执行exe应用程序图标就变成你想要的效果了。

1.6 登录密码输入框

一般来说QT经常会用到用户名和密码输入框，那么让我们一起来做一下，我们选择主界面，作为我们的实验场景。
跟着我以下的步骤来：

• 打开mainwindow.ui，在左侧拖一个Widget工具到主界面中，调整好大小。
• 然后再拉一个Label标签，用于显示用户登录的字样。
• 继续拖一个Widget工具，放到先前的Widget窗口中，然后在第二个widget窗口中添加两个Label和两个Line Edit
• 对第二个widget窗口选择栅格布局，这样子窗口中的对象就会很整齐。
  演示效果如下：
  
  
• 由于密码通常是不可见的，因此我们要在密码的Line Edit的属性中进行设置：修改echomode属性为password。（补充，这些控件（Label可以忽略）最好给他设置名字，不会的可以通过百度或者谷歌翻译一下，比方说用户名可以设置成user_name，密码可以设置成password）
• 
  最终效果如下：
  

为了看上去更加美观，我加入了记住密码复选框和登录按钮，具体步骤如下：
拖一个widget到第一个widget窗口，这个widget的目的1：是用来放记住密码和登录按钮这两个控件的。目的2:为了方便对第一个widget使用.

1.7 获取输入框中的内容

书接上文，我们在输入框中输入了内容，那么又该怎么获取这些内容呢？
让我们带着这个想法去实现一个功能： 点击登录按钮，在QT中打印出用户名和密码
实现步骤：

• 点击ui界面中的登录按钮，右击触发槽函数选择click，然后编写该按钮的功能：
• 因为要打印出用户名和密码，那么首先我们得获取用户名和密码才行。因为我们的用户名和密码是在Line Edit控件中的，获取Line Edit控件的内容的代码为：QString str=ui->lineEdit->text(); 由于我的控件名是改了的，因此代码如下。对了不要忘了添加QString的头文件

    QString str1=ui->user_name->text();   //获取用户名 
    QString str2=ui->password->text();    //获取密码

• 既然获取到了，那么就要进行显示了，怎么显示呢？利用qDebug，qDebug是QT中在终端界面打印的函数。1、添加qDebug的头文件。然后输入以下代码：

	qDebug()<<"user_name:"<<str1<<endl;   //打印用户名
    qDebug()<<"password:"<<str2<<endl;    //打印密码

最终效果如下图所示：

1.8 将输入框中的内容保存到本地文件中

由于qDebug是我们产品未发布的时候用于测试的，那么假设我们现在有了一个新的需求，要把用户名和密码存放到一个文件中应该怎么做呢？
思考，这里肯定要用到文本读写操作。这里会用到QFile的头文件，另外为了让我们直观的感受到登陆成功这个情况，我们设置了一个消息提示的弹窗，这里要用到QMessageBox的头文件
具体步骤如下：

• 打开txt文件，如果文件不存在，那么创建一个txt文件。
• 对文件进行写操作，注意这个写操作是追加形式的写操作。
• 写完之后要注意换行，否则看起来很怪。
• 关闭文件

具体实现代码如下所示，相应的注释也已经写的很清楚了：

//要添加的头文件
#include <QString>      
#include <QDebug>
#include <QMessageBox>    //消息提示框

void MainWindow::on_log_in_clicked()    //点击登录按钮，打印及保存用户名和密码
{
    
    
    QString str1=ui->user_name->text();   //获取用户名
    QString str2=ui->password->text();    //获取密码
    QFile file("log_in.txt");

    file.open(QIODevice::ReadWrite | QIODevice::Text);  //这两行的目的是判断文件是否存在，不存在则创建一个
    file.close();

    file.open(QIODevice::Append | QIODevice::Text);//追加的方式打开文件，原始数据不会清空
    //向文件中写入两行字符串
    file.write(str1.toUtf8());
    file.write(str2.toUtf8());
    file.write("\r\n");
    //关闭文件
    file.close();

    int flag = QMessageBox::information(this, tr("提示对话框"),tr("登陆成功！"), QMessageBox::Ok);   //弹出对话框
    if(flag == QMessageBox::Ok){
    
    
        qDebug() << tr("登陆成功！");
    }
}

最终效果如下：

当然了，这里还可以优化，比方说将用户名和密码区分开，另外就是可以对用户名和密码的格式进行设置，这就要用到正则表达式检验了，这个我会在后续的文章中写道。

最后
如果觉得对你有所帮助的话，希望能点赞收藏一波，您的鼓励就是对我最大的支持，谢谢！