Qt之自定义控件（开关按钮）_qt自定义按钮形状_亭台六七座的博客-程序员秘密

技术标签： Qt控件 Qt自定义开关按钮 Qt-控件 Qt自定义控件

简述

接触过IOS系统的童鞋们应该对开关按钮很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。

通常说的开关按钮，有两个状态：on、off。

下面，我们利用自定义控件来实现一个开关按钮。

原理

重写鼠标按下事件（mousePressEvent）、释放事件（mouseReleaseEvent），用于切换开关状态。
重写绘制事件（paintEvent），用于绘制开关效果。
使用QTimer，定时刷新，让开关切换时产生动画效果。

其余接口用于扩展，也可自己扩充。

源码

SwitchControl.h

#ifndef SWITCH_CONTROL
#define SWITCH_CONTROL

#include <QWidget>
#include <QTimer>

class SwitchControl : public QWidget
{
    Q_OBJECT

public:
    explicit SwitchControl(QWidget *parent = 0);

    // 返回开关状态 - 打开：true 关闭：false
    bool isToggled() const;

    // 设置开关状态
    void setToggle(bool checked);

    // 设置背景颜色
    void setBackgroundColor(QColor color);

    // 设置选中颜色
    void setCheckedColor(QColor color);

    // 设置不可用颜色
    void setDisbaledColor(QColor color);

protected:
    // 绘制开关
    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;

    // 鼠标按下事件
    void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;

    // 鼠标释放事件 - 切换开关状态、发射toggled()信号
    void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;

    // 大小改变事件
    void resizeEvent(QResizeEvent *event) Q_DECL_OVERRIDE;

    // 缺省大小
    QSize sizeHint() const Q_DECL_OVERRIDE;
    QSize minimumSizeHint() const Q_DECL_OVERRIDE;

signals:
    // 状态改变时，发射信号
    void toggled(bool checked);

private slots:
    // 状态切换时，用于产生滑动效果
    void onTimeout();

private:
    bool m_bChecked;         // 是否选中
    QColor m_background;     // 背景颜色
    QColor m_checkedColor;   // 选中颜色
    QColor m_disabledColor;  // 不可用颜色
    QColor m_thumbColor;     // 拇指颜色
    qreal m_radius;          // 圆角
    qreal m_nX;              // x点坐标
    qreal m_nY;              // y点坐标
    qint16 m_nHeight;        // 高度
    qint16 m_nMargin;        // 外边距
    QTimer m_timer;          // 定时器
};

#endif // SWITCH_CONTROL
   
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68

SwitchControl.cpp

#include <QPainter>
#include <QMouseEvent>
#include "SwitchControl.h"

SwitchControl::SwitchControl(QWidget *parent)
    : QWidget(parent),
      m_nHeight(16),
      m_bChecked(false),
      m_radius(8.0),
      m_nMargin(3),
      m_checkedColor(0, 150, 136),
      m_thumbColor(Qt::white),
      m_disabledColor(190, 190, 190),
      m_background(Qt::black)
{
    // 鼠标滑过光标形状 - 手型
    setCursor(Qt::PointingHandCursor);

    // 连接信号槽
    connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));
}

// 绘制开关
void SwitchControl::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    painter.setPen(Qt::NoPen);
    painter.setRenderHint(QPainter::Antialiasing);

    QPainterPath path;
    QColor background;
    QColor thumbColor;
    qreal dOpacity;
    if (isEnabled()) { // 可用状态
        if (m_bChecked) { // 打开状态
            background = m_checkedColor;
            thumbColor = m_checkedColor;
            dOpacity = 0.600;
        } else { //关闭状态
            background = m_background;
            thumbColor = m_thumbColor;
            dOpacity = 0.800;
        }
    } else {  // 不可用状态
        background = m_background;
        dOpacity = 0.260;
        thumbColor = m_disabledColor;
    }
    // 绘制大椭圆
    painter.setBrush(background);
    painter.setOpacity(dOpacity);
    path.addRoundedRect(QRectF(m_nMargin, m_nMargin, width() - 2 * m_nMargin, height() - 2 * m_nMargin), m_radius, m_radius);
    painter.drawPath(path.simplified());

    // 绘制小椭圆
    painter.setBrush(thumbColor);
    painter.setOpacity(1.0);
    painter.drawEllipse(QRectF(m_nX - (m_nHeight / 2), m_nY - (m_nHeight / 2), height(), height()));
}

