Qt5.9.2+VS2017入门实例——透彻解析

前言：

         由于现在书上介绍的大部分都是Qt Creator,并没有介绍Qt+VS的教程，虽然说很相似，但是也有很多地方不同，对于初学者特别是那些槽和信号的连接非常的乱，而且几种文件也傻傻分不清，这个实例就带你理清Qt+VS的创作过程，保证你可以举一反三，会用一些简单控件的添加与事件的触发。

       不知道读者是否写过C#的WinForm或者Android界面的开发，在我看来，无论是Qt还是WinForm或者是Android界面的开发，核心都是一样的，拿个最简单的例子来说，比如一个Button(按钮)和一个Label(标签)，最简单的例子莫过于，点击Button之后，Label上显示“HelloWorld！”

                                       

      这是最简单的，也是最有精华的地方，为什么点击一个Button，label上面的字就会发生变化，自然会想到，在程序里面是这样实现的，当我点击Button的时候，下面会执行某件事，这个事就是Label的字发生改变，这里需要注意的是“当我点击Button的时候”这句话，这句话实现的时候是一个动作，是一个很具体的动作，这个动作在C#的桌面开发中叫做“事件”，当事件发生时，会执行某件事。C#里面是这样实现的：

 private void button1_Click(object sender, EventArgs e)
        {
            label1.Text = "HelloWorld!";
        }

        

          刚才所说的“当我点击Button的时候”这句话，就是通过private void button1_Click(object sender, EventArgs e)这一行代码实现的，是不是很简单，你想在点击Button后发生什么事，就在大括号里面写什么事就好了，更简单的事也是和Qt还有Android最有区别的事就是——

 private void button1_Click(object sender, EventArgs e)
        {
           
        }

         上面的这几行在C#中是不需要自己写的，只要双击布局上面的Button，就会在代码区域生成这一行代码，但是Qt里面都需要我们手动完成这个方法的实现

             简单来说就是Qt要完成这样一个简单的private void button1_Click(object sender, EventArgs e)方法，需要自己手动补全，补全的方式也有点不同，需要两个步骤，一是需要定义button1_Click（）函数（Qt里面叫槽——实现动作的函数），二是需要连接信号与槽的关系（Button发出Click信号，button_Click（）函数完成click之后的任务）——红的是信号，绿的是槽。

          如果你还不懂的话，接下来就是一个Qt简单的例子，你做完之后，再与我上面所写的对应一下就懂了。

______________________________________________________________________________________________________________________________________

正文：

         在完成例子之前我先说一下，本例子是用Qt设计师设计界面，不像其他地方直接用代码实现界面的设计。

                   

案例说明：

                     1.勾选CheckBox可以改变LineEdit里面的文字属性，是只读还是加密显示。

                     2.点击输入按钮可以将LinEdit里面的文字显示在TextLabel里面。

1.创建新的项目如下图：

 
                 

                 

2.解决方案中的文件简单介绍：

                                     

        （1），是Qt设计师文件，双击可以打开Qt可视化设计

        （2），Qt界面的代码文件，Qt设计师设计的界面以代码的形式存储在这里，比如Button的位置，大小，名字

       （3），Widget类的头文件，定义一些字段和函数声明，包括最重要的slots（槽）函数的声明，以及界面ui句柄，以便通过“ui.***”的方式访问到界面的各个控件，比如访问界面的Label控件里的文字可以这样：ui.label->text();就是字面意思，很容易理解。

        （4），资源文件，相当于AndroidStudio里面的rcs文件夹，里面存放需要用到的.ico图标或者图片。

        （5），主函数文件，程序的入口，不必解释，其实一般不会在这个里面修改什么。

        （6），Widget类完成的主要文件，在widget.h里面定义之后的字段以及函数声明，以及槽的实现，都是在这里，Qt的逻辑功能设计主要是修改这个文件。

3.设计界面——拖放控件

            双击步骤2中的文件1（widget.h文件），打开Qt设计师，在设计师的左边控件区域找到下面几个控件：

                            1. Check Box(2个)

                             2.PushButon

                            3. LineEdit

                            4.TextLabel

