[Qt学习笔记]Qt实现自定义控件SwitchButton开关按钮

最新推荐文章于 2024-05-24 13:51:54 发布
最新推荐文章于 2024-05-24 13:51:54 发布
阅读量1.3k 收藏 18
点赞数 13
分类专栏： Qt实例学习 文章标签： qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengyaowuhui/article/details/136862868
版权

1、功能介绍

在项目UI中使用较多的打开/关闭的开关按钮，一般都是找图片去做效果，比如说如下的图像来表征打开或关闭。

图一.png图二.png图三.PNG

如果想要控件有打开/关闭的动画效果或比较好的视觉效果，这里就可以使用自定义控件，使用Painter来绘制控件。软件最终的效果如上图三：

2、主要的实现绘制代码

绘制背景区域

void SwitchButton::drawBackGround(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QColor bgColor = m_checked ? m_bgColorOn : m_bgColorOff;
    if (isEnabled()) {
        bgColor.setAlpha(140);
    }

    painter->setBrush(bgColor);

    QRect rect(0, 0, width(), height());
    int side = qMin(width(), height());

    //左侧半圆
    QPainterPath path1;
    path1.addEllipse(rect.x(), rect.y(), side, side);

    //右侧半圆
    QPainterPath path2;
    path2.addEllipse(rect.width() - side, rect.y(), side, side);

    //中间的矩形
    QPainterPath path3;
    path3.addRect(rect.x() + side / 2, rect.y(), rect.width() - side, height());

    QPainterPath path = path1 + path2 + path3;
    painter->drawPath(path);

    //绘制文本

    //滑块半径
    int sliderWidth = qMin(height(), width()) - m_space * 2 - 5;
    if (m_checked){
        QRect textRect(0, 0, width() - sliderWidth, height());
        painter->setPen(QPen(m_textColor));
        painter->drawText(textRect, Qt::AlignCenter, m_textOn);
    } else {
        QRect textRect(sliderWidth, 0, width() - sliderWidth, height());
        painter->setPen(QPen(m_textColor));
        painter->drawText(textRect, Qt::AlignCenter, m_textOff);
    }

    painter->restore();
}

绘制滑块

void SwitchButton::drawSlider(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QColor color = m_checked ? m_sliderColorOn : m_sliderColorOff;

    painter->setBrush(QBrush(color));

    int sliderWidth = qMin(width(), height()) - m_space * 2;
    QRect rect(m_space + m_startX, m_space, sliderWidth, sliderWidth);
    painter->drawEllipse(rect);

    painter->restore();
}

这里引入了滑块动画效果，设定一个定时器，根据滑块的距离设置一个动画的效果

    m_timer = new QTimer(this);
    m_timer->setInterval(30);
    connect(m_timer, SIGNAL(timeout()), this, SLOT(UpdateValue()));

void SwitchButton::UpdateValue()
{
    if (m_checked) {
        if (m_startX < m_endX) {
            m_startX += m_step;
        } else {
            m_startX = m_endX;
            m_timer->stop();
        }
    } else {
        if (m_startX > m_endX) {
            m_startX -= m_step;
        } else {
            m_startX = m_endX;
            m_timer->stop();
        }
    }

    update();
}

3、功能实现源码

switchButton.h

#ifndef SWITCHBUTTON_H
#define SWITCHBUTTON_H

#include <QObject>
#include <QWidget>
#include <QTimer>
#include <QColor>

class SwitchButton : public QWidget
{
    Q_OBJECT
public:
    explicit SwitchButton(QWidget *parent = nullptr);

signals:
    void statusChanged(bool checked);

public slots:

private slots:
    void UpdateValue();

private:
    void drawBackGround(QPainter *painter);
    void drawSlider(QPainter *painter);

protected:
    void paintEvent(QPaintEvent *event);
    void mousePressEvent(QMouseEvent *event);

private:
    //滑块距离边界距离
    int m_space;
    //圆角角度
    int m_radius;
    //是否选中
    bool m_checked;
    //是否显示文本
    bool m_showText;
    //是否显示圆
    bool m_showCircle;
    //是否使用动画
    bool m_animation;

    //打开时候背景色
    QColor m_bgColorOn;
    //关闭时候背景色
    QColor m_bgColorOff;
    //打开时候滑块颜色
    QColor m_sliderColorOn;
    //关闭时候滑块颜色
    QColor m_sliderColorOff;
    //文字颜色
    QColor m_textColor;

    //打开时候文字
    QString m_textOn;
    //关闭时候文字
    QString m_textOff;