// 鼠标按下事件
void SwitchControl::mousePressEvent(QMouseEvent *event)
{
    if (isEnabled()) {
        if (event->buttons() & Qt::LeftButton) {
            event->accept();
        } else {
            event->ignore();
        }
    }
}

// 鼠标释放事件 - 切换开关状态、发射toggled()信号
void SwitchControl::mouseReleaseEvent(QMouseEvent *event)
{
    if (isEnabled()) {
        if ((event->type() == QMouseEvent::MouseButtonRelease) && (event->button() == Qt::LeftButton)) {
            event->accept();
            m_bChecked = !m_bChecked;
            emit toggled(m_bChecked);
            m_timer.start(10);
        } else {
            event->ignore();
        }
    }
}

// 大小改变事件
void SwitchControl::resizeEvent(QResizeEvent *event)
{
    m_nX = m_nHeight / 2;
    m_nY = m_nHeight / 2;
    QWidget::resizeEvent(event);
}

// 默认大小
QSize SwitchControl::sizeHint() const
{
    return minimumSizeHint();
}

// 最小大小
QSize SwitchControl::minimumSizeHint() const
{
    return QSize(2 * (m_nHeight + m_nMargin), m_nHeight + 2 * m_nMargin);
}

// 切换状态 - 滑动
void SwitchControl::onTimeout()
{
    if (m_bChecked) {
        m_nX += 1;
        if (m_nX >= width() - m_nHeight)
            m_timer.stop();
    } else {
        m_nX -= 1;
        if (m_nX <= m_nHeight / 2)
            m_timer.stop();
    }
    update();
}

// 返回开关状态 - 打开：true 关闭：false
bool SwitchControl::isToggled() const
{
    return m_bChecked;
}

// 设置开关状态
void SwitchControl::setToggle(bool checked)
{
    m_bChecked = checked;
    m_timer.start(10);
}

// 设置背景颜色
void SwitchControl::setBackgroundColor(QColor color)
{
    m_background = color;
}

// 设置选中颜色
void SwitchControl::setCheckedColor(QColor color)
{
    m_checkedColor = color;
}

// 设置不可用颜色
void SwitchControl::setDisbaledColor(QColor color)
{
    m_disabledColor = color;
}
   
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
     96
     97
     98
     99
     100
     101
     102
     103
     104
     105
     106
     107
     108
     109
     110
     111
     112
     113
     114
     115
     116
     117
     118
     119
     120
     121
     122
     123
     124
     125
     126
     127
     128
     129
     130
     131
     132
     133
     134
     135
     136
     137
     138
     139
     140
     141
     142
     143
     144
     145
     146
     147
     148
     149
     150
     151
     152
     153
     154

示例

下面，我们来实现一组开关按钮。

效果

这里写图片描述

源码

为了演示，可以设置开关的样式、以及状态等效果。

SwitchControl *pSwitchControl = new SwitchControl(this);
SwitchControl *pGreenSwitchControl = new SwitchControl(this);
SwitchControl *pDisabledSwitchControl = new SwitchControl(this);

// 设置状态、样式
pGreenSwitchControl->setToggle(true);
pGreenSwitchControl->setCheckedColor(QColor(0, 160, 230));
pDisabledSwitchControl->setDisabled(true);
pDisabledSwitchControl->setToggle(true);

// 连接信号槽
connect(pSwitchControl, SIGNAL(toggled(bool)), this, SLOT(onToggled(bool)));
   
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12

实现一个简单的槽函数，当开关按钮效果变化时，就会触发，打印当前的状态。

void MainWindow::onToggled(bool bChecked)
{
    qDebug() << "State : " << bChecked;
}
   
    
     1
     2
     3
     4

更多参考

源博客地址：http://blog.csdn.net/liang19890820/article/details/52164289

本文链接：https://blog.csdn.net/lmhuanying1012/article/details/78217690

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

koa基础_domain koa_zvapour的博客-程序员秘密

koa什么是koa?基于Node.js的下一代web应用开发框架express 进阶版domain 环境koa基础 const Koa=require('koa') const app=new Koa() // ctx(context)即req,res,next的结合体 app.use(async ctx=>{ // ctx....

