QT实现图片开关控件-自定义控件

        开关按钮大家应该很熟悉,在设置里面经常遇到,切换时候的滑动效果比较帅气。通常说的开关按钮,有两个状态:on、off。大部分的开关按钮控件,基本上有两大类,第一类是纯代码绘制,这种对代码的掌控度要求比较高,但是灵活性比较好。第二类是贴图,专业的美工做好的各种状态的背景图片,只需要用代码将该图片画到界面上即可。下面,先介绍一种利用贴图来实现的开关按钮。想看纯代码实现的开关按钮请移步:

https://blog.csdn.net/u012959478/article/details/140430844

一、简述

         使用QT实现图片开关控件,即各种状态的背景图片实现开关按钮。

二、 设计思路

        在Qt中,可以通过继承QWidget类来创建一个自定义的图片开关控件。以下是一个简单的自定义控件示例,它可以显示一个带有两种状态的图片(开启和关闭),并且可以通过鼠标点击进行切换状态。        

实现带贴图的开关按钮可以按照以下步骤进行:

  1. 导入需要使用的贴图文件,并添加到项目资源中。
  2. 设计一个开关按钮。
  3. 设置按钮的初始状态,并加载对应的贴图。
  4. 在按钮的点击事件中,切换按钮的状态,并更新贴图。
  5. 根据按钮的状态,执行相应的操作。
三、效果 

四、核心代码  
1、头文件
#ifndef IMAGESWITCH_H
#define IMAGESWITCH_H#include <QWidget>
class ImageSwitch : public QWidget
{Q_OBJECTQ_ENUMS(ButtonStyle)Q_PROPERTY(bool isChecked READ getChecked WRITE setChecked)Q_PROPERTY(ButtonStyle buttonStyle READ getButtonStyle WRITE setButtonStyle)public:enum ButtonStyle {ButtonStyle_1 = 0,  //开关样式1ButtonStyle_2 = 1,  //开关样式2ButtonStyle_3 = 2   //开关样式3};explicit ImageSwitch(QWidget *parent = 0);protected:void mousePressEvent(QMouseEvent *);void paintEvent(QPaintEvent *event);private:bool isChecked;             //是否选中ButtonStyle buttonStyle;    //按钮样式QString imgOffFile;         //关闭图片QString imgOnFile;          //开启图片QString imgFile;            //当前图片public://默认尺寸和最小尺寸QSize sizeHint() const;QSize minimumSizeHint() const;//获取和设置是否选中bool getChecked() const;void setChecked(bool isChecked);//获取和设置按钮样式ButtonStyle getButtonStyle() const;void setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle);Q_SIGNALS:void checkedChanged(bool checked);
};#endif // IMAGESWITCH_H
2、实现代码
#include "imageswitch.h"
#include <QPainter>ImageSwitch::ImageSwitch(QWidget *parent) : QWidget(parent)
{isChecked = false;buttonStyle = ButtonStyle_2;imgOffFile = ":/image/imageswitch/btncheckoff2.png";imgOnFile = ":/image/imageswitch/btncheckon2.png";imgFile = imgOffFile;
}void ImageSwitch::mousePressEvent(QMouseEvent *)
{imgFile = isChecked ? imgOffFile : imgOnFile;isChecked = !isChecked;Q_EMIT checkedChanged(isChecked);this->update();
}void ImageSwitch::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.setRenderHints(QPainter::SmoothPixmapTransform);QImage img(imgFile);img = img.scaled(this->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);//按照比例自动居中绘制int pixX = rect().center().x() - img.width() / 2;int pixY = rect().center().y() - img.height() / 2;QPoint point(pixX, pixY);painter.drawImage(point, img);
}QSize ImageSwitch::sizeHint() const
{return QSize(87, 28);
}QSize ImageSwitch::minimumSizeHint() const
{return QSize(87, 28);
}bool ImageSwitch::getChecked() const
{return isChecked;
}void ImageSwitch::setChecked(bool isChecked)
{if (this->isChecked != isChecked) {this->isChecked = isChecked;imgFile = isChecked ? imgOnFile : imgOffFile;this->update();}
}ImageSwitch::ButtonStyle ImageSwitch::getButtonStyle() const
{return this->buttonStyle;
}void ImageSwitch::setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle)
{if (this->buttonStyle != buttonStyle) {this->buttonStyle = buttonStyle;if (buttonStyle == ButtonStyle_1) {imgOffFile = ":/image/imageswitch/btncheckoff1.png";imgOnFile = ":/image/imageswitch/btncheckon1.png";this->resize(87, 28);} else if (buttonStyle == ButtonStyle_2) {imgOffFile = ":/image/imageswitch/btncheckoff2.png";imgOnFile = ":/image/imageswitch/btncheckon2.png";this->resize(87, 28);} else if (buttonStyle == ButtonStyle_3) {imgOffFile = ":/image/imageswitch/btncheckoff3.png";imgOnFile = ":/image/imageswitch/btncheckon3.png";this->resize(96, 38);}imgFile = isChecked ? imgOnFile : imgOffFile;setChecked(isChecked);this->update();updateGeometry();}
}

        这个自定义控件ImageSwitch提供了基本的开关功能,通过鼠标点击可以在开启和关闭状态之间切换,并且在状态改变时发出一个信号,允许父控件或主窗口作出相应的处理。你可以根据需要对控件进行自定义和扩展。