    //动画定时器
    QTimer *m_timer;
    //动画步长
    int m_step;
    //滑块开始X轴坐标
    int m_startX;
    //滑块介绍X轴坐标
    int m_endX;

public:
    int space()                 const;
    int radius()                const;
    bool checked()              const;
    bool showText()             const;
    bool showCircle()           const;
    bool animation()            const;

    QColor bgColorOn()          const;
    QColor bgColorOff()         const;
    QColor sliderColorOn()      const;
    QColor sliderColorOff()     const;
    QColor textColor()          const;

    QString textOn()            const;
    QString textOff()           const;

    int step()                  const;
    int startX()                const;
    int endX()                  const;

public Q_SLOTS:
    void setSpace(int space);
    void setRadius(int radius);
    void setChecked(bool checked);
    void setShowText(bool show);
    void setShowCircle(bool show);
    void setAnimation(bool ok);

    void setBgColorOn(const QColor &color);
    void setBgColorOff(const QColor &color);
    void setSliderColorOn(const QColor &color);
    void setSliderColorOff(const QColor &color);
    void setTextColor(const QColor &color);

    void setTextOn(const QString &text);
    void setTextOff(const QString &text);

//    void setStep(int step);
//    void setStartX(int startX);
//    void setEndX(int endX);
};

#endif // SWITCHBUTTON_H

switchButton.cpp

#pragma execution_character_set("utf-8")
#include "SwitchButton.h"
#include <QPainter>

SwitchButton::SwitchButton(QWidget *parent) : QWidget(parent)
{
    m_space = 2;
    m_radius = 5;
    m_checked = false;
    m_showText = true;
    m_showText = false;
    m_animation = true;

    m_bgColorOn = QColor(21, 156, 119);
    m_bgColorOff = QColor(111, 122, 126);

    m_sliderColorOn = QColor(255, 255, 255);
    m_sliderColorOff = QColor(255, 255, 255);

    m_textColor = QColor(255, 255, 255);

    m_textOn = "开启";
    m_textOff = "关闭";

    m_step = 0;
    m_startX = 0;
    m_endX = 0;

    m_timer = new QTimer(this);
    m_timer->setInterval(30);
    connect(m_timer, SIGNAL(timeout()), this, SLOT(UpdateValue()));
}


void SwitchButton::drawBackGround(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QColor bgColor = m_checked ? m_bgColorOn : m_bgColorOff;
    if (isEnabled()) {
        bgColor.setAlpha(140);
    }

    painter->setBrush(bgColor);

    QRect rect(0, 0, width(), height());
    int side = qMin(width(), height());

    //左侧半圆
    QPainterPath path1;
    path1.addEllipse(rect.x(), rect.y(), side, side);

    //右侧半圆
    QPainterPath path2;
    path2.addEllipse(rect.width() - side, rect.y(), side, side);

    //中间的矩形
    QPainterPath path3;
    path3.addRect(rect.x() + side / 2, rect.y(), rect.width() - side, height());

    QPainterPath path = path1 + path2 + path3;
    painter->drawPath(path);

    //绘制文本

    //滑块半径
    int sliderWidth = qMin(height(), width()) - m_space * 2 - 5;
    if (m_checked){
        QRect textRect(0, 0, width() - sliderWidth, height());
        painter->setPen(QPen(m_textColor));
        painter->drawText(textRect, Qt::AlignCenter, m_textOn);
    } else {
        QRect textRect(sliderWidth, 0, width() - sliderWidth, height());
        painter->setPen(QPen(m_textColor));
        painter->drawText(textRect, Qt::AlignCenter, m_textOff);
    }

    painter->restore();
}

void SwitchButton::drawSlider(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QColor color = m_checked ? m_sliderColorOn : m_sliderColorOff;

    painter->setBrush(QBrush(color));

    int sliderWidth = qMin(width(), height()) - m_space * 2;
    QRect rect(m_space + m_startX, m_space, sliderWidth, sliderWidth);
    painter->drawEllipse(rect);

    painter->restore();
}

void SwitchButton::paintEvent(QPaintEvent *ev)
{
    //启用反锯齿
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //绘制背景
    drawBackGround(&painter);

    //绘制滑块
    drawSlider(&painter);
}

void SwitchButton::mousePressEvent(QMouseEvent *ev)
{
    Q_UNUSED(ev)

    m_checked = !m_checked;
    emit statusChanged(m_checked);

    //计算步长
    m_step = width() / 10;

    //计算滑块X轴终点坐标
    if (m_checked) {
        m_endX = width() - height();
    } else {
        m_endX = 0;
    }

    //判断是否使用动画
    if (m_animation) {
        m_timer->start();
    } else{
        m_startX = m_endX;
        update();
    }
}

