QT基础学习笔记 Demo02

1. setupUi

setupUi下面的作用的是用来初始化窗口上面的控件(是在设计里面拖过去的控件才有，如果是自己
写的那么是不会有的)，可以理解为在设计下拖的控件，那么要经过执行setupUi之后才会被创建，所以
拖过去的控件使用就必须要在setupUi之后，不能在之前

1.1 ui

这个ui可以理解为我们的ui界面，在这个ui界面上的控件是通过ui->控件对象名字，来进行使用的
(自己的写的就不归它管)

1.1.1 setupUi代码实现创建组件

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);//构造窗口上的控件
    pushButton = new QPushButton(this);//父类窗口
    pushButton->setGeometry(QRect(10, 40, 91, 81));//第一 二个代表左上角坐标
    //第三个是宽  第四个是高
    pushButton->setText("文字");
    pushButton->show();   //显示
    QFont font;
    font.setPointSize(13);//设置字体大小
    pushButton->setFont(font);
}

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

这里创建的代码相对较少，也是为了简单举例子，我们可以全完不需要记住他们。只需要按住Ctrl+鼠标左键，单击setupUi进入他的源码，就可以看到他是如何创建并且赋值属性的啦🍖

这里我们也会发现一个问题就是我们new了一个pushButton，在学习c++时，我们new完必须要free释放，但是在这里是不需要的，在析构函数widget中，我们对应释放了他的父类即可将对应的也释放掉

上面是通过完全写代码实现的创建组件，但是QT的ui设计给我们提供了很方便的功能，全部的组件都可以在设置里面拖入，这里的代码创建大家了解即可，下面开始QT的全部控件

2. button控件

2.1 pushButton

1. 最下面这个转盘实际上是一个按钮，我们可以改变按钮的样式，也可以改变按钮前面的图标

   如何改变样式？

   右键->改变样式->添加资源

   如何添加图片资源在我博客之前就有讲过QT基础学习笔记 Demo01

   如何给按钮前添加图标

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    QIcon icon(":/chudai.png");//图片地址
    ui->pushButton_2->setIcon(icon);
}

这里按钮名是pushButton_2，用setupUi进行贴图

---

我们在添加按钮时，如果想要对按钮进行操作，必须在设计里右键按钮转到槽，就是我们Demo01中写的信号与槽，通常我们会用到第一个和第二个，如果仅单击则为clicked()，下面我们讲一下如何使用click(bool)。

clicked(bool)

widget.h部分代码

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

private slots:
    void on_pushButton_clicked();//click(bool)单击的槽函数

private:
    Ui::Widget *ui;
    bool isDown;//定义布尔类型，单击鼠标判断为ture or false
};

widget.cpp部分代码

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    isDown=false;//默认为假
}

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

void Widget::on_pushButton_clicked()
{
    if(!isDown)
    {
        isDown=true;
        ui->pushButton->setText("否");
    }
    else
    {
        isDown=false;
        ui->pushButton->setText("是");
    }
}

这里代码放给大家了，具体的通过鼠标单击的结果大家自己手动实现吧。
主要是我不会操作gif动画展示(我会尽力学的)

2.2 toolButton

这里没有代码操作，只需要添加toolButton，一个按钮只能拖一次，单击12时，会跳出别的界面，以mainwindow为例，在上面任务栏添加

2.3 radioButton

这里的radioButton就相当于pushButton前面加了一个小圆圈，我们可以设置radioButton一选一，甚至多选一。

• radioButton 这就相当于radioButton控件，如果我们点击会变成这样的效果👇👇👇
• radioButton

这里我设置了纵向一列为一组——只能进行三选一，那么是如何做到的呢？
我们只需要按住Ctrl多选，右键新建按钮组，这样很多个按钮就相当于一个按钮，也就是说在选择的时候，只能选择其中一个

