QWidget实现开关按钮

最新推荐文章于 2024-07-15 10:28:44 发布
最新推荐文章于 2024-07-15 10:28:44 发布
阅读量975 收藏 4
点赞数 1
分类专栏： QtWidget的学习之路 # Qt开发 # QtWidget绘图 文章标签： 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Thinking777/article/details/133563180
版权

文章目录

1、开关按钮效果图

在这里插入图片描述

2、自定义开关按钮的实现

首先是使用Q_PROPERTY将开关按钮的属性注册到Qt的元对象系统重，方便后续将开关控件集成到QtDesigner设计师界面中:
在这里插入图片描述
如下是开关控件的属性:
在这里插入图片描述
在绘制时，首先将上面属性中的颜色初始化:
在这里插入图片描述
然后就是通过paintEvent这个绘图事件来进行绘制，首先绘制开关按钮的背景，它的背景是一个圆角矩形，然后是绘制内部的小椭圆，小椭圆的位置在背景的左侧，当然不是完全贴合，小椭圆与背景之间有外部边距，如下是代码实现:

void SwitchButton::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    QPainterPath path;
    QColor backsColor;
    QColor circlesColor;
    //设置选中和未被选的画笔颜色
    if(this->isEnabled())
    {
        if(checked)
        {
            backsColor = pressedColor;
            circlesColor = QColor(Qt::white);
        }
        else
        {
            backsColor = backgroundColor;
            circlesColor = circleColor;
        }
    }
    else
    {
        backsColor = backgroundColor;
        circlesColor = disabledColor;
    }

    //绘制外部大圆
    painter.setBrush(backsColor);
    path.addRoundedRect(QRectF(0,0,this->width(),this->height()),qMin(this->width(),this->height())/2,qMin(this->width(),this->height())/2);
    painter.drawPath(path.simplified());
    //绘制内圆
    painter.setBrush(circlesColor);
    painter.setOpacity(1.0);
    painter.drawEllipse(QRectF(margins + xPos, margins, height() - margins*2, height() - margins* 2));
}

绘制效果如下:
在这里插入图片描述
上面使用绘图事件只实现了静态的开关按钮，点击无反应，下面是通过鼠标点击事件和鼠标松开事件以及状态改变的函数来实现开关按钮点击后动态变化的效果:

//鼠标点击(左键点击)
void SwitchButton::mousePressEvent(QMouseEvent *event)
{
    if(this->isEnabled())
    {
        if(event->buttons() & Qt::LeftButton)
        {
            event->accept();
        }
        else
        {
            event->ignore();
        }
    }
}
//鼠标松开
void SwitchButton::mouseReleaseEvent(QMouseEvent *event)
{
    if(this->isEnabled() && this->isFinish())
    {
        if(event->type() == QMouseEvent::MouseButtonRelease && event->button() == Qt::LeftButton)
        {
            event->accept();
            checked =! checked; //改变状态
            changeState(checked);//状态改变后，更改动画效果
            emit toggled(checked);
        }
        else
        {
            event->ignore();
        }
    }
}

//状态改变函数
void SwitchButton::changeState(bool state)
{
    if(state)
    {
        proAnimation->setStartValue(0);
        proAnimation->setEndValue(this->width()-this->height());
    }
    else
    {
        proAnimation->setStartValue(this->width()-this->height());
        proAnimation->setEndValue(0);
    }
    proAnimation->start();
}

3、完整代码

SwitchButton.h如下:

#ifndef SWITCHBUTTON_H
#define SWITCHBUTTON_H

#include <QWidget>
#include<QPainter>
#include<QMouseEvent>
#include<QPropertyAnimation>
#include<QResizeEvent>
#include<QtMath>

