QT自定义滑动开关

最新推荐文章于 2024-07-25 20:31:10 发布
最新推荐文章于 2024-07-25 20:31:10 发布
阅读量4.2k 收藏 13
点赞数 2
分类专栏： QT C++ 文章标签： qt 源码 滑动 开关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxzysk/article/details/70053747
版权
C++ 同时被 2 个专栏收录
14 篇文章 2 订阅
订阅专栏
QT
4 篇文章 2 订阅
订阅专栏

通过绘制的方式实现自定义滑动开关，这个网上有很多了，今天自己在别人基础上进行了修改与优化，做了一个简单且好用的版本，在此记录一下，给需要的朋友参考。
源码下载地址：http://download.csdn.net/detail/dxzysk/9810692

绘制背景


void CSwitchWidget::DrawPressBkGround(QPainter *painter, QRect &rect, uchar state)
{
	QBrush		oldbrush = painter->brush();
	QPen		oldpen   = painter->pen();		
	painter->save();

	int panestyle = GetPressStyle();

	int	x1 = rect.left(); int y1 = rect.top();
	int	x2 = rect.right(); int y2 = rect.bottom();
	int width = rect.width(); int height = rect.height();
	
	if (panestyle == GRAPH_PRESSSTYLE_SYSTEM1) {		
		if (state > 0) {		
			painter->setPen(Qt::NoPen);
			QLinearGradient linGrad(rect.left(), rect.top(), rect.left(), rect.bottom());
			linGrad.setColorAt(0, m_onbkcolor1);
			linGrad.setColorAt(1, m_onbkcolor2);
			linGrad.setSpread(QGradient::PadSpread);
			painter->setBrush(linGrad);

			painter->drawRoundedRect(rect, 5.0, 5.0);
		}
		else {					
			painter->setPen(Qt::NoPen);
			QLinearGradient linGrad(rect.left(), rect.top(), rect.left(), rect.bottom());
			linGrad.setColorAt(0, m_offbkcolor1);
			linGrad.setColorAt(1, m_offbkcolor2);
			linGrad.setSpread(QGradient::PadSpread);
			painter->setBrush(linGrad);
	
			painter->drawRoundedRect(rect, 5.0, 5.0);
		}

		painter->setBrush(Qt::NoBrush);
		QPen tmppen(Qt::darkGray);
		tmppen.setWidth(2.0);
		painter->setPen(tmppen);
		painter->drawRoundedRect(rect, 5.0, 5.0);
	}
	else if (panestyle == GRAPH_PRESSSTYLE_SYSTEM2) {	
		//path
		QPainterPath path;

		path.moveTo(x1 + height / 2.0, y1);
		path.arcTo(QRectF(x1, y1, height, height), 90, 180);
		path.lineTo(x2 - height / 2.0, y2);
		path.arcTo(QRectF(x2 - height, y1, height, height), 270, 180);
		path.lineTo(x1 + height / 2.0, y1);

		QPainterPath pathrect;
		pathrect.moveTo(rect.left(), rect.top());
		pathrect.lineTo(rect.left(), rect.bottom());
		pathrect.lineTo(rect.right(), rect.bottom());
		pathrect.lineTo(rect.right(), rect.top());
		pathrect.lineTo(rect.left(), rect.top());

		QPainterPath interpath = path.intersected(pathrect);

		if (state > 0) {		
			painter->setPen(Qt::NoPen);
			QLinearGradient linGrad(rect.left(), rect.top(), rect.left(), rect.bottom());
			linGrad.setColorAt(0, m_onbkcolor1);
			linGrad.setColorAt(1, m_onbkcolor2);
			linGrad.setSpread(QGradient::PadSpread);
			painter->setBrush(linGrad);
			painter->drawPath(interpath);
		}
		else {					
			painter->setPen(Qt::NoPen);
			QLinearGradient linGrad(rect.left(), rect.top(), rect.left(), rect.bottom());
			linGrad.setColorAt(0, m_offbkcolor1);
			linGrad.setColorAt(1, m_offbkcolor2);
			linGrad.setSpread(QGradient::PadSpread);
			painter->setBrush(linGrad);
			painter->drawPath(interpath);
		}
		painter->setBrush(Qt::NoBrush);
		painter->setPen(QColor(0, 0, 0, 255));
		painter->drawPath(interpath);
	}

	painter->restore();
	painter->setPen(oldpen);
	painter->setBrush(oldbrush);
}

