QT--简单构建滚动日期时间选择器（仿网页注册页面滚动日期时间选择器、上手快、制作轻松、直接套用）

已于 2023-04-06 22:05:57 修改
阅读量2.1k 收藏 23
点赞数 6
分类专栏： QT 文章标签： qt 开发语言
于 2023-04-06 20:28:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69218824/article/details/129977524
版权

目录

1、.h文件代码：

2、.cpp文件代码：

3、滚动日期时间选择器的基本原理和实现思路：        

4、实现效果：

        前些阵子由于项目需求做了一个简单的日期选择器，但是个人觉得非常丑！！！之前做的一版是这个样子的：

         后面根据项目的需求，并且实在是想换掉这个不好看的日期选择器，所以看了一些成熟公司的日期时间选择器案例，最后决定做成一个滚动式的，话不多说上代码：

        1、.h文件代码：

#ifndef ROLLINGHOUR_H
#define ROLLINGHOUR_H

#include <QWidget>
#include <QMouseEvent>
#include <QPainter>
#include <QPropertyAnimation>
#include <QDateTime>
#include <QDebug>


class RollingHour : public QWidget
{
    Q_OBJECT
    /* 将采用动画的对象属性注册到QT中去，否则动画将无法执行 */
    Q_PROPERTY(int posYShifting READ PosYShifting WRITE setPosYShifting)

public:
    explicit RollingHour(QWidget *parent = nullptr);
    ~RollingHour();


    /**
     * @brief setHourRange 重新设置显示小时范围函数方法
     * @param int hour最小值
     * @param int hour最大值
     * @return void 无
     */
    void setHourRange(int min,int max); //设置重新设置范围

    /**
     * @brief PosYShifting 获取偏移量
     * @return int posYShifting
     */
    int PosYShifting();

    /**
     * @brief setPosYShifting 设置偏移量
     * @param int 偏移量设置值
     * @return void 无
     */
    void setPosYShifting(int posYShifting);

protected:
    /**
     * @brief mousePressEvent 重写鼠标按压事件，鼠标拖动进行滚动
     * @param QMouseEvent* 鼠标按压事件
     * @return void 无
     */
    void mousePressEvent(QMouseEvent *event)            override;

    /**
     * @brief wheelEvent 重写滚轮事件，滚轮进行滚动
     * @param QWheelEvent* 滚轮事件
     * @return void 无
     */
    void wheelEvent(QWheelEvent *event)                 override;

    /**
     * @brief mouseMoveEvent 重写鼠标移动事件，鼠标移动进入滚动判决
     * @param QMouseEvent* 鼠标移动事件
     * @return void 无
     */
    void mouseMoveEvent(QMouseEvent *event)             override;

    /**
     * @brief mouseReleaseEvent 重写鼠标松开事件，鼠标松开进入结果判决
     * @param QMouseEvent* 鼠标松开事件
     * @return void 无
     */
    void mouseReleaseEvent(QMouseEvent *event)          override;

    /**
     * @brief paintEvent 重写绘图事件，对hour进行绘制
     * @param QPaintEvent* 绘图事件
     * @return void 无
     */
    void paintEvent(QPaintEvent *paint)                 override;

    /**
     * @brief drawNumber 画出滚动数字函数
     * @param QPaintEvent* 画笔类导入
     * @param int 数字值value
     * @param int 滚动偏移量offset
     * @return void 无
     */
    void drawNumber(QPainter &painter,int value,int offset);

    /**
     * @brief rollAnimation 滚动动画方法
     * @return void 无
     */
    void rollAnimation();


private:
    /* 小时的最小取值 */
    int min_Range = 0;
    /* 小时的最大取值 */
    int max_Range = 24;
    /* 字体显示大小 */
    int numberSize = 5;
    /* 鼠标移动时判决器 */
    bool rollingJudgment = false;
    /* 记录按压鼠标时Y方向的初始位置 */
    int currentPosY = 0;
    /* 取系统的小时时间作为滚动时间选择的初始值 */
    int currentHour = QDateTime::currentDateTime().toString("hh").toInt();
    /* 当下的Y方向上的偏移量 */
    int posYShifting = 0;
    /* 声明一个动画对象 */
    QPropertyAnimation rollingAni;

};

#endif // ROLLINGHOUR_H

       2、.cpp文件代码：

#include "rollinghour.h"

