企业官网建设流程全解析

于此止？：个人主页

本文选自专栏《QT百日筑基篇》

❄️个人专栏传送门：《Linux篇》 《算法篇》 《Linux网络》

《C++与STL剖析篇》 《数据结构篇》 《Python基础篇》 《嵌入式砺剑录》

⭐️纵有狂风拔地起，我亦乘风破万里⭐️

按钮类控件

目录/索引

目录

按钮类控件

目录/索引

一、PushButton：普通按钮

test：设置我们控件的文本

icon：设置我们对应的图标

shortcut：设置我们按钮的快捷键

autoRepeat：设置按钮怎么进行触发

autoRepeatDelay：设置鼠标按下多久触发我们的连续触发。

autoRepeaDelay:设置我们的触发周期

二、RadioButton:单选按钮

Checkable：按钮是否能被选中

Ckecked：按钮是否已经被选中

autoExclusive：设置按钮是否排他

分组机制

三、CheckBox：复选按钮

四、对应信号的介绍

clicked（）：我们这个是点击后放开才出现我们对应的文字信息。

clicked(bool):bool checked：代表点击完成之后，按钮当前的checked选中状态。

pressed：按下的一瞬间触发这个信号

released：按下不触发，但是抬起会触发

toggled：切换时触发，我们的对应信息由true变为false或者由false变为true的

五、ToolButton：工具按钮

一、PushButton：普通按钮

Qpushbutton是我们最熟悉的一个控件了，表示一个按钮，Qpushbutton继承自QAbstractbutton这个类，这个类是一个抽象类。什么是抽象类呢？我们在cpp的学到过，我们的抽象类是一个纯虚函数，这个类无法实例化出我们对应的实例。

我们在创建的时候我们在我们的右侧的工具栏也能看到继承自QAbstractbutton这个类。

我们都是使用这个类的属性。

我们对应的一些操作合集。

test：设置我们控件的文本

这个之前我们也是用很多次了这里不说了。

icon：设置我们对应的图标

我们这里的按钮也有对应的图标我们可以进行设置，我们之前学过我们窗口的设置，所以这里我们对应的操作类似。

我们对应的按钮也有对应的图标。如下

我们这里还是使用我们的qrc机制，当我们的图片过多的时候我们可以创建一个文件夹来储存我们对应的图片

我们可以在这设置一下我们对应的图标，它非常的小，所以在这我们需要下面的API来将它进行放大。别忘了使用我们的icon要包含我们对应的头文件。

#include<QIcon>

iconSize：将我们的图标进行放大

我们这再传入的时候要包含一个叫做QSize的子类。这个一般用于我们的这些控件的大小这里我们设置为匿名的。我们运行就能看到我们的狗头变大了。

我们这里多设置几个。

我们这里在增加4个按钮，我们在这设置一下，我们以后点击某个按钮，图标就像哪个位置进行对应的移动。

QIcon con(":/image/black_dog.png"); ui->Screen->setIcon(con); ui->Screen->setIconSize(QSize(120,120)); ui->pushButton_up->setIcon(QIcon(":/image/up")); ui->pushButton_up->setIconSize(QSize(60,60)); ui->pushButton_down->setIcon(QIcon(":/image/down")); ui->pushButton_down->setIconSize(QSize(60,60)); ui->pushButton_left->setIcon(QIcon(":/image/left")); ui->pushButton_left->setIconSize(QSize(60,60)); ui->pushButton_right->setIcon(QIcon(":/image/right")); ui->pushButton_right->setIconSize(QSize(60,60));

void Widget::on_pushButton_up_clicked() { QRect rect = ui->Screen->geometry(); rect.translate(0,-5); ui->Screen->setGeometry(rect); } void Widget::on_pushButton_down_clicked() { QRect rect = ui->Screen->geometry(); rect.translate(0,5); ui->Screen->setGeometry(rect); } void Widget::on_pushButton_right_clicked() { QRect rect = ui->Screen->geometry(); rect.translate(5,0); ui->Screen->setGeometry(rect); } void Widget::on_pushButton_left_clicked() { QRect rect = ui->Screen->geometry(); rect.translate(-5,0); ui->Screen->setGeometry(rect); }