左键按下拖动到界面上，布局如图所示,双击界面上的控件，改变他们显示的名字，（控件有两个名字：1，显示时的名字（text），2，设计时需要调用它时的名字（objectName），一般是英文和数字组合），同时注意他们的objectName（在右边属性一栏）。

               

4.按照前言所叙述的，1，添加事件发现的函数——槽函数。2.连接信号与槽.

           (4.1)添加事件发现的函数——槽函数

解析：因为我们有三个动作（事件），其中有一个是按钮按下的动作（事件），还有两个分别是两个CheckBox勾选后的动作（事件），这些动作发生之后都要执行相对应的任务。所以先添加这些事件函数，slots是槽的意思，在widget.h文件中添加。

 

#pragma once

#include <QtWidgets/QWidget>
#include "ui_widget.h"

class Widget : public QWidget
{
	Q_OBJECT

public:
	Widget(QWidget *parent = Q_NULLPTR);

private:
	Ui::WidgetClass ui;
private slots:
	void on_checkBox_clicked();
	void on_checkBox_2_clicked();
	void on_pushButton_clicked();//这些如果是这种形式的信号定义，则不需要写connect函数，其实也不用在设计师中连接信号与槽
	//如果不是这样定义的就必须写connect，可以通过在设计师中连接信号与槽自动生成connect
}

            粗体是添加的部分，需要注意的是这些函数是有命名规则的，"on_"后面是控件的设计名字（objectName,步骤三中，红色字体部分），然后后面是“_clicked()”,你在设计的时候最好遵循这种命名格式，这样你就可以省掉4.2的步骤（2.连接信号与槽.），也就是说，你如果遵循这个命名格式的话你就不用写connect（）函数了，因为这种定义让系统能够自动识别信号与槽的连接，不用再写connect()函数，一箭双雕。可以直接到第5步，但是如果系统比较复杂，并不是所有的都可以这样命名的时候，你就要用到4.2的步骤了。

         （4.2）连接信号与槽

         如果你在4.1中没有按照命名规则来命名槽函数，那么就要进行信号与槽的连接，所谓信号与槽的连接就是，一个信号send出来，要有一个槽接收这个信号，然后执行相应任务，这个过程需要连接的，如果不设计这个连接，即使Button send出一个click信号，也没有什么东西去执行click后的任务（其实这个和C#中的事件注册是一样的，只不过C#中的事件注册系统在我们双击Button的时候帮我们自动完成了）。怎么进行连接呢，在widget.cpp里添加：

     

#include "widget.h"

Widget::Widget(QWidget *parent)
	: QWidget(parent)
{
	ui.setupUi(this);
	connect(ui.checkBox,SIGNAL(clicked()),this,SLOT(on_checkBox_clicked()));
	connect(ui.checkBox_2, SIGNAL(clicked()), this, SLOT(on_checkBox_2_clicked()));
	connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(on_pushButton_clicked()));
}

         

          可以很容易看出，ui中的checkBox发出一个clicked()的信号，on_checkBox_clicked()槽函数去接收它，在这里我用的是正规的命名规则，其实是不需要写connect()函数的。

     必杀技：

            必杀技终于来了，有没有感觉这样手动写connect()函数很蛋疼，写完一个槽函数也就算了，还要我自己写信号与槽的连接，如果多的话，我岂不一个个写要累死，所有用到了Qt设计师的时候到了：

           （4.2.1），双击widget.ui文件打开设计师，如下步骤进行：

         如上图，点击1处的信号与槽按钮，然后先为“只读”checkbox添加信号与槽的连接，方法就是鼠标左键拖动“只读”按钮到空白区域，松开鼠标会弹出信号与槽的对话框，如下图：

          如上图：首先选择2处的信号（clicked(),对应步骤4.2的手动写connect()就可以明白），然后点击3处的编辑以便添加槽，如下图：

                 

            如上图：点击1处的加号，会在2处出现slot1()，这个是默认的让你添加槽的，所以把slot1(),改成你自己需要的槽，“只读”check Box对应的槽应该是on_checkBox_clicked()，（注意这里我用的也是正规命名规则，正规命名规则是不需要添加槽和信号的连接的，我这里只是做师范用），添加之后点击下面的ok,然后进行下一步：

                 

                     

            如上图：你就可以按钮添加的信号与槽的连接了，clicked()是信号，on_checkBox_clicked()是槽，接下来按照步骤4.2的代码进行其他两个的信号与槽的连接就可以了。