RollingHour::RollingHour(QWidget *parent)
    :QWidget(parent)
{
    /* 去边框,同时保留窗口原有的属性 */
    this->setWindowFlags(Qt::FramelessWindowHint | windowFlags());;
    /* 设置背景样式 */
    this->setStyleSheet("background:white;");
    /* 设置动画目标 */
    rollingAni.setTargetObject(this);
    /* 设置动画目标属性 */
    rollingAni.setPropertyName("posYShifting");
    /* 设置动画持续时间 */
    rollingAni.setDuration(500);
    /* 设置动画曲线样式 */
    rollingAni.setEasingCurve(QEasingCurve::OutCirc);
}

RollingHour::~RollingHour()
{

}

void RollingHour::setHourRange(int min, int max)
{
    min_Range = min;
    max_Range = max;
    update();
}

int RollingHour::PosYShifting()
{
    /* 注册属性取值函数 */
    return posYShifting;
}

void RollingHour::setPosYShifting(int posYShifting)
{
    /* 注册属性赋值函数 */
    this->posYShifting = posYShifting;
    update();
}

void RollingHour::mousePressEvent(QMouseEvent *event)
{
    rollingAni.stop();
    /* 开启鼠标拖动滚动判决 */
    rollingJudgment = true;
    /* 刷新按下时鼠标位置 */
    currentPosY = event->pos().y();
}

void RollingHour::wheelEvent(QWheelEvent *event)
{
    /* 以滚轮delta值正负性作为判决条件进行判决 */
    if(event->delta()>0)
    {
        if(currentHour > min_Range){
            posYShifting = this->height()/4;
        }
    }
    else{
        if(currentHour < max_Range){
            posYShifting = - this->height()/4;
        }
    }
    rollAnimation();
    update();
}

void RollingHour::mouseMoveEvent(QMouseEvent *event)
{
    if(rollingJudgment)
    {
        /*边界判决，防止超出范围*/
        if((currentHour == min_Range && event->pos().y() >= currentPosY)
                ||(currentHour == max_Range && event->pos().y() <= currentPosY)){
            return;
        }
        else{
            /*计算鼠标拖动时的垂直偏移量*/
            posYShifting = event->pos().y() - currentPosY;
        }
        update();
    }
}

void RollingHour::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
    /*拖动判决归位*/
    if(rollingJudgment)
    {
        rollingJudgment = false;
        /* 开启动画 */
        rollAnimation();
    }
}

void RollingHour::paintEvent(QPaintEvent *paint)
{
    Q_UNUSED(paint);
    /* 创建画笔对象 */
    QPainter painter(this);
    /* 画笔抗锯齿操作 */
    painter.setRenderHint(QPainter::TextAntialiasing);
    painter.setRenderHint(QPainter::Antialiasing, true);

    /* 偏移量检测，以1/4高度和取值范围为边界 */
    if(posYShifting >= height() / 4 && currentHour > min_Range)
    {
        /* 鼠标起始位置归位，即加上1/4的高度 */
        currentPosY += height()/4;
        /* 偏移量归位，即减去1/4的高度 */
        posYShifting -= height()/4;
        /* currentHour自减 */
        currentHour -= 1;
    }
    if(posYShifting <= -height() / 4 && currentHour < max_Range)
    {
        currentPosY -= height() / 4;
        posYShifting += height() / 4;
        currentHour += 1;
    }

    /* 调用函数画出数字currentHour */
    drawNumber(painter,currentHour,posYShifting);

    /* 调用函数画出两侧数字 */
    if(currentHour != min_Range){
        drawNumber(painter,currentHour - 1,posYShifting - height() / 4);
    }
    if(currentHour != max_Range){
        drawNumber(painter,currentHour + 1,posYShifting + height() / 4);
    }

    /* 调用函数画出两侧数字 */
    if(posYShifting >= 0 && currentHour - 2 >= min_Range){
        drawNumber(painter,currentHour - 2,posYShifting - height() / 2);
    }

    if(posYShifting <= 0 && currentHour + 2 <= max_Range){
        drawNumber(painter,currentHour + 2,posYShifting + height() /  2);
    }

    /* 画出数字currentHour两侧边框 */
    painter.setPen(QPen(QColor(70,144,249),2));
    painter.drawLine(0,height() / 8 * 3,width(),height() / 8 * 3);
    painter.drawLine(0,height() / 8 * 5,width(),height() / 8 * 5);
}

