通俗易懂玩Qt：时间滑动选择器实现（内附主要源码）

于 2024-08-02 11:31:19 发布
阅读量445 收藏 8
点赞数 5
分类专栏： QT学习 文章标签： qt 时间滑动选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36553707/article/details/140866298
版权

时间滑动选择器实现

组件说明：

  1. 本组件命名为时间滑动选择器，主要运用于 arm 平台下的触摸屏上，虽然 QT 自带有时间选择组件，但是对触摸屏的使用并不友好，为了提升项目界面的交互性，于是就有了时间滑动选择器，主要靠 QWidget 的 paintEvent 事件来完成的。
  2. 因为需求，本组件仅做了鼠标左键的拖滚事件，未做滑轮事件处理，有需要的可以自行添加。
  3. 代码非搬运，文章是原创。

时间滑动选择器的效果如下方 GIF 图片所示：
请添加图片描述
废话不多说，直接上代码：

//slidingbox.h
#ifndef SLIDINGBOX_H
#define SLIDINGBOX_H

#include <QWidget>

class QPropertyAnimation;

class SlidingBox : public QWidget {
    Q_OBJECT
    Q_PROPERTY(int offset READ getOffset WRITE setOffset)

public:
    explicit SlidingBox(QWidget *parent = nullptr);

    void setRange(int min, int max);
    void setCurrentVal(int val);
    int curentVal();

signals:
    void valueChanged(int val);

protected:
    void paintEvent(QPaintEvent *e) override;
    void mouseMoveEvent(QMouseEvent *e) override;
    void mousePressEvent(QMouseEvent *e) override;
    void mouseReleaseEvent(QMouseEvent *e) override;

private:
    int source_y,
        offset_y,
        max_val,
        min_val,
        current_val,
        val_len;
    bool is_press;
    QPropertyAnimation *prop_amt;

    void drawText(QPainter *paint, QString text, int offset);
    void setOffset(int val);
    int getOffset();
};

#endif // SLIDINGBOX_H

//slidingbox.cpp
#include "slidingbox.h"

#include <QMouseEvent>
#include <QPainter>
#include <QPropertyAnimation>

#define WID_UNIT    20
#define FONT_SIZE   27
#define HIGT_UNIT   40

SlidingBox::SlidingBox(QWidget *parent) :
    QWidget(parent),
    source_y(0),
    offset_y(0),
    max_val(0),
    min_val(0),
    current_val(0),
    val_len(2),
    is_press(false) {
    prop_amt = new QPropertyAnimation(this, "offset");
    prop_amt->setDuration(300);
    prop_amt->setEasingCurve(QEasingCurve::OutQuad);
    setMinimumWidth(val_len * WID_UNIT);
}

void SlidingBox::setRange(int min, int max) {
    min_val = min;
    max_val = max;

    current_val = current_val > max ? max : current_val;
    current_val = current_val < min ? min : current_val;

    val_len = 0;
    while(max > 0) {
        max /= 10;
        val_len ++;
    }

    setMinimumWidth(val_len * WID_UNIT);

    update();//repaint();
}

void SlidingBox::setCurrentVal(int val) {
    current_val = val;

    current_val = current_val > max_val ? max_val : current_val;
    current_val = current_val < min_val ? min_val : current_val;

    update();//repaint();
}

int SlidingBox::curentVal() {
    return current_val;
}

void SlidingBox::paintEvent(QPaintEvent *e) {
    Q_UNUSED(e);

    QPainter paint(this);
    paint.setRenderHint(QPainter::Antialiasing, true);

    if(current_val - min_val >= 2) {
        drawText(&paint, QString::number(current_val - 2), offset_y + HIGT_UNIT * 0);
    }
    if(current_val > min_val) {
        drawText(&paint, QString::number(current_val - 1), offset_y + HIGT_UNIT * 1);
    }
    drawText(&paint, QString::number(current_val + 0), offset_y + HIGT_UNIT * 2);
    if(current_val < max_val) {
        drawText(&paint, QString::number(current_val + 1), offset_y + HIGT_UNIT * 3);
    }
    if(max_val - current_val >= 2) {
        drawText(&paint, QString::number(current_val + 2), offset_y + HIGT_UNIT * 4);
    }

    paint.setPen(QColor(121, 121, 121, 232));
    paint.drawLine(QLineF(0, HIGT_UNIT * 2, val_len * WID_UNIT, HIGT_UNIT * 2));
    paint.drawLine(QLineF(0, HIGT_UNIT * 3, val_len * WID_UNIT, HIGT_UNIT * 3));
}