class SwitchButton : public QWidget
{
    Q_OBJECT
public:
    explicit SwitchButton(QWidget *parent = nullptr);
    //将属性注册到元对象系统中
    Q_PROPERTY(QColor backgroundColor READ getBackColor WRITE setBackColor)
    Q_PROPERTY(QColor pressedColor READ getPressedColor WRITE setPressedColor)
    Q_PROPERTY(QColor disabledColor READ getDisabledColor WRITE setDisabledColor)
    Q_PROPERTY(QColor circleColor READ getCircleColor WRITE setCircleColor)
    Q_PROPERTY(qreal xPos READ getXPos WRITE setXPos)

public:
    bool isToggled()const;
    void setToggled(bool checked);
    void setBackColor(QColor color);
    QColor getBackColor();
    void setPressedColor(QColor color);
    QColor getPressedColor();
    void setDisabledColor(QColor color);
    QColor getDisabledColor();
    void setCircleColor(QColor color);
    QColor getCircleColor();
    void setXPos(qreal xPos);
    qreal getXPos();
    void changeState(bool state);
    bool isFinish() const;

protected:
    virtual void paintEvent(QPaintEvent *event) override;
    virtual void mousePressEvent(QMouseEvent *event) override;
    virtual void mouseReleaseEvent(QMouseEvent *event) override;
    void resizeEvent(QResizeEvent *event) override;

signals:
    void toggled(bool checked);

private:
    QColor                   backgroundColor;  //背景颜色
    QColor                   pressedColor;     //点击时的背景颜色
    QColor                   disabledColor;    //无法选中的背景颜色
    QColor                   circleColor;      //小椭圆的颜色
    qreal                    xPos;              //小椭圆在背景上面的x轴的运动路径
    bool                     checked;          //是否选中小椭圆
    int                      margins;          //外边距
    QPropertyAnimation*      proAnimation;     //动画对象
};

#endif // SWITCHBUTTON_H

Switch.cpp如下:

#include "switchbutton.h"

SwitchButton::SwitchButton(QWidget *parent) : QWidget(parent),
    backgroundColor(247,245,241),
    pressedColor(26,118,197),
    disabledColor(190,190,190),
    circleColor(93,93,93),
    checked(false),
    margins(5)
{
    this->setCursor(Qt::PointingHandCursor);
    this->resize(400,200);

    proAnimation = new QPropertyAnimation(this,"xPos");
    proAnimation->setDuration(300);
    proAnimation->setLoopCount(1);
}

bool SwitchButton::isToggled() const
{
    return this->checked;
}

void SwitchButton::setToggled(bool checked)
{
    if(this->checked == checked)
    {
        return;
    }
    this->checked = checked;
    changeState(this->checked);
}

void SwitchButton::setBackColor(QColor color)
{
    this->backgroundColor = color;
}

QColor SwitchButton::getBackColor()
{
    return this->backgroundColor;
}

void SwitchButton::setPressedColor(QColor color)
{
    this->pressedColor = color;
}

QColor SwitchButton::getPressedColor()
{
    return this->pressedColor;
}

void SwitchButton::setDisabledColor(QColor color)
{
    this->disabledColor = color;
}

QColor SwitchButton::getDisabledColor()
{
    return this->disabledColor;
}

void SwitchButton::setCircleColor(QColor color)
{
    this->circleColor = color;
}

QColor SwitchButton::getCircleColor()
{
    return this->circleColor;
}

void SwitchButton::setXPos(qreal xPos)
{
    this->xPos = xPos;
    update();
}

qreal SwitchButton::getXPos()
{
    return this->xPos;
}

void SwitchButton::changeState(bool state)
{
    if(state)
    {
        proAnimation->setStartValue(0);
        proAnimation->setEndValue(this->width()-this->height());
    }
    else
    {
        proAnimation->setStartValue(this->width()-this->height());
        proAnimation->setEndValue(0);
    }
    proAnimation->start();
}

bool SwitchButton::isFinish() const
{
    return proAnimation->state() == QAbstractAnimation::Stopped;
}

void SwitchButton::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    QPainterPath path;
    QColor backsColor;
    QColor circlesColor;
    //设置选中和未被选的画笔颜色
    if(this->isEnabled())
    {
        if(checked)
        {
            backsColor = pressedColor;
            circlesColor = QColor(Qt::white);
        }
        else
        {
            backsColor = backgroundColor;
            circlesColor = circleColor;
        }
    }
    else
    {
        backsColor = backgroundColor;
        circlesColor = disabledColor;
    }

    //绘制外部大圆
    painter.setBrush(backsColor);
    path.addRoundedRect(QRectF(0,0,this->width(),this->height()),qMin(this->width(),this->height())/2,qMin(this->width(),this->height())/2);
    painter.drawPath(path.simplified());
    //绘制内圆
    painter.setBrush(circlesColor);
    painter.setOpacity(1.0);
    painter.drawEllipse(QRectF(margins + xPos, margins, height() - margins*2, height() - margins* 2));
}

void SwitchButton::mousePressEvent(QMouseEvent *event)
{
    if(this->isEnabled())
    {
        if(event->buttons() & Qt::LeftButton)
        {
            event->accept();
        }
        else
        {
            event->ignore();
        }
    }
}

void SwitchButton::mouseReleaseEvent(QMouseEvent *event)
{
    if(this->isEnabled() && this->isFinish())
    {
        if(event->type() == QMouseEvent::MouseButtonRelease && event->button() == Qt::LeftButton)
        {
            event->accept();
            checked =! checked; //改变状态
            changeState(checked);//状态改变后，更改动画效果
            emit toggled(checked);
        }
        else
        {
            event->ignore();
        }
    }
}