绘制文字


void CSwitchWidget::DrawPressText(QPainter *painter, QRect &rect, uchar state)
{
	QBrush oldbrush = painter->brush();
	QPen	  oldpen   = painter->pen();		
	painter->save();
	
	
	int	x1 = rect.left(); int y1 = rect.top();
	int	x2 = rect.right(); int y2 = rect.bottom();
	int width = rect.width(); int height = rect.height();

	QPen tmppen(m_textcolor);

	if (state > 0) {		
		painter->setFont(m_textfont);
		painter->setPen(tmppen);
		painter->drawText((int)(x1 + width / 2.0), y1, (int)(width / 2.0), height, Qt::AlignCenter, m_onname);
	}
	else {					
		painter->setFont(m_textfont);
		painter->setPen(tmppen);
		painter->drawText(x1, y1, (int)(width / 2.0), height, Qt::AlignCenter, m_offname);
	}

	painter->restore();
	painter->setPen(oldpen);
	painter->setBrush(oldbrush);
}

绘制滑动条


void CSwitchWidget::DrawPressSlide(QPainter *painter, QRect &rect, uchar state)
{
	QBrush oldbrush = painter->brush();
	QPen	  oldpen   = painter->pen();		
	painter->save();
	
	int panestyle = GetPressStyle();
	
	int	x1 = rect.left(); int y1 = rect.top();
	int	x2 = rect.right(); int y2 = rect.bottom();
	int width = rect.width(); int height = rect.height();

	QRect sliderect;

	if (panestyle == GRAPH_PRESSSTYLE_SYSTEM1) {		
		if (state > 0) {		
			sliderect.setLeft(rect.left() + 2); 
			sliderect.setTop(rect.top() + 2);
			sliderect.setWidth((int)(rect.width() / 2.0 - 4));
			sliderect.setHeight(rect.height() - 4);

			painter->setPen(Qt::NoPen);
			QLinearGradient linGrad(rect.left(), rect.top(), rect.left(), rect.bottom());
			linGrad.setColorAt(0, m_slidecolor1);
			linGrad.setColorAt(1, m_slidecolor2);
			linGrad.setSpread(QGradient::PadSpread);
			painter->setBrush(linGrad);

			painter->drawRoundedRect(sliderect, 5.0, 5.0);
		}
		else {					
			sliderect.setLeft(rect.right() - (int)(rect.width() / 2.0) + 2); 
			sliderect.setTop(rect.top() + 2);
			sliderect.setWidth((int)(rect.width() / 2.0 - 4));
			sliderect.setHeight(rect.height() - 4);

			painter->setPen(Qt::NoPen);
			QLinearGradient linGrad(rect.left(), rect.top(), rect.left(), rect.bottom());
			linGrad.setColorAt(0, m_slidecolor1);
			linGrad.setColorAt(1, m_slidecolor2);
			linGrad.setSpread(QGradient::PadSpread);
			painter->setBrush(linGrad);
			
			painter->drawRoundedRect(sliderect, 5.0, 5.0);
		}

		painter->setBrush(Qt::NoBrush);
		painter->setPen(QColor(0, 0, 0, 255));
		painter->drawRoundedRect(sliderect, 5.0, 5.0);

		painter->setPen(QColor(54, 54, 54));
		painter->drawLine(sliderect.left() + sliderect.width() / 2.0,	  sliderect.top() + sliderect.height() / 4.0 + 2, sliderect.left() + sliderect.width() / 2.0, sliderect.bottom() - sliderect.height() / 4.0 - 2);
		painter->drawLine(sliderect.left() + sliderect.width() / 2.0 - 5, sliderect.top() + sliderect.height() / 4.0 + 2, sliderect.left() + sliderect.width() / 2.0 - 5, sliderect.bottom() - sliderect.height() / 4.0 - 2);
		painter->drawLine(sliderect.left() + sliderect.width() / 2.0 + 5, sliderect.top() + sliderect.height() / 4.0 + 2, sliderect.left() + sliderect.width() / 2.0 + 5, sliderect.bottom() - sliderect.height() / 4.0 - 2);

		painter->setPen(QColor(134, 134, 134));
		painter->drawLine(sliderect.left() + sliderect.width() / 2.0 + 1,	  sliderect.top() + sliderect.height() / 4.0 + 2, sliderect.left() + sliderect.width() / 2.0 + 1, sliderect.bottom() - sliderect.height() / 4.0 - 2);
		painter->drawLine(sliderect.left() + sliderect.width() / 2.0 - 5 + 1, sliderect.top() + sliderect.height() / 4.0 + 2, sliderect.left() + sliderect.width() / 2.0 - 5 + 1, sliderect.bottom() - sliderect.height() / 4.0 - 2);
		painter->drawLine(sliderect.left() + sliderect.width() / 2.0 + 5 + 1, sliderect.top() + sliderect.height() / 4.0 + 2, sliderect.left() + sliderect.width() / 2.0 + 5 + 1, sliderect.bottom() - sliderect.height() / 4.0 - 2);
	}
}