void SlidingBox::mouseMoveEvent(QMouseEvent *e) {
    // 判别鼠标左键是否被按下
    if(is_press) {
        // 禁止越界
        if((current_val == max_val && e->y() <= source_y) ||
                (current_val == min_val && e->y() >= source_y)) { return; }

        // 更新鼠标 y 坐标的偏移
        offset_y = e->y() - source_y;

        // 下滑降值
        if(offset_y > HIGT_UNIT) {
            source_y += HIGT_UNIT;
            offset_y %= HIGT_UNIT;
            current_val --;
            repaint();
            return;
        }

        // 上滑增值
        if(offset_y < -HIGT_UNIT) {
            source_y -= HIGT_UNIT;
            offset_y %= HIGT_UNIT;
            current_val ++;
            repaint();
            return;
        }

        update();//repaint();
    }
}

void SlidingBox::mousePressEvent(QMouseEvent *e) {
    // 判别鼠标左键
    if(e->button() == Qt::LeftButton) {
        //
        prop_amt->stop();
        // 记录鼠标起始 y 坐标
        source_y = e->y();
        // 按下鼠标左键
        is_press = true;
    }
}

void SlidingBox::mouseReleaseEvent(QMouseEvent *e) {
    // 判别鼠标左键
    if(e->button() == Qt::LeftButton) {
        if(is_press) {
            if(offset_y > HIGT_UNIT / 2) {
                current_val - 1 < min_val ? prop_amt->setStartValue(offset_y) :
                                            prop_amt->setStartValue(HIGT_UNIT / 2 - offset_y);
                prop_amt->setEndValue(0);
                current_val = current_val - 1 < min_val ? min_val : current_val - 1;
            }
            else if(offset_y > -HIGT_UNIT / 2) {
                prop_amt->setStartValue(offset_y);
                prop_amt->setEndValue(0);
            }
            else {
                current_val + 1 > max_val ? prop_amt->setStartValue(offset_y) :
                                            prop_amt->setStartValue(- offset_y - HIGT_UNIT / 2);
                prop_amt->setEndValue(0);
                current_val = current_val + 1 > max_val ? max_val : current_val + 1;
            }

            emit valueChanged(current_val);
            prop_amt->start();
        }

        // 释放鼠标左键
        is_press = false;
    }
}

void SlidingBox::drawText(QPainter *paint, QString text, int offset) {
    int size = FONT_SIZE - qAbs(offset - HIGT_UNIT * 2) / 10,
        transparent = 255 - 255 * qAbs(offset - HIGT_UNIT * 2) * 2 / HIGT_UNIT / 5;
    transparent = transparent < 0 ? 0 : transparent;
    QFont font;
    font.setPixelSize(size);
    paint->setFont(font);
    paint->setPen(QColor(0, 0, 0, transparent));
    while(text.length() < val_len) {
        text = QString("0%1").arg(text);
    }
    paint->drawText(QRectF(0, offset, val_len * WID_UNIT, HIGT_UNIT), Qt::AlignCenter, text);
}

void SlidingBox::setOffset(int val) {
    offset_y = val;
    repaint();
}

int SlidingBox::getOffset() {
    return offset_y;
}

//timeselector.h
#ifndef TIMESELECTOR_H
#define TIMESELECTOR_H

#include <QWidget>

class SlidingBox;

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

    void setTime(int y, int m, int d, int h = 0, int min = 0, int s = 0);
    void setTime(QString time);
    void setTime(QDateTime dt);
    QString getTime();

signals:
    void timeNew(QString time);

private:
    QList<SlidingBox *> sdbl;
    QStringList sdb_strl;
    QList<int> li_sdb_grange,
               li_md;

    void resetFebDays(int year, int month);
    SlidingBox *sdb(QString sdb_str);
    void showCurrentTime();
};
#endif // TIMESELECTOR_H

