【Qt】PushButton控件

七月巫山晴2024-08-11 13:59

PushButton控件

创建项目文件

  • 点击左上角新建文件
  • 选择应用程序
  • 项目名称（项目名称不能有中文，路径也不能有中文）：
  • 选择qmake：
    • qmake: 和下面两个一样都是构建工具，qmake用于自动生成makefile文件，支持跨平台构建，qmake编辑的是一个后缀名为.pro的文件。
    • CMake: 不是编辑器，生成一个让编译器能读懂编译流程的文件工具，让CMake自动生成构建系统。
    • Qbs: Qbs（Qt Build Suite：Qt构建套件）同qmake、CMake⼀样都是构建⼯具。Qbs号称是新⼀代的构建⼯具，⽐qmake编译速度更快。Qbs没有绑定Qt版本，它从项⽬⽂件的⾼级项⽬描述中⽣成⼀个正确的依赖表。⽽传统的MakeFile⽣成⼯具如qmake和CMake，其在⽣成MakeFile⽂件后将实际的命令交给Make⼯具去执⾏。
  • 选择QWidget：

    这三个类之间的关系如下：
  • 不添加语言包（这里的语言是中文，英语等，而不是C语言，Java等编程语言）
  • 选择Qt套件，默认只有一个，那我们就用这一个。

Qt套件是指Qt程序从编译链接到运⾏环境的全部⼯具和Qt类库的集合，对于MinGW版本Qt程序⽣成和调试，⾄少需要MinGW中的编译器g++（⾃动调⽤链接器）、g++配套的基础库、调试器gdb还有使⽤MinGW环境编译⽽成的Qt类库⾃⾝。默认情况下，在上⾯KitSelection⾥选中全部套件。

  • 选择版本控制器

  • 创建项目完成：

创建控件

我们需要明确需要做什么：也就是创建5个按钮，代表上下左右和目标被控制的对象，按下以后可以使得标签上下左右移动。

  • 点击左边栏Forms中的widget.ui进入到Qt Creator.
  • 拖动左边栏中的控件到合适的位置：

如上图创建了5个按钮。

  • 对控件的objectName修改成合适的名称：

给控件添加图片

首先在项目文件目录下准备5张图片，大家可以去阿里巴巴矢量图标库寻找合适图标。

对图片文件进行合适的命名：

导入qrc

点击完成后来到此界面：

点击Add Prefix，添加前缀:

之后我们访问图片资源的时候的目录就是/。

  • 点击add Files添加资源文件：

控件添加图片

在widget.cpp文件里面编码：

不要忘记头文件QIcon

要在构造函数里面编写，这样程序一启动就能加载图片在pushButton上。

c 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>
Widget::Widget(QWidget *parent)
   : QWidget(parent)
   , ui(new Ui::Widget)
{
   ui->setupUi(this);
   
   // 创建图标
   QIcon iconT(":/target.png");
   QIcon iconU(":/up.png");
   QIcon iconD(":/down.png");
   QIcon iconL(":/left.png");
   QIcon iconR(":/right.png");
}

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

在其后设置图标：

c 复制代码 
// 设置图标
    ui->target->setIcon(iconT);
    ui->up->setIcon(iconU);
    ui->down->setIcon(iconD);
    ui->left->setIcon(iconL);
    ui->right->setIcon(iconR);

点击左侧边栏的第二个绿色按钮运行

发现图片大小不合适，需要进行修改：

c 复制代码 
// 设置图标大小：
    ui->target->setIconSize(QSize(70,70));
    ui->up->setIconSize(QSize(40,40));
    ui->down->setIconSize(QSize(50,50));
    ui->left->setIconSize(QSize(40,40));
    ui->right->setIconSize(QSize(40,40));

运行得到：

编写槽函数

右键按钮，点击转到槽：

选择信号为clicked，当我们点击按钮时发送信号：

自动生成槽函数：