测试


SwitchTestDialog::SwitchTestDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::SwitchTestDialog)
{
    //ui->setupUi(this);
    this->setWindowTitle("SwitchTest");
    resize(400, 300);

    //    QPushButton* btn = new QPushButton(this);
    //     btn->setGeometry(QRect(50, 150, 301, 50));

    QLabel *label1 = new QLabel("swich button1:", this);
    //label1->setObjectName(QStringLiteral("label"));
    label1->setGeometry(QRect(10, 30, 200, 50));
    CSwitchWidget* wigt = new CSwitchWidget(this);
    //wigt->SetPressStyle(GRAPH_PRESSSTYLE_SYSTEM2);
    wigt->setGeometry(QRect(150, 30, 200, 50));
    wigt->SetSwitchState(1);


    QLabel *label2 = new QLabel("swich button2:", this);
    //label1->setObjectName(QStringLiteral("label"));
    label2->setGeometry(QRect(10, 130, 200, 50));
    CSwitchWidget* wigt2 = new CSwitchWidget(this);
    wigt2->SetPressStyle(GRAPH_PRESSSTYLE_SYSTEM2);
    wigt2->setGeometry(QRect(150, 130, 150, 50));
    wigt2->SetSwitchState(1);
}

测试结果

这里写图片描述