void SwitchButton::resizeEvent(QResizeEvent *event)
{
    this->xPos = checked ? this->width() - this->height() : 0;
    QWidget::resizeEvent(event);
}

4、将开关按钮集成到QtDesigner中

首先查看Qt基于哪种编译器:
在这里插入图片描述
然后选择Qt4设计师自定义控件。
在这里插入图片描述
然后是选择项目名称和位置，注意不要有中文路径。
在这里插入图片描述
选择上面的msvc2017 32bit的编译套件。
在这里插入图片描述
自定义控件名称，注意首字母大写。
在这里插入图片描述
设置开关按钮属于哪个组类。
在这里插入图片描述
最后点击完成即可。
Qt自动生成控件相关的文件:
在这里插入图片描述
将上面的开关按钮的代码拷贝到swichbutton.h和switchbutton.cpp中，使用Release模式编译生成。然后再release文件夹下找到开关按钮的dll文件:
在这里插入图片描述
最后将它拷贝到如下Qt的designer目录下:
在这里插入图片描述
最后随便创建一个qt项目，然后在ui文件中可以发现开关按钮:
在这里插入图片描述
它的属性也同样在ui界面可以修改(通过Q_PROPERTY将属性注册到qt元对象系统):
在这里插入图片描述
但点击运行项目时会出错:
在这里插入图片描述
原因很简单，因为我们没有包含它的头文件和源文件，将头文件和源文件复制到项目中，即可:
在这里插入图片描述
然后再pro文件中添加如下语句:
在这里插入图片描述
最后运行成功，效果如下:
在这里插入图片描述