void RollingHour::drawNumber(QPainter &painter, int value, int offset)
{
    /* 通过偏移量控制数字大小size */
    int size = (this->height() - abs(offset)) / numberSize;
    /* 通过偏移量控制数字透明度transparency */
    int transparency = 255 - 510 * abs(offset) / height();
    /* 通过偏移量控制数字在ui界面占据空间高度height */
    int height = this->height() / 2 - 3 * abs(offset) / 5;
    /* 计算数字显示位置 */
    int y = this->height() / 2 + offset - height / 2;

    QFont font;
    /* 设置字体大小 */
    font.setPixelSize(size);
    /* 画笔设置字体 */
    painter.setFont(font);
    /* 画笔设置颜色 */
    painter.setPen(QColor(0,0,0,transparency));
    /* 画笔painter画出文本*/
    painter.drawText(QRectF(0,y,width(),height),Qt::AlignCenter,(QString::number(value)+tr("时")));
}

void RollingHour::rollAnimation()
{
    /* 动画判决，达到条件开启相应动画 */
    if(posYShifting > height() / 8)
    {
        /* 设置属性动画初始value */
        rollingAni.setStartValue(height() / 8 - posYShifting);
        /* 设置属性动画终止value */
        rollingAni.setEndValue(0);
        /* currentHour值变更 */
        currentHour--;
    }
    else if(posYShifting > -height() / 8)
    {
        /* 设置属性动画初始value */
        rollingAni.setStartValue(posYShifting);
        /* 设置属性动画终止value */
        rollingAni.setEndValue(0);
    }
    else if(posYShifting < -height() / 8)
    {
        /* 设置属性动画初始value */
        rollingAni.setStartValue(-height() / 8 - posYShifting);
        /* 设置属性动画终止value */
        rollingAni.setEndValue(0);
        /* currentHour值变更 */
        currentHour++;
    }
    /* 动画开始 */
    rollingAni.start();
    update();
}

        3、滚动日期时间选择器的基本原理和实现思路：        

        该方法主要是通过QPainter画笔类将想要的数字画出来的（包括三组数字：显示数字；显示数字的上一个数字；显示数字的下一个数字），除此之外在滚动时数字还应该有大小和对应位置的变化过程，在这里就应该引入一个动画，通过动画曲线来达到一个比较好的效果。

        动画则需要针对一个对象的具体属性作为动画目标来进行的，所以在这里我采用偏移量属性来实现滚动时的动画效果，并且通过偏移量来判断滚动的结果以及滚动时的数字字体大小。在整个代码中我也对每句话都做了注解，有需要学习的小伙伴可以自行看一下。

        需要注意的是针对不是Object的基本属性（类如：pos()、size()、width()等基本属性）时，我们需要将其注册到QT中去，否则这个属性是无法运用动画的。

        最后，通过封装和实例化对象，可以将这个滚动选择封装成一个类，从而实现一个随取随用的自定义控件，以后不论在什么项目中都可以采用这个做法去实现一个日期时间选择器。

        4、实现效果：

        整个自定义控件的实现效果是这样的：

 

        对于最后的整体实现效果，如果有需要可以看我主页哦！！！ 