dxzysk
关注
专栏目录
QT纯代码实现滑动开关控件
u012959478的博客
07-15 1245
开关按钮大家应该很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。通常说的开关按钮，有两个状态：on、off。大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好。第二类是贴图，专业的美工做好的各种状态的背景图片，只需要用代码将该图片画到界面上即可。本文介绍一种实现纯代码绘制的开关按钮。
Qt 之自定义控件（开关按钮）
最新发布
皮牙子快跑的博客
09-26 479
在鼠标点击时间中，根据当前按钮的状态，true是打开，false是关闭，改变动画移动的方向，并且改变背景颜色，已经圆形按钮的颜色。利用动画类QPropertyAnimation，点击按钮时，背景色和圆形按钮在一定时间内移动到对面。注意圆形按钮和背景色控件的初始大小一样。
QT自定义之滑动开关
12-17
本文实例为大家分享了QT自定义之滑动开关的具体代码，供大家参考，具体内容如下 写了一个简单的滑动开关， 不多说，上图： 代码如下： #ifndef SLIDERBUTTON_H #define SLIDERBUTTON_H #include <QWidget> #include <QMouseEvent> #include <QPaintEvent> #include <QPainter> #include <QPen> #include <QPainterPath> #include <QColor> #include <QTimer> #include <QDebug> namespa
QT自定义控件--滑动按钮
贝勒里恩的博客
05-15 4214
文章目录一、效果展示二、绘制过程2.1、控件分析2.2、原理详解2.3、绘制背景框2.4、绘制滑块2.5、其余代码 一、效果展示 二、绘制过程 2.1、控件分析 滑动按钮主要由背景框和滑块组成。当点击按钮的时候，滑块就会滑到另一边，相应的背景框和滑块的颜色都会发生切换，所以可以将任务细分为三个：绘制背景框、绘制滑块、实现点击滑动。 2.2、原理详解 滑动按键的功能是：点击按钮时，滑块会滑动到另一边；为了捕捉点击动作就必须写一个按钮点击事件mousePressEvent()。为了实现滑块平滑的移动，可以使用
qt 滑动按钮
05-30
qt QPainter 自绘滑动按钮，类似苹果手机滑动效果；可以用在界面美化程序
Qt之自定义控件（滑动开关按钮）+源码
热门推荐
xbean1028的博客
04-03 1万+
Qt之自定义控件（滑动开关按钮） 目录Qt之自定义控件（滑动开关按钮）说明主要实现实现源码一实现源码二 说明 本文主要介绍QT的两种滑动开关按钮的实现，附上源码记录以备二次开发 源码附基本注释 滑动开关效果： 主要实现 重写鼠标按下事件（mousePressEvent）、释放事件（mouseReleaseEvent），用于切换开关状态。 重写绘制事件（paintEvent），用于绘制开关效果。...
qt5仿安卓苹果自定义滑动开关控件.rar
09-28
本示例提供的"qt5仿安卓苹果自定义滑动开关控件.rar"就是一个这样的实践，它实现了类似Android和iOS系统中的滑动开关（Slider或Switch）组件，能够清晰地显示开关的状态，并且通过使用定时器来控制滑动动画，增加了...
QT6.4制作滑动开关组件SwitchButton
cwx133的专栏
10-16 1872
SwitchButton是滑动按钮组件，可开启/关闭滑动动画效果，可指定大小，可指定背景色和滑块颜色及文字颜色，可设定文字及字体。 LineSwitch是形条组件，其包含了图标+文字条+SwitchButton，可指定大小，可指定背景渐变色和文字颜色，可设定文字及字体。
【Qt自定义控件】思路详解（“滑动开关”为例）
Xiao_Ley的博客
01-22 1776
通过一个“滑动开关”自定义控件，来向大家分享创建Qt自定义控件的思路以及思路产生步骤，干货满满，不要错过！
Qt滑动开关源码
12-28
最近再找一个QT下滑动开关的素材没找到想要的，就用纯代码实现了个类似滑动的开关，可供使用，对接触QT的学者在2D 绘图学习有较大的帮助
QT，点击按钮，动态图片滑动效果
10-18
由于需要，临时写的一个简单的点击按钮，图片动态滑动效果。本人开发环境是VS2013+qt5.6，用其他版本的VS和Qt重新编译就行
qt 制作的可以左右滑动的导航栏
06-06
使用qt代码实现导航栏的动态左右滑动效果，代码简单易懂。
QT自绘滑动开关按钮
小米的修行之路
08-10 5196
一、借鉴于飞杨青云的思想，进行修改： 1、使用鼠标妥当滑块，拖到左边为“关”，拖到右边为“开”。 2、释放鼠标时判断开关，并发射开、关状态信号。 3、关状态时滑块为黑色，拖动状态时为红色，开状态时滑块为蓝色。 二、类的封装： #ifndef SWITCHBUTTON_H #define SWITCHBUTTON_H #include &lt;QWidget&gt; #include ...
Qt简易滑动按钮
qq_57049935的博客
01-24 1197
因为要做智能家居的控制界面，如果直接用按钮的字开关不是很好看，之前也是做过微信小程序和网页的小项目，知道滑动开关这个东西。QT应该可以自己画出来，大致应该就是和之前的棋盘一样重写鼠标点击和绘制，在点击时用定时器作个滑动的效果。
qt自定义滑动按钮（美观且使用方便）
小土同学的博客
05-18 5076
前言 某一次qt界面需要用到类似苹果上的滑动按钮，但发现qt中并没有类似的控件。百度之后发现有位博主的自己设计了这种控件，美观度和操作性都很高。但该博主没有介绍用法，所以特此记录，以便新手使用。 链接：原文链接 先上截图： 代码： switchbutton.h #ifndef switchbutton_H #define switchbutton_H #include <QWidget> #include <QTimer> #include <QColor> cl
Qt创建一个或多个简易滑动按钮
2301_80657297的博客
07-25 684
我写的比较规律，如果还需要更多的按钮的画，可以跟着我的规律进行增加按钮，也可以进行删减，只要建立的按钮数比设计的少，也可以不用删除直接建立按钮。新手大学生， 第一次发文章，还不是很懂，有很多不足的地方西望见谅，有疑问可以直接评论，也希望指点不足之处，有空就会看评论。更改按钮位置和大小更方便，中间也可以是直接传入想要的颜色。原版链接会放在最下面。如需删除本篇文章，请联系！以下是全部代码，可以直接当CV工程师。
qt 自定义滑动条qslider
08-28
要自定义QSlider，我们可以使用Qt的样式表（StyleSheet）来改变滑动条的外观。例如，我们可以使用setStyleSheet函数来设置滑动条的背景颜色、滑块的样式等等。 此外，还可以通过重写QSlider的事件处理函数来自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值