void SwitchButton::UpdateValue()
{
    if (m_checked) {
        if (m_startX < m_endX) {
            m_startX += m_step;
        } else {
            m_startX = m_endX;
            m_timer->stop();
        }
    } else {
        if (m_startX > m_endX) {
            m_startX -= m_step;
        } else {
            m_startX = m_endX;
            m_timer->stop();
        }
    }

    update();
}

int SwitchButton::space() const
{
    return m_space;
}

int SwitchButton::radius() const
{
    return m_radius;
}

bool SwitchButton::checked() const
{
    return m_checked;
}

bool SwitchButton::showText() const
{
    return m_showText;
}

bool SwitchButton::showCircle() const
{
    return m_showCircle;
}

bool SwitchButton::animation() const
{
    return m_animation;
}

QColor SwitchButton::bgColorOn() const
{
    return m_bgColorOn;
}

QColor SwitchButton::bgColorOff() const
{
    return m_bgColorOff;
}

QColor SwitchButton::sliderColorOn() const
{
    return m_sliderColorOn;
}

QColor SwitchButton::sliderColorOff() const
{
    return m_sliderColorOff;
}

QColor SwitchButton::textColor() const
{
    return m_textColor;
}

QString SwitchButton::textOn() const
{
    return m_textOn;
}

QString SwitchButton::textOff() const
{
    return m_textOff;
}

int SwitchButton::step() const
{
    return m_step;
}

int SwitchButton::startX() const
{
    return m_startX;
}

int SwitchButton::endX() const
{
    return m_endX;
}

void SwitchButton::setSpace(int space)
{
    if (m_space != space) {
        m_space = space;
        update();
    }
}

void SwitchButton::setRadius(int radius)
{
    if (m_radius != radius) {
        m_radius = radius;
        update();
    }
}

void SwitchButton::setChecked(bool checked)
{
    if (m_checked != checked) {
        m_checked = checked;
        update();
    }
}

void SwitchButton::setShowText(bool show)
{
    if (m_showText != show) {
        m_showText = show;
        update();
    }
}

void SwitchButton::setShowCircle(bool show)
{
    if (m_showCircle != show) {
        m_showCircle = show;
        update();
    }
}

void SwitchButton::setAnimation(bool ok)
{
    if (m_animation != ok) {
        m_animation = ok;
        update();
    }
}

void SwitchButton::setBgColorOn(const QColor &color)
{
    if (m_bgColorOn != color) {
        m_bgColorOn = color;
        update();
    }
}

void SwitchButton::setBgColorOff(const QColor &color)
{
    if (m_bgColorOff != color) {
        m_bgColorOff = color;
        update();
    }
}

void SwitchButton::setSliderColorOn(const QColor &color)
{
    if (m_sliderColorOn != color) {
        m_sliderColorOn = color;
        update();
    }
}

void SwitchButton::setSliderColorOff(const QColor &color)
{
    if (m_sliderColorOff != color) {
        m_sliderColorOff = color;
        update();
    }
}

void SwitchButton::setTextColor(const QColor &color)
{
    if (m_textColor != color) {
        m_textColor = color;
        update();
    }
}

void SwitchButton::setTextOn(const QString &text)
{
    if (m_textOn != text) {
        m_textOn = text;
        update();
    }
}

void SwitchButton::setTextOff(const QString &text)
{
    if (m_textOff != text) {
        m_textOff = text;
        update();
    }
}

//void SwitchButton::setStep(int step)
//{
//    if (m_step != step) {
//        m_step = step;
//        update();
//    }
//}

//void SwitchButton::setStartX(int startX)
//{

//}

//void SwitchButton::setEndX(int endX)
//{

//}

4、效果与源码

控件实现的动态效果如下
控件效果
本小例程的代码放到我的开源gitte项目里，欢迎一起学习，也希望能收获你的小星星。
源码SwitchButton