我们现在要给我们的移动键设置一下我们的快捷键。

shortcut：设置我们按钮的快捷键

shortcut：

• n.近路；捷径，快捷方法；（电脑操作中的）快捷方式；（计算机）快捷键
• v.通过使用捷径缩短（路线、程序等）；抄近道

ui->pushButton_up->setShortcut(QKeySequence("w"));//设置单个字母 ui->pushButton_down->setShortcut(QKeySequence("ctrl+s"));//设置配合的快捷键 ui->pushButton_left->setShortcut(QKeySequence("ctrl+a")); ui->pushButton_right->setShortcut(QKeySequence("ctrl+d"));

我们这样每次都要进行构建我们的QKeySequence。我们这样有个错误的就是我们每一次都要编写我们对应的控制键，但是我们要万一出现错误他是不显示我们对应的错误的，所以这不是我们对应想要的结果，如果打错了我们后期debug会很困难的。所以我们qt有自己内部的方法。

ui->pushButton_up->setShortcut(Qt::Key_W);//设置单个字母 ui->pushButton_down->setShortcut(Qt::Key_S);//设置配合的快捷键 ui->pushButton_left->setShortcut(Qt::Key_A); ui->pushButton_right->setShortcut(Qt::Key_D+Qt::CTRL);

我们在创建的时候可以指明这些qt内部给我们实现的这些快捷键。我们这些内容都是什么呢？

我们来看看吧。

我们转到我们对应的定义知道我们这个对应的就是一个整形值。

autoRepeat：设置按钮怎么进行触发

我们的按钮一般有以下的触发条件：当鼠标左键按住不放时，如果设置为True，则会产生鼠标的点击事件，如果设置为false则则必须释放鼠标，再次按下才能产生点击事件。

我们在之前玩和平精英的时候我们的冲锋枪能一直按着开火键，我们的狙击枪只能一发一发的打出去，所以我们在也是设置我们的点击按钮的。

道友们可以试一下，

我这进行了尝试：1.我们鼠标连续点击的时候我们的按钮不会进行对应的连续移动

2.我们的快捷键支持我们连续的点击事件。

我们现在要将我们的鼠标设置为可连续点击。

ui->pushButton_up->setAutoRepeat(true); ui->pushButton_down->setAutoRepeat(true); ui->pushButton_left->setAutoRepeat(true); ui->pushButton_right->setAutoRepeat(true);

autoRepeatDelay：设置鼠标按下多久触发我们的连续触发。

单位ms

ui->pushButton_up->setAutoRepeatDelay(10000);

这里我们设置了按下我们的10s开始进行连续的触发。

autoRepeaDelay:设置我们的触发周期

即我们这次什么时候触发的，再过几秒再次进行我们对应的触发。

ui->pushButton_up->setAutoRepeatInterval(1000);

设置每1s进行一次点击，单位ms。

二、RadioButton:单选按钮

单旋按钮可以让我们在多个选项中进行选择一个。

作为QAbstractButton 和 QWidget的子类，上面说明的属性和用法这里都是适用的，对于我们的QRadioButton同样使用，我们也是继承我们的QAbstractButton的。

所以下面我们将给出我们对应的QAbstractButton和QRadioButton关系较大的属性。

我们这里主要是以拖拽的形式进行编写我们的代码，代码创建还要调整像素有点麻烦。

这就是我们的单选按钮的形式。那我们就来使用我们下面的方法调用吧。

Checkable：按钮是否能被选中

isCheckable：查询我们的按钮的状态，是否能被选中。

我们的按钮默认是可以被选中的，我们在下图可以看出，那我们现在要将按钮设置为不能进行对应的选中。

这里我们发现我们已将我们的是否可能被选中已经设置为false。我们这里点击后虽然我们的按钮上看不到我们点击了，但是我们还是会触发我们对应的点击信号的。所以我们可以使用我们之前使用的一个API来进行我们的操作。

使用我们的Enabled和disabled

这两个是等价的，我们随便使用一个就可以。

ui->male->setDisabled(true); ui->male->setEnabled(false);

我们发现我们的按钮变白了我们不能进行点击，我们之前虽然不能进行我们的选中，但是他能进行我们对应的点击，从而触发我们对应的点击信号。

测试代码：

