qt自定义滑动按钮（美观且使用方便）

已于 2023-10-19 10:27:51 修改
阅读量4.4k 收藏 74
点赞数 21
文章标签： qt c++ 开发语言
于 2022-05-18 16:02:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44092851/article/details/124844572
版权

前言

某一次qt界面需要用到类似苹果上的滑动按钮，但发现qt中并没有类似的控件。百度之后发现有位博主的自己设计了这种控件，美观度和操作性都很高。但该博主没有介绍用法，所以特此记录，以便新手使用。

链接：原文链接


先上截图：

img

代码：

switchbutton.h

#ifndef switchbutton_H
#define switchbutton_H

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

class switchbutton : public QWidget
{
    Q_OBJECT

public:
    explicit switchbutton(QWidget *parent = 0);
    ~switchbutton(){}

signals:
    void statusChanged(bool checked);

public slots:
    void updateValue();

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

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

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;             //动画步长
    int     m_startX;           //滑块开始X轴坐标
    int     m_endX;             //滑块结束X轴坐标

public:
    int space()                 const;
    int radius()                const;
    bool checked()              const;
    bool showText()             const;
    bool showCircel()           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);

};

#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(102, 205, 170);//设置按钮内部颜色
    m_bgColorOff = QColor(190, 190, 190);

    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(150);
    }

    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::showCircel() 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();
    }
}

源码：

github源码链接

gitee源码链接


下面介绍一下按钮的基本使用，只需要switchbutton.h和switchbutton.cpp文件即可

  1. 先将两个类添加到代码中

  2. 因为我一直是将图形界面和代码分开的，所以只介绍通过qt designer的使用方法。在ui文件中，通过添加一个widget容器，然后把容器提升为类，就能灵活使用滑动按钮了。调整该widget的大小就是调整按钮的大小，我们可以任意调整按钮的布局的大小

    img

  3. 右键widget，选择提升为，注意基类名要和switchbutton.h的基类名保持一致。点击右边的添加，就会出现图片上方这个样子。选中后，右下角点击提升

image-20220518154631091

  1. qt designer右方可以看到widget变成了switchbutton类，也就是说这个widget就是switchbutton类的一个对象。我们可以通过控件名直接使用类中的变量和方法

image-20220518155020866

  1. 通过信号和槽来获取按钮的值，原博主设置了statusChanged信号和updateValue()槽，很方便的获取和设置按钮的值
connect(ui->widget, &switchbutton::statusChanged, this, &Widget::switchButton_Status);

img


码字不易，如果这篇博客对你有帮助，麻烦点赞收藏，非常感谢！有不对的地方

小土同学！
关注
  • 21
    点赞
  • 踩
  • 74
    收藏
    觉得还不错? 一键收藏
  • 26
    评论