coder_Alaric
关注
  • 13
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
qt 调用qpainter_Qt实现的自定义开关按钮SwitchButton
weixin_35572363的博客
12-29 921
SwitchButton效果今天和大家分享一个基于Qt实现的自定义开关按钮-SwitchButton，可以在程序中用SwitchButton代替QRadioButton或QCheckBox进行一些使能的控制，不仅能实现同样的功能，而且外观和动态效果很现代化，使程序更加美观。平时我们用的很多软件里面也都有SwitchButton的使用，比如手机设置中的流量开关、飞行模式开关等，如下图所示：然后再看一...
Qt之自定义控件（开关按钮）自记
11-13
总的来说，这个项目展示了如何通过Qt的C++ API和Qt Designer插件系统，实现一个可定制颜色的开关按钮控件。通过学习这个案例，开发者可以了解到Qt自定义控件的基本流程，以及如何将它们集成到设计环境中，提升软件的...
Qt编写自定义控件一开关按钮
m0_73443478的博客
06-02 2600
Qt编写自定义控件一开关按钮
QT自定义控件--滑动按钮
hw5230的博客
06-17 1488
C++ Qt是一个基于C++语言的跨平台应用程序开发框架，具有丰富的UI组件和API库。Qt包括了许多模块，如Qt Core、Qt GUI、Qt Network等，每个模块都提供了一系列的类和函数。Qt还提供了集成开发环境（IDE）Qt Creator，使得开发人员可以通过它来创建、编译、调试和部署Qt应用程序。学习Qt开发不知道做什么？
19.Qt自定义控件（相当于自己封窗一个类）
ljbking的博客
04-12 204
1 需要将ui中模块建立对应的信号槽链接（可以理解成，建立自定义模块的寄生关系）2 需要为自己设计的类提供函数。
QT学习（4）——自定义控件：按钮增加值，滑块跟着变化
最新发布
Arya的博客，专注后端领域
05-24 517
QT学习（4）——自定义控件
探索QtCustomWidgets：一款强大的Qt自定义控件库
gitblog_00052的博客
03-30 513
探索QtCustomWidgets：一款强大的Qt自定义控件库 项目地址:https://gitcode.com/jjzhang166/QtCustomWidgets 在软件开发领域，尤其是在GUI设计中，拥有丰富且独特的控件库是提升用户体验的关键。QtCustomWidgets就是这样一款由Java张166贡献的开源项目，它为Qt开发者提供了一系列自定义的控件，旨在增强你的应用界面和交互性。 ...
Qt自定义控件------SwitchButton
屁股大象的博客
06-13 4606
简介 SwitchButton是非常普遍实用的按钮，Qt里面竟然没有Switch着实让我惊讶，所以只能自己实现了。 效果 下面放效果图 控件拆分 一、控件大体有两部分组成，一个是背景，一个是白色的滑块。原本背景是想用QWidget然后直接设置圆角的，然后发现效果很差。所以背景改成QPainter来绘制，拆分为2个180°的圆弧和一个矩形。 二、背景 = 左圆弧 + 矩形 + 右圆弧。有两种做法，一种就是字面上的做法，通过drawArc画两个圆弧，drawLine画上下两条线，然后填充。另外的简单粗暴做法就
Qt--自定义控件
SNAKEpc12138的博客
05-24 6658
这里以 SpinBox和HorizontalSlider 组合的自定义控件为例，介绍常规的自定义控件的开发步骤。假设这里有一个Widget项目，作为工作项目。右键项目 -》添加新文件， 选择Qt -》Qt设计器界面类：选择自定义控件的父类：输入自定义控件类的名称：最后会给出添加的文件：添加完成后可以看到.pro文件中自动添加了自定义类的.h .cpp以及ui文件，另外在界面文件中，也多了一个smallwidget.ui文件：然后就可以在smallwidget.ui文件中设计我们的自定义控件了。
QT自定义控件
new9232的博客
03-12 3725
QT的UI设计器提供了很多GUI设计的界面组件，可以满足常见的界面设计需求。但是某些时候需要设计特殊的界面组件，而在UI设计器的组件面板里根本没有合适的组件，这时就需要设计自定义的界面组件。在widget界面上放置一个Widget组件，右击Widget，点击提升为提升的类的名称就是刚才添加的那个类Custom点击添加，然后点击提升运行程序后，可以看到，在Widget主窗口中就会出现我们自定义的控件我们想要的效果是拉动进度条，数字同步发生变化。
qt开关控件设计（手把手从零开始）
weixin_42887343的博客
01-01 4726
从零开始教你qt自定义控件设计，使用switch开关控件作为例子。
Qt之实现自定义控件的两种方式——插件法
韩若熙的博客
01-03 5519
可以通过Qt设计师拖拽原生控件进行界面开发，但有时候原生控件不能满足项目需求。此时，就需要实现自定义控件。Qt中实现自定义控件，有两种方式，即提升法和插件法。本篇介绍插件法。新建一个自定义控件类，类名为myBattery，继承于QWidget类，该类主要负责实现自定义控件，注意此处使用Q_DECL_EXPORT 宏。private ://最小值 double maxValue;//最大值 double value;//目标电量 double alarmValue;
Qt 自定义控件
m0_46044243的博客
08-28 2194
qt实现自定义控件
SwitchButton 开关按钮的多种实现方式源码
04-15
在Android开发中，`SwitchButton`（也称为开关按钮或切换按钮）是一种常见的UI元素，用于用户在两种状态之间进行切换。它通常表现为一个滑动开关，用户可以通过滑动来改变其状态，如开启或关闭某项功能。本文将详细...
安卓自定义控件相关-SwitchButton开关按钮的多种实现方式.rar
07-29
SwitchButton开关按钮的多种实现方式.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Qt自定义控件十套demo源码-续III.zip
09-27
"switchbutton"可能是一个开关按钮，常见于iOS和Android界面设计中。这种控件通常需要两个状态（开/关），并提供平滑的过渡动画。我们可以继承QPushButton并使用QPropertyAnimation实现开关切换效果。 "stylewidget...
高仿IOS自定义控件SwitchButton
01-27
"高仿IOS自定义控件SwitchButton"就是这样一个例子，它模仿了iOS原生的开关按钮（UISwitch）样式，但提供了更多的自定义可能性。下面将详细探讨这个控件的设计原理、实现方法以及可能的应用场景。 首先，...
（一）Qt实现自定义控件的两种方式---提升法
热门推荐
XCJandLL的博客
07-06 1万+
在使用Qt设计师进行窗口设计时，我们会通过拖拽使用设计师中的原生控件来进行界面的开发，但有时候那些标准窗口部件无法满足我们的需求，这时候就需要我们进行自定义控件的使用。本系列文章主要讲述了使用提升法及插件法来实现自定义控件的使用，如有错误之处，欢迎大家批评指正。............
Qt实现一个支持QSS的Switch Button(开关按钮)
eiilpux17的博客
12-12 5232
目录Qt实现一个支持QSS的Switch Button(开关按钮)问题解决思路实现方式其他不同的 Switch Button总结 Qt实现一个支持QSS的Switch Button(开关按钮) 本文会比较长，目的是为了提供一种实现自定义复杂控件的方式，对于使用 QSS 应用样式的项目可能会有帮助。 实现的过程会相对比较复杂和难理解，仅作为研究，对于实际开发可能没什么太大价值。 放上最终的实现效果图： 问题 常见的 Switch Button ，至少包含两部分，槽和滑块，这种由多个小部件组合的控件，在 Q
android开关按钮背景图,Android自定义控件之开关按钮学习笔记分享
05-27
好的，关于 Android 开关按钮的背景图和自定义控件，我可以为您提供一些学习笔记和分享。 1. Android 开关按钮背景图 在 Android 中，开关按钮的背景图可以通过 drawable 文件夹下的 xml 文件来实现。以下是一个简单的例子： ```xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/switch_on" android:state_checked="true"/> <item android:drawable="@drawable/switch_off"/> </selector> ``` 其中，我们使用了 selector 标签来表示按钮的状态。在 checked 为 true 时，使用 switch_on 图片作为背景图；否则使用 switch_off 图片作为背景图。 2. Android 自定义控件之开关按钮学习笔记分享 如果您想完全自定义一个开关按钮控件，以下是一些实现步骤： 1) 创建一个继承自 CompoundButton 的类，例如 SwitchButton。 2) 实现 SwitchButton 的构造函数和一些必要的属性。 ```java public class SwitchButton extends CompoundButton { public SwitchButton(Context context) { super(context); init(); } public SwitchButton(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SwitchButton(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 初始化一些属性 } } ``` 3) 在 init() 方法中，设置一些默认属性，例如背景图、文字等。 4) 重写 onMeasure() 方法，计算出 SwitchButton 的宽高。 ```java @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); setMeasuredDimension(widthSize, heightSize); } ``` 5) 重写 onDraw() 方法，绘制 SwitchButton 的背景图和文字。 ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制背景图和文字 } ``` 6) 重写 onTouchEvent() 方法，处理用户的触摸事件，例如改变 SwitchButton 的状态。 ```java @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 处理按下事件 break; case MotionEvent.ACTION_MOVE: // 处理移动事件 break; case MotionEvent.ACTION_UP: // 处理抬起事件 break; } return super.onTouchEvent(event); } ``` 7) 最后，将 SwitchButton 添加到布局文件中即可。 ```xml <com.example.myapp.SwitchButton android:id="@+id/switchButton" android:layout_width="wrap_content" android:layout_height="wrap_content"/> ``` 以上就是自定义开关按钮控件的一些步骤和注意事项。希望对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值