Smultron for Mac标签如何更改？Smultron for Mac的哪些代码语言有语法着色？_weixin_30861797的博客-程序员秘密

Smultron for Mac是Mac平台上的一款文本编辑器。作为一款文本编辑器标签是一个十分重要的功能，那么Smultron for Mac的标签如何更改？对于用Smultron for Mac进行代码编写的编写员而言，颜色可以很好的帮助编写员分辨不同的代码，然而Smultron for Mac的哪些代码语言有语法着色呢？下面小编就来详细的说一说。Smultron for M...

ipad mini2 12.5.4成功降级 10.3.3_weixin_42036708的博客-程序员秘密

手里的ipad mini2 是16G WIFI版本。15年屏幕进水后内屏排线被腐蚀后屏幕无法点亮。 2020年疫情影响下，沉寂近5年后，通过更换配件，成功救活。不过系统版本太旧（估计是ios9）,部分常用软件已不支持，被迫通过系统升级更新到iso12, 体验一言难尽，播放个视频都卡死，偶然得知可强制降级值ios10.3.3,拖了一段时间后，遂于近日动手。硬件配置， macbook pro 2020, intel处理器版本, 无usb口 + 绿联type-...

JVM 内存模型概述（转载）_好酒不贪杯的博客-程序员秘密

本文原创作者：书呆子Rico 作者博客地址：http://blog.csdn.net/justloveyou_/ 因为个人阅读习惯，转载时对文章格式做少许修改。摘要：　　我们都知道，Java程序在执行前首先会被编译成字节码文件，然后再由Java虚拟机执行这些字节码文件从而使得Java程序得以执行。事实上，在程序执行过程中，内存的使用和管理一直是值得关注的问题。Java...

python字典items函数_Python 字典(Dictionary) items()方法_weixin_39936792的博客-程序员秘密

Python 字典(Dictionary) items() 函数以列表返回可遍历的(键, 值) 元组数组。s = "双儿洪七公赵敏赵敏逍遥子鳌拜殷天正金轮法王乔峰"ls=s.split()counts={}for word in ls:counts[word]=counts.get(word,0)+1item=counts.items()print("字典类型：",counts)p...

uni-app开发经验分享十一： uniapp iOS云打包修改权限提示语_林恒smileZAZ的博客-程序员秘密

打包提交appstore如果用到了如下权限需要修改提示语，详细描述使用这个权限的原因，如不修改提示语appstore审核可能会被拒绝。Apple的原则是，如果一个app想要申请用户同意某个隐私信息访问许可，需要给用户明确的申请权限的原因，能给用户带来什么价值。所以要求开发者填写这个原因，并且在iOS向手机用户弹出是否允许app访问某隐私信息时，会同时展示开发者填写的这个描述，以帮助用户判...

Qt之自定义控件（开关按钮）_qt自定义按钮形状_亭台六七座的博客-程序员秘密

简述

原理

源码

示例

效果

源码

更多参考

智能推荐

koa基础_domain koa_zvapour的博客-程序员秘密

Smultron for Mac标签如何更改？Smultron for Mac的哪些代码语言有语法着色？_weixin_30861797的博客-程序员秘密

ipad mini2 12.5.4成功降级 10.3.3_weixin_42036708的博客-程序员秘密

JVM 内存模型概述（转载）_好酒不贪杯的博客-程序员秘密

python字典items函数_Python 字典(Dictionary) items()方法_weixin_39936792的博客-程序员秘密

uni-app开发经验分享十一： uniapp iOS云打包修改权限提示语_林恒smileZAZ的博客-程序员秘密

随便推点

SecurityContextHolder之策略模式源码分析_周杰伦本人的博客-程序员秘密

07年国赛电动车上跷跷板程序源码_qq_18536597的博客-程序员秘密

Unknown argument ××\××\app\.externalNativeBuild\cmake\debug\armeabi-v7a_Mr Cui的博客-程序员秘密

NAR：vRhyme - 对宏基因组中的病毒基因组进行分选的生信工具_刘永鑫Adam的博客-程序员秘密

php中页面图片预先加载图片,javascript图片预先加载_Apple Cook的博客-程序员秘密

vue+elementUI封装的时间插件（有起始时间不能大于结束时间的验证）_weixin_30660027的博客-程序员秘密

推荐文章

热门文章

相关标签