c 复制代码 
void Widget::on_up_clicked()
{
    QRect rect =  ui->target->geometry();
    ui->target->setGeometry(rect.x(), rect.y()-5, rect.width(), rect.height());
}

运行发现上移到窗口最顶端继续点击上移会消失，使用终端打印出target的位置信息：

c 复制代码 
void Widget::on_up_clicked()
{
    QRect rect =  ui->target->geometry();

    ui->target->setGeometry(rect.x(), rect.y()-5, rect.width(), rect.height());
    qDebug() << rect.x() << " " << rect.y();
}

通过打印我们发现：

当target到达最顶端时， y变成了0,我们希望target到达最顶端以后不在继续移动，可以：

c 复制代码 
void Widget::on_up_clicked()
{
    QRect rect =  ui->target->geometry();
    int y = rect.y();
    if(rect.y() <= 0){
        rect.setY(0);
    }
    else
    {
        rect.setY(y-10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), rect.width(), rect.height());
    qDebug() << rect.x() << " " << rect.y();
}

运行后：

发现原来改变rect.y()值，改变的是左上角定点的y坐标的值，所以我们需要修改：

c 复制代码 
void Widget::on_up_clicked()
{
    QRect rect =  ui->target->geometry();
    int y = rect.y();
    int h = rect.height();
    if(rect.y() <= 0){
        rect.setY(0);
    }
    else
    {
        rect.setY(y-10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), rect.width(), h);
    qDebug() << rect.x() << " " << rect.y();
}

依照此法编写其他三个槽函数：

右移槽函数的编写

c 复制代码 
void Widget::on_right_clicked()
{
    QRect rect =  ui->target->geometry();
    int x = rect.x();
    int w = rect.width();
    int g = this->geometry().width()-w;

    if(rect.x() >= g){
        rect.setX(g);
    }
    else
    {
        rect.setX(x+10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), w, rect.height());
    qDebug() << rect.x() << " " << rect.y();
}

左移槽函数的编写

c 复制代码 
void Widget::on_left_clicked()
{
    QRect rect =  ui->target->geometry();
    int x = rect.x();
    int w = rect.width();
    if(rect.x() <= 0){
        rect.setX(0);
    }
    else
    {
        rect.setX(x-10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), w, rect.height());
    qDebug() << rect.x() << " " << rect.y();
}

下移槽函数的编写

c 复制代码 
void Widget::on_down_clicked()
{
    QRect rect =  ui->target->geometry();
    int y = rect.y();
    int h = rect.height();
    int g = this->geometry().height()-h;

    if(rect.y() >= g){
        rect.setY(g);
    }
    else
    {
        rect.setY(y+10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), rect.width(), h);
    qDebug() << rect.x() << " " << rect.y();
}

自此，移动键编码完成。

连续触发设置

点击一次才移动一下，实在是太累了，我们来设置一下连续触发，长按可以重复触发：

我们在构造函数中编码：

c 复制代码 
// 设置连续触发
    ui->up->setAutoRepeat(true);
    ui->down->setAutoRepeat(true);
    ui->left->setAutoRepeat(true);
    ui->right->setAutoRepeat(true);

设置键盘快捷键

使用鼠标进行点击也不是很方便，我们来设置一下，使得使用键盘按键就能够控制移动：

c 复制代码 
// 设置快捷键
    ui->up->setShortcut(QKeySequence(Qt::Key_W));
    ui->down->setShortcut(QKeySequence(Qt::Key_S));
    ui->left->setShortcut(QKeySequence(Qt::Key_A));
    ui->right->setShortcut(QKeySequence(Qt::Key_D));

完成代码

widget.cpp