#include <QDebug> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); ui->male->setCheckable(false); ui->male->setDisabled(true); ui->male->setEnabled(false); qDebug()<< ui->male->isCheckable(); qDebug()<< ui->female->isCheckable(); qDebug()<< ui->other->isCheckable(); } void Widget::on_male_clicked() { qDebug()<< "已选择男"<<endl; } void Widget::on_female_clicked() { qDebug()<< "已选择女"<<endl; } void Widget::on_other_clicked() { qDebug()<< "已选择其他"<<endl; }

Ckecked：按钮是否已经被选中

他的前提是我们的ckeckable我们的按钮得先能被选中我们才能进行选中。

setchecked：设置程序运行是否直接的选中。

我们发现我们下面没有被打印我们的文字说明，这就说明我们对应的文件并没有被我们进行手动的进行点击选择，而是我们代码刚开始运行就已经能被选中了。

issetcheck：查看我们是否已经选中

我们能从我们的打印结果来进行我们对应的查看。

代码测试：

#include <QDebug> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); ui->male->setChecked(true); ui->female->setChecked(true); qDebug()<< ui->male->isCheckable(); qDebug()<< ui->female->isCheckable(); qDebug()<< ui->other->isCheckable(); qDebug()<<"***************************"; qDebug()<< ui->male->isChecked(); qDebug()<< ui->female->isChecked(); qDebug()<< ui->other->isChecked(); } void Widget::on_male_clicked() { qDebug()<< "已选择男"<<endl; } void Widget::on_female_clicked() { qDebug()<< "已选择女"<<endl; } void Widget::on_other_clicked() { qDebug()<< "已选择其他"<<endl; }

autoExclusive：设置按钮是否排他

exclusive：

• adj独有的，专用的；高档的，昂贵的；不含……的；排外的；排斥的；全部的；唯一关心的；（新闻或报道）独家的；（条款）除外责任的；高级的，昂贵的
• n.独家新闻，独家报道

我们的按钮设置我们是否是排他的，我们的初始默认情况下是排他的。

所谓排他就是我们选择一个按钮是否会取消我们上一个按钮。

setAutoExclusive:是指我们是否排他。

我们在下面和打印结果进行查看我们对应的女和其他进行来回的切换我们的男是一直不变的。

autoexclusive

查看我们的按钮是否能选择排他。

#include <QDebug> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); ui->male->setAutoExclusive(false); qDebug()<<ui->male->autoExclusive(); } Widget::~Widget() { delete ui; } void Widget::on_male_clicked() { qDebug()<< "已选择男"<<endl; } void Widget::on_female_clicked() { qDebug()<< "已选择女"<<endl; } void Widget::on_other_clicked() { qDebug()<< "已选择其他"<<endl; }

分组机制

首先我们先要看到我们对应的问题的本质，我们可以通过下面的代码来抛出我们对应的问题

我们发现我们的按钮只能点击一次，我们不能设置为排他，因为排他会出现我们同一个项目出现两次的情况，所以这里引入我们的分组的概念。

我们将我们的代码进行分组后我们要给每一组添加上我们对应的按钮，将我们的同一类问题的按钮设置到一个组里，这样我们就能实现我们每一个组选择一个我们对应的一个选项。

界面的优化：

代码块：