//timeselector.cpp
#include "timeselector.h"
#include "slidingbox.h"

#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QPushButton>
#include <QDateTime>

TimeSelector::TimeSelector(QWidget *parent) :
    QWidget(parent) {
    sdb_strl << "年" << "月" << "日" << "时" << "分" << "秒";
    li_sdb_grange << 2000 << 2500 << 1 << 12 << 1 << 31 << 0 << 23 << 0 << 59 << 0 << 59;
    li_md << 31 << 28 << 31 << 30 << 31 << 30 << 31 << 31 << 30 << 31 << 30 << 31;

    QHBoxLayout *hup_layout = new QHBoxLayout;
    hup_layout->setSpacing(5);
    hup_layout->setContentsMargins(0, 0, 0, 0);

    hup_layout->addStretch();
    for(int i = 0; i < sdb_strl.length(); i ++) {
        SlidingBox *sdb = new SlidingBox;
        sdb->setRange(li_sdb_grange.at(i * 2), li_sdb_grange.at(i * 2 + 1));
        hup_layout->addWidget(sdb);
        sdbl << sdb;

        QLabel *l_tip = new QLabel(sdb_strl.at(i));
        l_tip->setStyleSheet("font-size: 23px;");
        hup_layout->addWidget(l_tip);
    }
    hup_layout->addStretch();

    QWidget *w_up = new QWidget;
    w_up->setLayout(hup_layout);
    w_up->setStyleSheet("min-height: 200px;max-height: 200px;");

    QHBoxLayout *hdown_layout = new QHBoxLayout;
    hdown_layout->setSpacing(5);
    hdown_layout->setContentsMargins(0, 0, 0, 0);

    QPushButton *btn_now = new QPushButton("现在");
    btn_now->setStyleSheet("min-height: 34px;max-height: 34px;font-size: 19px;");
    hdown_layout->addWidget(btn_now);
    hdown_layout->addStretch();

    QPushButton *btn_cancel = new QPushButton("取消");
    btn_cancel->setStyleSheet("min-height: 34px;max-height: 34px;font-size: 19px;");
    hdown_layout->addWidget(btn_cancel);

    QPushButton *btn_sure = new QPushButton("确定");
    btn_sure->setStyleSheet("min-height: 34px;max-height: 34px;font-size: 19px;");
    hdown_layout->addWidget(btn_sure);

    QWidget *w_down = new QWidget;
    w_down->setLayout(hdown_layout);

    QVBoxLayout *v_layout = new QVBoxLayout;
    v_layout->setSpacing(0);
    v_layout->addWidget(w_up);
    v_layout->addWidget(w_down);

    setLayout(v_layout);
    setMinimumSize(500, 280);
    setMaximumSize(500, 280);
    setWindowFlags(Qt::FramelessWindowHint);
    setStyleSheet("background-color: #fff;");

    resetFebDays(li_sdb_grange.at(sdb_strl.indexOf("年") * 2),
                 li_sdb_grange.at(sdb_strl.indexOf("月") * 2));

    connect(sdb("年"), &SlidingBox::valueChanged, [=](int year) {
        resetFebDays(year, sdb("月")->curentVal());
    });

    connect(sdb("月"), &SlidingBox::valueChanged, [=](int month) {
        sdb("日")->setRange(1, li_md.at(month - 1));
    });

    connect(btn_now, &QPushButton::clicked, [=] {
        showCurrentTime();
    });

    connect(btn_cancel, &QPushButton::clicked, [=] {
        close();
    });

    connect(btn_sure, &QPushButton::clicked, [=] {
        emit timeNew(getTime());
        close();
    });

    setTime(2024, 8, 1, 15, 4, 32);
//    setTime("2024-08-01 20:47:15");
}

TimeSelector::~TimeSelector() {
}

void TimeSelector::setTime(int y, int m, int d, int h, int min, int s) {
    sdb("年")->setCurrentVal(y);
    sdb("月")->setCurrentVal(m);
    sdb("日")->setCurrentVal(d);
    sdb("时")->setCurrentVal(h);
    sdb("分")->setCurrentVal(min);
    sdb("秒")->setCurrentVal(s);
}