5.widegt.cpp的修改——槽函数的任务执行

        如果你是从4.1还是4.2过来的，都需要看这一步，这一步也是最重要的一步，也就是点击按钮之后，功能的实现，现在只剩下如何完成点击之后的功能了，所以要补全槽函数的内部，你要知道，我们在4.1中添加的槽函数是在widget.h这个头文件中添加的，这个叫做声明，所有我们要补全它，当然是在其对应的widget.cpp文件中补全，可能会遇到一些问题，请参考下面的“补充”解决，代码如下：

#include "widget.h"

Widget::Widget(QWidget *parent)
	: QWidget(parent)
{
	ui.setupUi(this);
	
}
void Widget::on_checkBox_clicked()
{
	if (ui.checkBox->isChecked())
	{
		ui.lineEdit->setReadOnly(true);
	}
	else
	{
		ui.lineEdit->setReadOnly(false);
	}
}
void Widget::on_checkBox_2_clicked()
{
	if (ui.checkBox_2->isChecked())
	{
		ui.lineEdit->setEchoMode(QLineEdit::Password);
	}
	else
	{
		ui.lineEdit->setEchoMode(QLineEdit::Normal);
	}
}

void Widget::on_pushButton_clicked()
{
	ui.label->setText(ui.lineEdit->text());
}

           粗体部分是添加的代码，这些代码根据字面意思都很好理解，我就解释一个吧：

          首先要包括widget.h这个头文件，因为这里用到的函数与句柄都是在widget.h里定义的，其中有一个ui句柄，就是在指整个界面，你可以通过则个ui访问界面上的控件（可能会出现ui_widget.h找不到或打不开问题，看下面的补充），解释一下第一个槽函数里的内容：

          ui.checkBox->isChecked()：指的是ui界面上的checkBox控件被勾选，返回的是一个bool型，很容易理解，被勾选就是true,否则就是false.

            然后看里面的ui.lineEdit->setReadOnly(true):ui界面上的lineEdit控件设置成只读属性，或者不是只读属性。就这么简单。

6，验证设计师为我们完成的信号与槽的连接

          其实设计师中完成的信号与槽的连接也是通过代码实现的，只是我们通过对话框自己添加的时候，代码已经默默的生成connect()函数了，不行的话你可以到ui_widget.h文件里面找到  retranslateUi(WidgetClass);下面的代码是不是connect()函数，哈哈，是的！本例程全部代码在这里。

总结：

          通过这么长的博客不知道你明白了没有，就是这么简单，可能你觉得我说的过于简单，那是因为我在学之前真的希望有这样的一个教程，但是没有找到，找到的都是QtCreator，还有各种文件改代码，由于刚接触真的不知道各个文件的关系，所有很乱。通过这个教程你就能完成基本的控件操作了，其实我说的这些步骤你如果懂得的话，其他的一些控件就不在话下，无非是功能的变相实现，用到哪个查哪个功能就行，不必再纠结哪个文件该不该改代码，哪个槽该不该连接信号。

                                                                                 谢谢大家！我的表演结束！

补充：

          可能在你修改widget.cpp文件时就会发现ui_widget.h文件打不开，无法用到输入提示（比如你在widget.cpp文件中输出“ui.”的时候后面不会出现提示的单词，那是因为你的ui_widget.h文件没有被识别），你可以将ui_widget.h文件右键->移除，然后重新添加就可以了！