五、使用示例

以下是一个简单的示例代码,演示了如何在Qt中使用此控件:

#include "frmimageswitch.h"
#include "ui_frmimageswitch.h"
#include "qdebug.h"frmImageSwitch::frmImageSwitch(QWidget *parent) : QWidget(parent), ui(new Ui::frmImageSwitch)
{ui->setupUi(this);this->initForm();
}frmImageSwitch::~frmImageSwitch()
{delete ui;
}void frmImageSwitch::initForm()
{ui->imageSwitch1->setChecked(true);ui->imageSwitch2->setChecked(true);ui->imageSwitch3->setChecked(true);ui->imageSwitch1->setFixedSize(160,60);ui->imageSwitch2->setFixedSize(160,60);ui->imageSwitch3->setFixedSize(160,60);ui->imageSwitch1->setButtonStyle(ImageSwitch::ButtonStyle_1);ui->imageSwitch2->setButtonStyle(ImageSwitch::ButtonStyle_2);ui->imageSwitch3->setButtonStyle(ImageSwitch::ButtonStyle_3);//绑定选中切换信号connect(ui->imageSwitch1, SIGNAL(checkedChanged(bool)), this, SLOT(checkedChanged(bool)));connect(ui->imageSwitch2, SIGNAL(checkedChanged(bool)), this, SLOT(checkedChanged(bool)));connect(ui->imageSwitch3, SIGNAL(checkedChanged(bool)), this, SLOT(checkedChanged(bool)));
}void frmImageSwitch::checkedChanged(bool checked)
{qDebug() << sender() << checked;
}

        在上面的示例中,按钮的初始状态为开启,通过设置按钮的 setchecked 进行状态切换。在切换状态时,根据按钮的状态加载对应的贴图,并设置贴图的大小。同时,根据按钮的状态进行相应的操作。需要注意的是,示例中的 on.png 和 off.png 是虚拟的贴图文件,请根据实际情况导入和设置贴图。

        谢谢你的关注和阅读,希望我的回答能帮到你。如果还有其他问题,欢迎随时向我提问。祝你一切顺利!

六、源代码下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3247982.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

WEB前端06-BOM对象

BOM浏览器对象模型 浏览器对象模型&#xff1a;将浏览器的各个组成部分封装成对象。是用于描述浏览器中对象与对象之间层次关系的模型&#xff0c;提供了独立于页面内容、并能够与浏览器窗口进行交互的对象结构。 组成部分 Window&#xff1a;浏览器窗口对象 Navigator&…

PHP手边酒店多商户版平台小程序系统源码

&#x1f3e8;【旅行新宠】手边酒店多商户版小程序&#xff0c;一键解锁住宿新体验&#xff01;&#x1f6cc; &#x1f308;【开篇&#xff1a;旅行新伴侣&#xff0c;尽在掌握】&#x1f308; 还在为旅行中的住宿选择而纠结吗&#xff1f;是时候告别繁琐的搜索和比价过程&a…

Java反射机制基础知识赏析、接口、实现类、方法

前言 最近打算手写一个RPC&#xff0c;但奈何自己Java基础知识中的反射就很欠缺&#xff0c;第一章就看不太懂了&#xff0c;特地编写了几个小Demo验证一下Java中关于反射的基础知识。 目录组织结构 代码编写 // TestService接口 package reflect.testServices;import main.v…

基于asp.net 在线订票管理系统 设计与实现

博主介绍&#xff1a;专注于Java .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的可以…

Vue封装文件上传组件(支持图片、PDF、Excel、word预览下载)

一、准备工作 安装预览依赖包&#xff1a;exceljs、mammoth、vue-pdf 二、封装组件 文件上传组件 fileUploadPro.vue。默认预览、下载是true,可通过isPreView、isDownLoad控制 <template><div style"display: flex"><el-uploadmultipleaction&qu…

使用百度语音技术实现文字转语音