这是我们利用radioButton实现的一个选择，最后将选择的结果进行综合
我们先来理一下怎么才能做出这个软件一、首先我们需要给每一个按钮定义槽函数，在定义槽函数时，要选择bool checked，如果不选择就会直接响应，对应的每个槽函数内都要将按钮设置为选中。二、对两列都进行选择完之后，单击确定按钮，对前面每一个按钮进行判断，判断哪个按钮选中，将对应的按钮信息进行保存最后输出

代码如下
头文件

#include <QWidget>
#include <QMessageBox>
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

private slots:
    void on_radioButton_hunan_clicked(bool checked);

    void on_radioButton_changsha_clicked(bool checked);

    void on_radioButton_guizhou_clicked(bool checked);

    void on_radioButton_guiyang_clicked(bool checked);

    void on_radioButton_hubei_clicked(bool checked);

    void on_radioButton_wuhan_clicked(bool checked);

    void on_pushButton_clicked();

private:
    Ui::Widget *ui;
};

cpp文件

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}

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

void Widget::on_radioButton_hunan_clicked(bool checked)
{
    if(checked)
    ui->radioButton_hunan->setChecked(true);//设置为选中
}

void Widget::on_radioButton_changsha_clicked(bool checked)
{
    if(checked)
    ui->radioButton_changsha->setChecked(true);//设置为选中
}

void Widget::on_radioButton_guizhou_clicked(bool checked)
{
    if(checked)
    ui->radioButton_guizhou->setChecked(true);//设置为选中
}

void Widget::on_radioButton_guiyang_clicked(bool checked)
{
    if(checked)
    ui->radioButton_guiyang->setChecked(true);//设置为选中
}

void Widget::on_radioButton_hubei_clicked(bool checked)
{
    if(checked)
    ui->radioButton_hubei->setChecked(true);//设置为选中
}

void Widget::on_radioButton_wuhan_clicked(bool checked)
{
    if(checked)
    ui->radioButton_wuhan->setChecked(true);//设置为选中
}

void Widget::on_pushButton_clicked()
{
    QString str1,str2;
       if(ui->radioButton_hunan->isChecked())
           str1+="小柏";
       else if(ui->radioButton_hubei->isChecked())
           str1+="小李";
       else if(ui->radioButton_guizhou->isChecked())
           str1+="小张";
       if(ui->radioButton_wuhan->isChecked())
           str2+="吃苹果";
       else if(ui->radioButton_guiyang->isChecked())
           str2+="吃橘子";
       else if(ui->radioButton_changsha->isChecked())
           str2+="吃香蕉";
       QMessageBox::information(this,"你选择了",str1+str2,QMessageBox::Yes|QMessageBox::No,QMessageBox::Yes);
       //父类窗口   提示栏   内容    有哪些选择   选择哪一个
}

2.4 checkBox

checkBox跟radioButton是一样的，只不过形状不一样，这里举例的代码跟上面一样，大家可以自己手动实现一下

2.5 commandlinkButton

commandlinkButton和pushButton类似，只不过commandlinkButton展示的是图标+文字的显示，当然图标和文字都是可以进行修改的，使用方式跟pushButton一样。

2.6 DialogButtonbox

DialogButtonbox是一个按钮组，根据右面我们可以选择自己想要的来添加，这里为了举例我只添加了三个。

我们在定义槽函数的时候括号内选择的参数为QAbstractButton 'button

3. combox

这是一个下拉列表，单击右面小箭头就可以展示所有内容

添加
双击combox组件

槽函数
我们转到槽函数时选择参数为int类型
通过switch以及itemText获取字符串赋值给Qstring，最后通过QMessage弹窗提示(这里只给出了.cpp文件)

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    //ui->comboBox->insertItem(2,"bb");//第二个位置后插入一个新的字符串
}

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

void Widget::on_comboBox_activated(int index)
{

    QString str;
    switch(index)
    {
    case 0:
    str=ui->comboBox->itemText(0);//获取第0行的字符串
    break;
    case 1:
    str=ui->comboBox->itemText(1);
    break;
    case 2:
    str=ui->comboBox->itemText(2);
    break;
    case 3:
    str=ui->comboBox->itemText(3);
    break;
    }
    QMessageBox::information(this,"你的选择",str,QMessageBox::Yes|QMessageBox::No,QMessageBox::Yes);

}