void TimeSelector::setTime(QString time) {
    QRegExp regexp("^\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}$");
    if(regexp.exactMatch(time)) {
        QDateTime dt = QDateTime::fromString(time, "yyyy-MM-dd hh:mm:ss");
        setTime(dt.date().year(), dt.date().month(), dt.date().day(),
                dt.time().hour(), dt.time().minute(), dt.time().second());
    }
}

void TimeSelector::setTime(QDateTime dt) {
    if(!dt.isValid()) {
        setTime(dt.date().year(), dt.date().month(), dt.date().day(),
                dt.time().hour(), dt.time().minute(), dt.time().second());
    }
}

QString TimeSelector::getTime() {
    QString y = QString::number(sdb("年")->curentVal()),
            m = sdb("月")->curentVal() < 10 ? "0" + QString::number(sdb("月")->curentVal()) :
                                             QString::number(sdb("月")->curentVal()),
            d = sdb("日")->curentVal() < 10 ? "0" + QString::number(sdb("日")->curentVal()) :
                                             QString::number(sdb("日")->curentVal()),
            h = sdb("时")->curentVal() < 10 ? "0" + QString::number(sdb("时")->curentVal()) :
                                             QString::number(sdb("时")->curentVal()),
            min = sdb("分")->curentVal() < 10 ? "0" + QString::number(sdb("分")->curentVal()) :
                                               QString::number(sdb("分")->curentVal()),
            s = sdb("秒")->curentVal() < 10 ? "0" + QString::number(sdb("秒")->curentVal()) :
                                             QString::number(sdb("秒")->curentVal());
    return QString("%1-%2-%3 %4:%5:%6").arg(y, m, d, h, min, s);
}

void TimeSelector::resetFebDays(int year, int month) {
    if(month == 2) {
        sdb("日")->setRange(1, ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 29 : 28);
    }
    else {
        li_md.replace(1, ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 29 : 28);
    }
}

SlidingBox *TimeSelector::sdb(QString sdb_str) {
    return sdbl.at(sdb_strl.indexOf(sdb_str));
}

void TimeSelector::showCurrentTime() {
    QDateTime dt = QDateTime::currentDateTime();
    setTime(dt.date().year(), dt.date().month(), dt.date().day(),
            dt.time().hour(), dt.time().minute(), dt.time().second());
}

使用参考：

TimeSelector *tsor = new TimeSelector;
tsor->show();
connect(tsor, &TimeSelector::timeNew, [=](QString time) {
	//
});

代码注释就不想加了，太麻烦了，确实想学习逻辑的话，可以参考下面的文章，我也是参考别人写的来实现的，逻辑大致相同，只是代码实现不一样。

借鉴文章：
《QT自定义控件–滑动选择器》
《QT日期时间选择器自定义滚动选择》
《Qt滚动日期选择器》

学习分享，一起成长！以上为小编的经验分享，若存在不当之处，请批评指正！
欢迎加入学习交流群：嵌入式技术交流群