qt 滑动按钮
05-30
通过使用QPainter，我们可以自定义滑动按钮的外观，包括滑块、轨道以及滑动时的动画效果。 创建自定义滑动按钮的第一步是定义一个新的QWidget子类，比如叫做CustomSlider。在这个类中，我们需要重写paintEvent()...
QT：一个简洁美观的自定义温度控件
01-19
例如，当滑动按钮被拖动时，会发出一个信号，这个信号会被连接到一个槽函数，该函数负责处理温度值的变化并更新UI。 在项目的压缩包文件"temperature"中，可能包含了以下内容： 1. 源代码文件（如.cpp和.h文件）：...
Qt界面中滑动条的实现方式
m0_73443478的博客
06-13 1049
Qt界面中滑动条的实现方式
Qt自定义控件------SwitchButton
屁股大象的博客
06-13 4603
简介 SwitchButton是非常普遍实用的按钮，Qt里面竟然没有Switch着实让我惊讶，所以只能自己实现了。 效果 下面放效果图 控件拆分 一、控件大体有两部分组成，一个是背景，一个是白色的滑块。原本背景是想用QWidget然后直接设置圆角的，然后发现效果很差。所以背景改成QPainter来绘制，拆分为2个180°的圆弧和一个矩形。 二、背景 = 左圆弧 + 矩形 + 右圆弧。有两种做法，一种就是字面上的做法，通过drawArc画两个圆弧，drawLine画上下两条线，然后填充。另外的简单粗暴做法就
QT——QSlider实现，QT滑动控件的使用
最新发布
NS_ice的博客
05-29 1216
QT——QSlider实现，QT滑动控件的使用，QAbstractSlider类的使用。调节滑块到指定位置后，发生一个触发事件，在这个触发事件中，我们获取最后的值，然后进行处理操作。 滑动滑动条使值发生变化，只要最后停下的时候触发信号量执行槽函数。获取滑动块最后停下的值并执行槽函数。滑动块槽函数互动一下多次触发怎么办。sliderMoved，sliderPressed，sliderReleased，valueChanged，actionTriggered，rangeChanged使用
QT自定义控件--滑动按钮
hw5230的博客
06-17 1483
C++ Qt是一个基于C++语言的跨平台应用程序开发框架，具有丰富的UI组件和API库。Qt包括了许多模块，如Qt Core、Qt GUI、Qt Network等，每个模块都提供了一系列的类和函数。Qt还提供了集成开发环境（IDE）Qt Creator，使得开发人员可以通过它来创建、编译、调试和部署Qt应用程序。学习Qt开发不知道做什么？
[Qt学习笔记]Qt实现自定义控件SwitchButton开关按钮
fengyaowuhui的博客
03-20 1353
在项目UI中使用较多的打开/关闭的开关按钮，一般都是找图片去做效果，比如说如下的图像来表征打开或关闭。如果想要控件有打开/关闭的动画效果或比较好的视觉效果，这里就可以使用自定义控件，使用Painter来绘制控件。
Qt自定义按钮与图标
weixin_51883798的博客
03-23 1397
大概就是如果数据库不包含名为fontName的families，同时路径为fontFile的文件存在，，，，，同时，根据iconFont.setPixelSize(size)，说明size对应图形文字的大小。不过为了方便查找对应的图形字体编号，可以在他的程序里查找，也有对应的图片，可以从图片中查找。借助iconhelper，我们可以方便地获得对应图片文字的QPixmap，比起原有的QPushButton，又提供了更多的功能，接口也比较便利。(drawText)可以设置图片颜色，大小，宽，高，位置。
Qt简易滑动按钮
qq_57049935的博客
01-24 1002
因为要做智能家居的控制界面，如果直接用按钮的字开关不是很好看，之前也是做过微信小程序和网页的小项目，知道滑动开关这个东西。QT应该可以自己画出来，大致应该就是和之前的棋盘一样重写鼠标点击和绘制，在点击时用定时器作个滑动的效果。
Qt自定义控件 开关按钮
m0_60259116的博客
12-28 1011
Qt自定义控件 开关按钮
QT可拖动比例尺，滑动按钮
12-20
1. `CSwitchMenu.cpp` - 这很可能是自定义滑动按钮类的实现文件，其中包含了类的方法定义和事件处理逻辑。例如，可能包含滑动事件的处理函数，用于更新比例尺的值并在界面上反映出来。 2. `CSwitchMenu.h` - 对应的...
QT自定义之滑动开关
08-24
主要为大家详细介绍了QT自定义之滑动开关效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
SwitchButton 开关按钮的多种实现方式
06-04
SwitchButton 开关按钮的多种实现方式
基于QT的switch开关
06-08
基于QT的switch开关，采用QML的方式实现的
qt 制作的可以左右滑动的导航栏
06-06
使用qt代码实现导航栏的动态左右滑动效果，代码简单易懂。
QT自定义皮肤生成器
06-20
QT自定义皮肤生成器包含了各种常用的控件和美观的界面示例，如按钮、文本框、下拉菜单、滑动条等。这些预设的皮肤和示例可以直接编译运行，帮助开发者快速了解和学习如何应用QSS来美化界面。在实际开发中，开发者...
Qt自定义控件十套demo源码-续III.zip
09-27
这个资源包为初学者提供了丰富的实践素材，包含了各种独特且美观的控件，如滑块条、圆形组件、进度条等。下面我们将逐一解析这些控件的设计原理和实现方法。 首先，我们来看"sliderbar"，这是一个自定义的滑块条...
Qt之模型/视图（自定义按钮）
weixin_34356310的博客
03-24 817
简述 衍伸前面的章节，我们对QTableView实现了数据显示、自定义排序、显示复选框、进度条等功能的实现，本节主要针对自定义按钮进行讲解，这节过后，也希望大家对自定义有更深入的了解，在以后的功能开发过程中，相信无论遇到什么样式形式，我们都可以很好地实现。 简述 效果 QStyledItemDelegate 源码 衍伸...
qt 自定义滑动条qslider
08-28
QSlider是Qt库中的一个控件，用于实现滑动条的功能。我们可以自定义QSlider的外观和行为来满足我们的需求。 要自定义QSlider，我们可以使用Qt的样式表（StyleSheet）来改变滑动条的外观。例如，我们可以使用setStyleSheet函数来设置滑动条的背景颜色、滑块的样式等等。 此外，还可以通过重写QSlider的事件处理函数来自定义滑动条的行为。例如，我们可以重写mousePressEvent函数来处理鼠标点击滑动条的事件，然后根据鼠标点击的位置来更新滑动条的值。 另外，我们还可以通过设置滑动条的范围和步长来自定义滑动条的取值范围和增量。我们可以使用setMinimum和setMaximum函数来设置滑动条的最小值和最大值，使用setSingleStep函数来设置滑动条每次滑动的增量。 总之，通过使用样式表和重写事件处理函数，以及设置滑动条的范围和步长，我们可以自定义滑动条的外观和行为，满足我们的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值