神威难藏泪~
关注
专栏目录
Qt/C++编写自定义控件42-开关按钮
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
08-05 2638
一、前言 从2010年进入互联网+智能手机时代以来，各种各样的APP大行其道，手机上面的APP有很多流行的元素，开关按钮个人非常喜欢，手机QQ、360卫士、金山毒霸等，都有很多开关控制一些操作，在Qt widgets应用项目上，在项目中应用些类似的开关按钮，估计也会为项目增添不少新鲜感。 总结了大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好...
QT实现图片开关控件-自定义控件
u012959478的博客
07-14 1149
开关按钮很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。通常说的开关按钮，有两个状态：on、off。大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好。第二类是贴图，专业的美工做好的各种状态的背景图片，只需要用代码将该图片画到界面上即可。下面，先介绍一种利用贴图来实现的开关按钮。
QT纯代码实现滑动开关控件
最新发布
u012959478的博客
07-15 1077
开关按钮大家应该很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。通常说的开关按钮，有两个状态：on、off。大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好。第二类是贴图，专业的美工做好的各种状态的背景图片，只需要用代码将该图片画到界面上即可。本文介绍一种实现纯代码绘制的开关按钮。
Qt自定义控件 开关按钮
m0_60259116的博客
12-28 1050
Qt自定义控件 开关按钮
qt开关按钮
08-26
QT实现按钮，可以更换颜色，请大家多多指教...
Qt之自定义控件（开关按钮）
weixin_34348805的博客
08-09 2891
简述 接触过IOS系统的童鞋们应该对开关按钮很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。 通常说的开关按钮，有两个状态：on、off。 下面，我们利用自定义控件来实现一个开关按钮。 简述 原理 源码 示例 效果 源码 更多参考 原理 重写鼠标按下事件（mousePressEvent）、...
Qt 之自定义控件（开关按钮）
qq_39851127的博客
11-14 1460
原理源码运行结果接触过IOS系统的童鞋们应该对开关按钮很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。通常说的开关按钮，有两个状态：on、off。下面，我们利用自定义控件来实现一个开关按钮。
QT自绘开关按钮
02-11
QT自绘开关按钮，里边带预览图！手机上那种左右滑动开关按钮
Qt自定义开关按钮控件
阿清的随手记
11-16 4649
Qt自定义开关按钮控件 最近的项目需要在页面中添加一个开关按钮，样式类似于iOS的wifi开关按钮。 在网上借鉴了别人的代码，稍作修改可以呈现出想要的效果（๑ `▽´๑) 代码如下。 switchcontrol.h #include <QWidget> #include <QTimer> class SwitchControl : public QWidget { Q_OBJECT public: explicit SwitchControl(QWidget
基于Qt的仿手机开关按钮
10-28
创建这样的开关按钮，我们需要定义一个自定义的QGraphicsObject或QWidget子类，然后重写paint()方法来绘制开关的外观。在这个方法中，我们可以使用QPainter的drawRect()函数绘制开关的背景，drawEllipse()函数绘制...
QT开发的精美-自定义选择开关按键类，支持三种方式显示。
05-17
QT开发的精美-自定义选择开关按键类，支持三种方式显示，支持图片开关的切换。代码绘制开关按钮，可以很灵活的设置各种颜色、间隔、文字等，还可以产生动画过度的滑动效果。
基于QT的switch开关
06-08
基于QT的switch开关，采用QML的方式实现的
Qt自绘控件之-IOS风格开关按钮
07-10
本文将深入探讨如何在Qt中实现一个iOS风格的开关按钮，结合C++编程语言和Qt库的功能，打造一个既美观又功能完备的自绘控件。 首先，理解iOS开关按钮的基本设计：这种按钮通常由两部分组成，一部分表示关闭状态...
QT自定义之滑动开关
08-24
下面我们将详细介绍如何使用 QT 来实现自定义的滑动开关。 首先，我们需要创建一个新的 QT 项目，并在其中添加一个名为 SliderButton 的类，该类继承自 QWidget。我们需要在该类中实现滑动开关的逻辑。 在 ...
Qt编写自定义控件一开关按钮
热门推荐
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
11-06 1万+
从2010年进入互联网+智能手机时代以来，各种各样的APP大行其道，手机上面的APP有很多流行的元素，开关按钮个人非常喜欢，手机QQ、360卫士、金山毒霸等，都有很多开关控制一些操作，在Qt widgets应用项目上，在项目中应用些类似的开关按钮，估计也会为项目增添不少新鲜感。 总结了大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好。第二类...
Qt实现一个支持QSS的Switch Button(开关按钮)
eiilpux17的博客
12-12 5607
目录Qt实现一个支持QSS的Switch Button(开关按钮)问题解决思路实现方式其他不同的 Switch Button总结 Qt实现一个支持QSS的Switch Button(开关按钮) 本文会比较长，目的是为了提供一种实现自定义复杂控件的方式，对于使用 QSS 应用样式的项目可能会有帮助。 实现的过程会相对比较复杂和难理解，仅作为研究，对于实际开发可能没什么太大价值。 放上最终的实现效果图： 问题 常见的 Switch Button ，至少包含两部分，槽和滑块，这种由多个小部件组合的控件，在 Q
QT学习记录-自定义开关按钮
m0_37837218的博客
12-26 509
在网上收藏了好多开关效果惊艳的教程，想了想写个尽量简单点的，给自己应急用，但是效果就没那么好了 switchbutton.h #ifndef SWITCHBUTTON_H #define SWITCHBUTTON_H #include <QWidget> #include <QEvent> #include <QPaintEvent> #include <...
QT 实现 带有动画效果的 switch button 开关按钮动
youandme520的专栏
11-29 5294
平时使用手机软件的时候，经常看到带有动画效果的开关按钮 switch button，效果非常炫。但是使用QT自带的控件并没有实现类似的switch button。如果想要使用，只能我们自己进行自己封装。 先看一下效果图： 怎么实现呢？ 我们这次使用 QWidget 的 paintEvent 来绘制这种效果。 下面分步骤解析一下： 我们先分解一下。这个效果。分为3部分，背景（圆角矩形） + 滑动块（圆形） + 动画 1. 背景 背景可以分解为 两侧的两个半圆 + 中间的矩形块 + “开启”文字 + “.
pyqt 开关按钮设计
05-27
在 PyQt 中，可以使用 QCheckBox 控件来实现开关按钮的设计。以下是一个简单的例子： ```python import sys from PyQt5.QtWidgets import QApplication, QWidget, QCheckBox from PyQt5.QtCore import Qt class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): # 创建一个 QCheckBox 控件 cb = QCheckBox('开关按钮', self) cb.move(20, 20) cb.toggle() # 默认设置为选中状态 # 将 QCheckBox 控件的状态改变信号连接到槽函数 on_toggle cb.stateChanged.connect(self.on_toggle) self.setGeometry(300, 300, 250, 150) self.setWindowTitle('开关按钮') self.show() def on_toggle(self, state): # 根据 QCheckBox 控件的状态显示不同的文本 if state == Qt.Checked: print('选中') else: print('未选中') if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 在上面的例子中，创建了一个 QCheckBox 控件，并将其状态改变信号连接到槽函数 on_toggle。在槽函数中，根据 QCheckBox 控件的状态显示不同的文本。可以根据需求修改相应的文本和槽函数的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值