混子还在路上
关注
专栏目录
QT--简单构建滚动日期时间选择器（仿网页注册页面滚动日期时间选择器、上手快、制作轻松、直接套用）
m0_69218824的博客
04-06 2376
简易日历时间滚动选择器，可移植，方便美观
【QT】自制控件---滚动选择器
BIG_C_GOD的博客
09-06 7503
因为我需要有连续的数字以供选择，所以只记了数字范围。如有需求可以改为用任意线性容器保持数据 代码： self-contained.h #ifndef SELFCONTAINED_H #define SELFCONTAINED_H #include #include #include #include #endif // SELFCONTAINED_H rolli
【Qt自定义控件】思路详解（“滑动开关”为例）
Xiao_Ley的博客
01-22 1734
通过一个“滑动开关”自定义控件，来向大家分享创建Qt自定义控件的思路以及思路产生步骤，干货满满，不要错过！
Qt时间滑动选择器
qq853728579的专栏
04-11 739
一个可以滑动选择时间的选择器
Qt ScrollBar 实现滚动屏时间选择器
slowlytalk
12-21 4922
一直觉得Qt中的时间选择的控件不能够满足一些特定的需求，比如说通过鼠标滚动或者拖动（手机中时间选择器）实现时间的改变，最近研究了下怎么实现这个需求。 做这个最主要的难点是怎么控制鼠标的偏移量，其他的都比较直接，实现paintEvent函数将信息绘画在界面上就行了。 class ScrollBar : public QWidget { Q_OBJECT public: /定义类型的目的是滚动屏有垂直...
QT日期时间选择器自定义滚动选择
最新发布
li_yi_feng_的博客
05-31 553
滚动条式日期选择器，时间选择器
Qt自定义DateTime控件--实现日历及时间选择器自定义
slowlytalk
07-06 1万+
怎样能够完全地实现一个不用其他控件就能正常使用的控件。最近尝试了下，使用了Qt的基础控件实现了一个完全自定义的日历控件，顺便改良了一下以前的时间选择器，测试效果还可以。终于实现了自定义的DateTime控件。......
Qt|实现时间选择小功能
糯诺诺米团
02-04 1897
在软件开发过程中，QtDesigner系统给出的控件很多时候都无法满足炫酷的效果，前一段时间需要用Qt实现选择时间的小功能，今天为大家分享一下！首先看一下时间效果吧！如果有需要继续往下看下去哟~
一个android滑动的时间日期选择按钮
11-08
1. **阅读源码**：深入理解滑动选择器的实现原理，研究如何处理滑动事件、更新视图以及同步数据。 2. **调试与测试**：在不同的设备和Android版本上运行，检查兼容性和性能。 3. **定制化实践**：根据项目需求，...
机器学习强基计划0-1：教程导读(附几十种经典模型源码合集)
FRIGIDWINTER的博客
07-13 7882
订阅专栏前，请先看本文章简介
基于QT的数值滑动选择器
06-09
基于QT的滑动选择器，提供时间日期的选择实例，是学习的好例子
基于Qt自定义的滑动选择器
05-26
这是基于Qt实现的自定义滑动选择器，滑动选择器支持两种模式：水平模式和垂直模式，可自行设置。另外提供了接口可设置各类颜色、选择器值域等。
日期与时间滑动选择器
07-23
如图：http://blog.csdn.net/hanhongtao123/article/details/47031049
QT自定义的日期选择控件
07-21
QDateTimeEdit 或 QCalendarWidget 不好操作，美化界面时都比较难实现，很多效果实现不了，就有了想要自定义一个日期选择的控制，操作简单，界面可以结合整体界面的样式通过QSS美化。提供自定义的日期控制源码、demo、qss、可执行的EXE， 在VS2015+ Qt5.12.8编译城功。
通俗易懂解释汉明码（附MATLAB实现代码）
徐丢丢的博客
09-09 1万+
汉明码（Hamming Code），是在电信领域的一种线性调试码，以发明者理查德·卫斯里·汉明的名字命名。汉明码在传输的消息流中插入验证码，当计算机存储或移动数据时，可能会产生数据位错误，以侦测并更正单一比特错误。本文将尽可能使用通俗易懂的语言对汉明码进行解释和说明。
堆排序详细图解（通俗易懂）
热门推荐
oorik的博客
02-17 24万+
什么是堆 堆是一种叫做完全二叉树的数据结构，可以分为大根堆，小根堆，而堆排序就是基于这种结构而产生的一种程序算法。 堆的分类 大根堆:每个节点的值都大于或者等于他的左右孩子节点的值 小根堆:每个结点的值都小于或等于其左孩子和右孩子结点的值 两种结构映射到数组为: 大根堆: 小根堆: //父-->子:i--->左孩子:2*i+1, 右孩子:2*i+2; //子-->父:i--->(i-1)*2;(i为下标元素) 排序思想 1.首先将待排序的数...
通俗易懂谈强化学习之Q-Learning算法实战
Datawhale
12-12 1万+
Datawhale干货作者：知乎King James，伦敦国王大学知乎 ｜https://www.zhihu.com/people/xu-xiu-jian-33前言：上篇介绍了什么是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

混子还在路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值