仔细看代码在ui构建里，我加入了一行ui->comboBox->insertItem，这是插入语句。

效果图展示

4. Line Edit

Line Edit是我觉得最好玩的一部分，因为大部分只需要鼠标点击就可以构建出一个软件，很少需要代码

这里是构建出是这样的，那么我们在看看填写之后是什么样子

填写完之后

• 第一个正常提示是正常的LineEdit
• 第二个密码将echoMode的模式改成Password,在输入时就会变成黑色
  
• 第三个ip地址只需要写入形式即可，并且填写他最大的长度这里是15也算上了三个点
  
• 第四个对齐方式按照对应的修改属性
  
• 第五个在不填写东西的时候，会默认填写，如果用户填写就会进行修改
  
• 第六个是只读，不能修改对应勾选readOnly
• 第七个会发现前面有图标和文字，并且在输入的时候后面有×可以直接删除全部，勾选这个按钮
  
  如何在Line Edit放入图片
  这里用的都是ui带的函数进行操作

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->lineEdit_7->setPlaceholderText("这是个带ico的");
    QAction *paction=new QAction(this);
    paction->setIcon(QIcon(":/class02.ico"));
    ui->lineEdit_7->addAction(paction,QLineEdit::LeadingPosition);

}

5. text edit plain text edit

①Text Line

Text Line控件可以看成多个的Line Edit组成，并且可以换行，在Line Edit是不可以的。

• 我们给Text Edit控件输入值有两种方式，一种是在ui设界面中双击输入，就跟聊天打字一样，第二种是通过代码写入，在我们Text Edit中有文本的时候如果通过代码二次写入，会覆盖掉之前写入的内容，我们在构建ui的时候进行写入即可。

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->textEdit->setPlainText("战神1\n""战神柏柏");
}

②Plain Text Edit

Plain Text Edit跟Text Edit是相同的，唯一的区别就是Plain中必须是纯文本。

• 给Plain控件输入值的方式跟上面讲的Text Edit输入是一样的

在我们学习编程语言的时候，既然有输入，那必然也少不了输出🧐
这里结合我们最开始的PushButton控件，单击PushButton的时候对Text文本框进行获取内容

void Widget::on_pushButton_clicked()
{
    QString str;//Qt的字符串
    str=ui->textEdit->toPlainText();//获取多行内容
    QMessageBox::information(this,"内容为",str,QMessageBox::Yes|QMessageBox::No,QMessageBox::Yes);//弹框提醒
}

void Widget::on_pushButton_2_clicked()
{
    QString str;//Qt的字符串
    str=ui->plainTextEdit->toPlainText();//获取多行内容
    QMessageBox::information(this,"内容为",str,QMessageBox::Yes|QMessageBox::No,QMessageBox::Yes);//弹框提醒
}

这里会发现我们点击的是Text Edit的获取内容按钮

6. spinbox+doublespinbox

这两个都是派生自QAbstractSpinBox的，分别是整数调节按钮和浮点数调节按钮，功能基本是一样的，只是精度不一样

• 调解时非法加:(像我自己就喜欢点着按钮自己加) ，选择非法加就可以突飞猛进的增长👀

• 后缀：就是在后面添加东西（前缀也是一样的道理）

• 步长：每按一下，增长多少

这里就解释这些，大家如果还有不懂的，可以在评论区问我👾

7. TimeEdit+DateEdit+TimeDateEdit

TimeEdit：只显示时间，可以设置到毫秒
DateEdit：显示年月日
TimeDateEdit：显示年月日和时间（时TimeEdit和DateEdit的综合版）

这里我写了一个获取当前时间的软件，并且可以根据当前时间随时更新，也结合了前面的控件，综合学习，这里也是用的widge窗口

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTime>
#include <QTimer>
#include <QDate>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

private slots:
    void on_timeEdit_timeChanged(const QTime &time);

//    void on_dateEdit_dateTimeChanged(const QDateTime &dateTime);