C++菜苟_q_2463367513
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Qt日历控件示例-QCalendarWidget
MusicScore的博客
09-01 1382
QCalendarWidget介绍 QCalendarWidget 是 Qt 框架中提供的一个日期选择控件,用户可以通过该控件快速选择需要的日期,并且支持显示当前月份的日历。
Qt 滚动 日期 选择器 循环选择
02-27
Qt 滚动 日期 选择器 循环选择 支持年月日时分秒可以循环选择
用QT构建的一个滚动日期时间选择器（仿网页注册页面滚动日期时间选择器、上手快、制作轻松、直接套用）
04-06
适用于任何有日期时间选择器需求的项目中，可轻松嵌入，逻辑清晰并且美观，滚动动画丝滑
QT自绘日历选择控件和时间滚动控件
m0_54057303的博客
05-10 309
QT自绘日历选择控件和时间滚动控件
QT桌面项目（日历程序）
m0_49476241的博客
05-26 3157
本篇文章继续为大家讲解QT桌面项目，那么这篇文章我们将实现一个日历程序。在QT中要想实现一个简单的日历程序是非常简单的，使用QT中自带的QCalendarWidget类即可实现。QCalendarWidget 是 Qt 框架中提供的一个日期选择控件，用户可以通过该控件快速选择需要的日期，并且支持显示当前月份的日历。显示日历：QCalendarWidget 可以显示当前月份的日历，同时支持快速跳转到其他月份。
Qt的日期、时间、日历等控件
weixin_43756295的博客
12-04 1358
Qt的日期、时间、日历等控件
qt自定义时间选择控件窗口
bangtanhui的博客
03-08 849
【代码】qt自定义时间选择控件窗口。
QT-时间选择器(Time Edit)
ugetoneshot的博客
03-06 506
初始只有时分，没有秒。->选中Data Edit->右侧displayFormat改成hh:mm:ss。后来知道了Data Edit插件,可以设置时分秒，而且越界也不用自己设置。初学时研究了很久想用一个Combo Box加滑动条来设置，发现比较麻烦。（但是还是没有满足滑动的要求，后期学习再补充）
Qt实现自定义滚动日期选择部品（C++）
03-16
Qt实现自定义滚动日期选择部品（C++）
qt_滚动式日期时刻设定控件,qt时间控件,C/C++
01-19
qt实现简易日历 通过qt编程 来实现滚动条的移动
qt实现的滑动设置时间自定义控件
04-03
分享一个Qt实现的滑动设置自定义控件，常用于设置时间，还有一些其他的类似设置； 没有积分的朋友私信我
Qt简单安卓日期选择示例
08-07
Qt写的简单的日期选择Test,仅供初学者参考学习。
日期与时间滑动选择器
07-23
如图：http://blog.csdn.net/hanhongtao123/article/details/47031049
选择时间自定义控件(滚动选择时间)
10-10
包含了选择时间自定义控件的绘制，其中可以通过鼠标滑动或者滚动鼠标滚轮选择时间，可以修改控件背景颜色和字体颜色，修改边框颜色等属性，设置时间值个数以及范围。
Qt自定义日期选择控件
liang520999的博客
07-22 1693
QDateTimeEdit 或 QCalendarWidget 不好操作，美化界面时都比较难实现，很多效果实现不了，就有了想要自定义一个日期选择的控制，操作简单，界面可以结合整体界面的样式通过QSS美化。 一、demo 展式 二、控制源码及Demo、样式下载地址： ...
QT中日期和时间类
记录我目之所及的世界
07-28 862
qt中的日期和时间
QT 时间选择器(时、分)
linkang1024的博客
04-01 2288
qt中很少有时、分选择器，一般的做法都是用QComboBox下拉选择时间，但是在触摸屏中，使用QComboBox不怎么方便。现绘制一个时钟，通过按钮点击选择时、分。先上图： 里面的什么AM、PM、取消、保存可自行扩展，主要说明一下这个时钟是如何创建的。 创建数字1~12按钮代码： //初始化界面 void GZNumber::initUI(QRect rect) { this...
Qt中的日期和时间
好好学习，天天向上
06-23 7008
本文讲解了Qt中会使用到的时间和日期的相关知识
Qt：2.环境搭建
最新发布
weixin_63716012的博客
06-25 317
搭建需要的三个组件：C++编译器（gcc，cl.exe等）、Qt的SDK：软件开发工具包，Windows版本的SDK内置了C++编译器mingw、Qt的集成开发环境，IDE，Qt creator、visual studio、Eclipse等。
qt5实现滚动屏时间选择器
07-27
在Qt5中，可以使用QScrollArea和QTimeEdit控件来实现滚动屏时间选择器。 首先，创建一个QScrollArea控件，设置其大小和位置，并将其放置在需要的窗体上。 然后，创建一个QTimeEdit控件，并设置其大小和位置。将QTimeEdit控件添加到QScrollArea控件中。 接下来，设置QScrollArea控件的水平和垂直滚动条的策略，以便能够滚动显示时间选择器。 为了实现滚动屏效果，还需要设置QTimeEdit控件的最小和最大时间范围，确保能够滚动到所需的时间区间。 最后，将QScrollArea控件显示出来。 下面是一个简单的示例代码： ```cpp #include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget widget; widget.setWindowTitle("滚动屏时间选择器"); QScrollArea scrollArea(&widget); scrollArea.setGeometry(50, 50, 200, 200); QTimeEdit timeEdit(&scrollArea); timeEdit.setGeometry(0, 0, 180, 20); timeEdit.setMinimumTime(QTime(0, 0)); timeEdit.setMaximumTime(QTime(23, 59)); scrollArea.setWidget(&timeEdit); scrollArea.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn); scrollArea.setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn); widget.show(); return app.exec(); } ``` 运行上述代码，即可看到一个具备滚动屏功能的时间选择器。用户可以通过滚动水平和垂直滚动条来选择所需的时间。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值