c 复制代码 
#include "widget.h"
#include "ui_widget.h"
#include <QIcon>
#include <QPushButton>
#include <QDebug>

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

    // 创建图标
    QIcon iconT(":/image/target.png");
    QIcon iconU(":/image/up.png");
    QIcon iconD(":/image/down.png");
    QIcon iconL(":/image/left.png");
    QIcon iconR(":/image/right.png");

    // 设置图标
    ui->target->setIcon(iconT);
    ui->up->setIcon(iconU);
    ui->down->setIcon(iconD);
    ui->left->setIcon(iconL);
    ui->right->setIcon(iconR);

    // 设置图标大小：
    ui->target->setIconSize(QSize(70,70));
    ui->up->setIconSize(QSize(40,40));
    ui->down->setIconSize(QSize(50,50));
    ui->left->setIconSize(QSize(40,40));
    ui->right->setIconSize(QSize(40,40));

    // 设置连续触发
    ui->up->setAutoRepeat(true);
    ui->down->setAutoRepeat(true);
    ui->left->setAutoRepeat(true);
    ui->right->setAutoRepeat(true);

    // 设置快捷键
    ui->up->setShortcut(QKeySequence(Qt::Key_W));
    ui->down->setShortcut(QKeySequence(Qt::Key_S));
    ui->left->setShortcut(QKeySequence(Qt::Key_A));
    ui->right->setShortcut(QKeySequence(Qt::Key_D));




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


void Widget::on_up_clicked()
{
    QRect rect =  ui->target->geometry();
    int y = rect.y();
    int h = rect.height();
   
    if(rect.y() <= 0){
        rect.setY(0);
    }
    else
    {
        rect.setY(y-10);
    }


    ui->target->setGeometry(rect.x(), rect.y(), rect.width(), h);
    qDebug() << rect.x() << " " << rect.y();
}

void Widget::on_right_clicked()
{
    QRect rect =  ui->target->geometry();
    int x = rect.x();
    int w = rect.width();
   
    int g = this->geometry().width()-w;

    if(rect.x() >= g){
        rect.setX(g);
    }
    else
    {
        rect.setX(x+10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), w, rect.height());
    qDebug() << rect.x() << " " << rect.y();
}

void Widget::on_left_clicked()
{
    QRect rect =  ui->target->geometry();
    int x = rect.x();
    int w = rect.width();
   
    if(rect.x() <= 0){
        rect.setX(0);
    }
    else
    {
        rect.setX(x-10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), w, rect.height());
    qDebug() << rect.x() << " " << rect.y();
}

void Widget::on_down_clicked()
{
    QRect rect =  ui->target->geometry();
    int y = rect.y();
    int h = rect.height();
    int g = this->geometry().height()-h;
   
    if(rect.y() >= g){
        rect.setY(g);
    }
    else
    {
        rect.setY(y+10);
    }
    ui->target->setGeometry(rect.x(), rect.y(), rect.width(), h);
    qDebug() << rect.x() << " " << rect.y();
}

widget.h

c 复制代码 
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_up_clicked();

    void on_right_clicked();

    void on_left_clicked();

    void on_down_clicked();
    void opacity(QRect& rect);

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

新人创作不易，你的点赞和关注都是对我莫大的鼓励，再次感谢您的观看。

相关推荐
Elastic 中国社区官方博客3 分钟前
Elasticsearch 开放推理 API 增加了对 IBM watsonx.ai Slate 嵌入模型的支持
大数据·数据库·人工智能·elasticsearch·搜索引擎·ai·全文检索
企鹅侠客7 分钟前
ETCD调优
数据库·etcd
Json_1817901448013 分钟前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
傻啦嘿哟15 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光19 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用19 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
煎饼小狗25 分钟前
Redis五大基本类型——Zset有序集合命令详解（命令用法详解+思维导图详解）
数据库·redis·缓存
爱摸鱼的孔乙己34 分钟前
【数据结构】链表（leetcode）
c语言·数据结构·c++·链表·csdn
Dola_Pan36 分钟前
C语言：数组转换指针的时机
c语言·开发语言·算法
ExiFengs36 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示