//    void on_dateTimeEdit_dateTimeChanged(const QDateTime &dateTime);
/*这里前面两行库忽略掉，因为是为了做lable控件，因为步骤都是一样的，所以只做了一个，剩下的就是照着前面做就行，一模一样*/
    void timeslots1();//设置槽函数

    void timeslots2();//设置槽函数

    void timeslots3();//设置槽函数

private:
    Ui::Widget *ui;
    QTimer qtimer;//定义计时器
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    qtimer.start(1);//启动计时器 时间间隔1毫秒

    QTime time=QTime::currentTime();//获取时间 时分秒
    ui->timeEdit->setTime(time);//设置时间

    QDate time2=QDate::currentDate();//获取时间 年月日
    ui->dateEdit->setDate(time2);//设置时间

    QDateTime time3=QDateTime::currentDateTime();//获取时间  年月日 时分秒
    ui->dateTimeEdit->setDateTime(time3);//设置时间

    connect(&qtimer,&QTimer::timeout,this,&Widget::timeslots1);//连接自定义槽函数
    connect(&qtimer,&QTimer::timeout,this,&Widget::timeslots2);//连接自定义槽函数
    connect(&qtimer,&QTimer::timeout,this,&Widget::timeslots3);//连接自定义槽函数
}

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

void Widget::on_timeEdit_timeChanged(const QTime &time)
{
    ui->label->setText(time.toString("hh:mm:ss"));//当计时器改变时lable控件赋值当前时间
}

//void Widget::on_dateEdit_dateTimeChanged(const QDateTime &dateTime)
//{

//}

//void Widget::on_dateTimeEdit_dateTimeChanged(const QDateTime &dateTime)
//{

//}

void Widget::timeslots1()
{
    ui->timeEdit->setTime(QTime::currentTime());//设置当前时间
}

void Widget::timeslots2()
{
    ui->dateEdit->setDate(QDate::currentDate());//设置当前时间
}

void Widget::timeslots3()
{
    ui->dateTimeEdit->setDateTime(QDateTime::currentDateTime());//设置当前时间
}

效果图
这里是真的不会gif图，只能截图展示，他其实是动态变更时间的

这里有的小伙伴就要看不懂了，下面我给大家做一下详细的解释。
①首先，我们先抛去信号与槽，看.cpp中的ui构建里面是获取当前时间，接着我们就需要将对应的控件赋上时间（这里我用了三个控件，所以就是三个获取时间，因为表现的形式不一样，所以对应的获取时间的类型也是不一样的）。
②我们给控件赋上时间之后，他不会一直改变，我们必须要对他进行不停的刷新（这就要用到我们前面学到的信号与槽，详见我第一节博客）。
③设置计时器，在对应的.h下slots中设置槽函数，槽函数中做的操作就是不停的赋上时间
④再用connect进行连接，当时间发出信号后，对应的槽函数就会响应，从而达到不停止的更新时间的效果

---

如何在lable中显示时间
这个是最简单的了，在之前的控件中，就用到了lable获取内容，我们定义一个Edit的槽函数，当他发生改变时，对应槽函数内，用ui下的lable设置文本，文本信息转为string类型，从而得到时间

8. dial

这里他就是一个小转盘,拖动按钮可以任意旋转

这个控件没什么东西可以用

9. Scroll Bar+Slider

这个控件就是我们屏幕侧栏的滚动条，但是对于Qt和后面的容器来说，这个滚动调几乎不怎么用 最重要的是我也没怎么用过 ，这里就给uu们放上图片看一下啦。

---

✨总结✨

这里基本上QT的所有控件都包含了(后面还有几个我后续会更新)，经常用的控件，我也写的对应的实例，也与之前的控件结合，相信大家也可以理解，每一行我都写了注释，还有不明白的，大家可以评论区问我 也可以互相讨论，也欢迎各位大佬指正我的问题和笔记上有错误以及不足的地方，大家喜欢的可以一键三连。当然代码永远不能只靠记，还是要多敲才是有用的

---