#include <QDebug> #include <QButtonGroup> #include <QString> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); QButtonGroup* group1 = new QButtonGroup(this); QButtonGroup* group2 = new QButtonGroup(this); QButtonGroup* group3 = new QButtonGroup(this); group1->addButton(ui->radioButton_1); group1->addButton(ui->radioButton_2); group1->addButton(ui->radioButton_3); group1->addButton(ui->radioButton_4); group2->addButton(ui->radioButton_5); group2->addButton(ui->radioButton_6); group2->addButton(ui->radioButton_7); group2->addButton(ui->radioButton_8); group3->addButton(ui->radioButton_9); group3->addButton(ui->radioButton_10); group3->addButton(ui->radioButton_11); group3->addButton(ui->radioButton_12); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { QString str("你选择的城市是:"); if(ui->radioButton_1->isChecked()) { str+=ui->radioButton_1->text(); ui->label->setText(str); } else if(ui->radioButton_2->isChecked()) { str+=ui->radioButton_2->text(); ui->label->setText(str); } else if(ui->radioButton_3->isChecked()) { str+=ui->radioButton_3->text(); ui->label->setText(str); } else if(ui->radioButton_4->isChecked()) { str+=ui->radioButton_4->text(); ui->label->setText(str); } else { ui->label->setText("请进行选择"); } str="你选择的薪资是:"; if(ui->radioButton_5->isChecked()) { str+=ui->radioButton_5->text(); ui->label_2->setText(str); } else if(ui->radioButton_6->isChecked()) { str+=ui->radioButton_6->text(); ui->label_2->setText(str); } else if(ui->radioButton_7->isChecked()) { str+=ui->radioButton_7->text(); ui->label_2->setText(str); } else if(ui->radioButton_8->isChecked()) { str+=ui->radioButton_8->text(); ui->label_2->setText(str); } else { ui->label_2->setText("请进行选择"); } str="你选择的方向是:"; if(ui->radioButton_9->isChecked()) { str+=ui->radioButton_9->text(); ui->label_3->setText(str); } else if(ui->radioButton_10->isChecked()) { str+=ui->radioButton_10->text(); ui->label_3->setText(str); } else if(ui->radioButton_11->isChecked()) { str+=ui->radioButton_11->text(); ui->label_3->setText(str); } else if(ui->radioButton_12->isChecked()) { str+=ui->radioButton_12->text(); ui->label_3->setText(str); } else { ui->label_3->setText("请进行选择"); } }

运行：

初始：

选择：

不选

这是是一个小优化，我们只要前面的只是会了即可。

三、CheckBox：复选按钮

QCheckBox表示我们的复选按钮，可以允许选中多个。和QCheckBox最相关的属性也是ckeckable和checked都是继承自我们的QabstractButton。至于我们的QCheck独有的属性tristate用来实现我们的“三态复选框“。这个比较冷门我们以后用到了在查我们对应的官方文档即可。

初始界面：

我们选定后确认

我们全部取消选择

void Widget::on_pushButton_clicked() { QString str("你今天的选择是："); if(ui->checkBox_game->isChecked()) { str+=ui->checkBox_game->text()+' '; ui->label->setText(str); } if(ui->checkBox_sleep->isChecked()) { str+=ui->checkBox_sleep->text()+' '; ui->label->setText(str); } if(ui->checkBox_homework->isChecked()) { str+=ui->checkBox_homework->text()+' '; ui->label->setText(str); } if(ui->checkBox_sleep->isChecked() == false && ui->checkBox_game->isChecked()== false && ui->checkBox_homework->isChecked()==false) { ui->label->setText("请进行选择"); } }

四、对应信号的介绍

我们在我们的QT中会用到我们很多的信号

像我们之前使用的我们的clicked我们的点击信号。当然我们qt中不仅仅只有我们对应的点击信号，还有我们对应的其他的信号都有哪些呢？

我们来看一看：

我们主要谈一谈前几个。

clicked（）：我们这个是点击后放开才出现我们对应的文字信息。

void Widget::on_pushButton_clicked() { qDebug()<<"你好我是一个clicked（）的信号"; }

clicked(bool):bool checked：代表点击完成之后，按钮当前的checked选中状态。

void Widget::on_pushButton_2_clicked(bool checked) { qDebug()<<"你好我是一个clicked（bool）的信号"<<checked; }

pressed：按下的一瞬间触发这个信号

void Widget::on_pushButton_3_pressed() { qDebug()<<"你好我是一个pressed的信号"; }

我还没有进行松开，我们的信号就已经触发了。

released：按下不触发，但是抬起会触发

void Widget::on_pushButton_4_released() { qDebug()<<"你好我是一个released的信号"; }

toggled：切换时触发，我们的对应信息由true变为false或者由false变为true的

我们的单旋按钮点击又取消点击。就是我们的false和true之间的切换。

void Widget::on_radioButton_toggled(bool checked) { qDebug()<<"你好我是一个tiggled（bool）的信号"<<checked; }

五、ToolButton：工具按钮

toolButton和我们的pushbutton大多类似，但是我们的ToolButton主要运用于我们的工具栏，菜单等场景，这里我们先不介绍。