使用百度语音技术实现文字转语音 SpringBootVue前后端分离项目 调用api接口需要使用AK和SK生成AccessToken,生成getAccessToken的接口有跨域限制,所以统一的由后端处理了 部分参数在控制台->语音技术->在线调试里面能找到 Controller RestController RequestMapping(&q…

【Spring Cloud】掌握Gateway核心技术,实现高效路由与转发

目录 前言示例创建一个服务提供者创建网关 创建common子项目 前言 Spring Cloud Gateway 是一个基于 Spring Boot 的非阻塞 API 网关服务&#xff0c;它提供了动态路由、请求断言、过滤器等功能。 以下是关于 Spring Cloud Gateway 的示例&#xff1a; 示例 创建一个服务提…

C#实现数据采集系统-实现功能介绍

系统介绍 我们这里主要使用C#( .Net 6)来实现一个数据采集系统&#xff0c;从0到1搭建数据采集系统&#xff0c;从系统分析&#xff0c;功能拆解&#xff0c;到一一实现 数据采集 数据采集是企业信息化和数字化转型过程中的关键环节&#xff0c;它涉及到从生产设备、传感器…

近段时间led灯性价比最高有哪几款?五款led灯性价比最高推荐

近段时间led灯性价比最高有哪几款&#xff1f;作为学生&#xff0c;在学校学习的时候会接触到电子产品&#xff0c;在夜晚回到家&#xff0c;还得接着继续读写。长时间的用眼过度&#xff0c;会导致视力下降&#xff0c;严重的话还会出现眼部疾病。所以&#xff0c;需要一个护眼…

内部函数和外部函数(例子为C语言)

​​​​ 怎么来的&#xff1f; 函数本质上是全局的&#xff0c;因为定义一个函数的目的就是这个函数与其他函数之间相互调用&#xff0c;如果不声明的话&#xff0c;一个函数既可以被本文件中的其他函数调用&#xff0c;也可以被其他文件中的函数调用。但是可以指定某些函数…

第十课:telnet(远程登入)

如何远程管理网络设备&#xff1f; 只要保证PC和路由器的ip是互通的&#xff0c;那么PC就可以远程管理路由器&#xff08;用telnet技术管理&#xff09;。 我们搭建一个下面这样的简单的拓扑图进行介绍 首先我们点击云&#xff0c;把云打开&#xff0c;点击增加 我们绑定vmn…

Streaming Video Recorder 6 视频录制 视频格式转换

Streaming Video Recorder 6 是一款功能强大的录屏和视频下载软件。它具有以下特点和功能&#xff1a; 录屏功能&#xff1a;可以录制电脑屏幕上的各种内容&#xff0c;例如操作过程、在线课程、游戏等。 视频嗅探与下载&#xff1a;能够通过粘贴链接地址&#xff0c;自动检测并…

FGF18:骨关节炎治疗靶标

成纤维细胞生长因子18&#xff08;FGF18&#xff09;属于FGF8亚家族成员&#xff0c;在细胞增殖、细胞分化和细胞迁移的调节中起重要作用&#xff0c;是正常骨化和骨骼发育所需&#xff0c;同时刺激肝脏和肠道增殖。 &#xff08;数据来源AlphaFold&#xff09; FGF18由207个氨…

Ubuntu安装virtualbox(win10)

virtualbox下载安装 1、下载virtualbox 下载路径&#xff1a;Linux_Downloads – Oracle VM VirtualBox 根据自己的Ubuntu版本选择对应的安装包下载 2、安装virtualbox 到下载路径&#xff08;一般为~/Download&#xff09;打开终端输入命令 sudo dpkg -i xxx.deb 继续执…

前瞻断言与后瞻断言:JavaScript 正则表达式的秘密武器

JavaScript 中的前瞻断言&#xff08;lookahead&#xff09;和后瞻断言&#xff08;lookbehind&#xff09;相信用过的小伙伴就知道它的威力了&#xff0c;在一些特定的需求场景下&#xff0c;可以做到四两拨千斤的作用&#xff0c;今天让我们来盘点一下在 JavaScript 正则表达…

【spring boot】初学者项目快速练手

一小时带你从0到1实现一个SpringBoot项目开发_哔哩哔哩_bilibili 一、基础知识 1.注解 二、简介 三、项目结构 1.API/Controller层 业务控制层&#xff0c;控制业务层Service&#xff0c;并把数据返回给移动端和前端&#xff0c;直接转发Service的业务处理结果&#xff0c;…

Lora模型训练的参数-学习笔记

任何一个lora都会有三重属性&#xff0c;易调用性、泛化性和还原性&#xff0c;任何一个lora只能完美满足其中的两项&#xff1b; 易调用性&#xff1a;在已调用lora后&#xff0c;还需要多少提示词才能让该lora完全生效&#xff1b; 泛化性&#xff1a;能不能还原lora训练素…

新电脑怎么装系统?一文带你轻松搞定

对于刚刚购置的新电脑&#xff0c;安装操作系统是必不可少的一步。一个高效、稳定的操作系统能让您的新电脑发挥出最佳性能。本文将介绍新电脑怎么装系统的3种方法&#xff0c;每种方法都提供了详细的步骤说明&#xff0c;帮助您顺利完成系统安装。 方法1&#xff1a;通过网络安…

Java中锁的全面详解(深刻理解各种锁)

一.Monitor 1. Java对象头 以32位虚拟机位例 对于普通对象,其对象头的存储结构为 总长为64位,也就是8个字节, 存在两个部分 Kclass Word: 其实也就是表示我们这个对象属于什么类型,也就是哪个类的对象.而对于Mark Word.查看一下它的结构存储 64位虚拟机中 而对于数组对象,我…

基于python旅游景点满意度分析设计与实现

1.1研究背景与意义 1.1.1研究背景 随着旅游业的快速发展&#xff0c;满意度分析成为评估旅游景点质量和提升游客体验的重要手段。海口市作为中国的旅游城市之一&#xff0c;其旅游景点吸引了大量游客。然而&#xff0c;如何科学评估和提升海口市旅游景点的满意度&#xff0c;…