QT日期时间选择器自定义滚动选择

这不就好起来了吗_88

已于 2024-07-05 16:09:24 修改

阅读量903

点赞数 7

文章标签： qt 开发语言

于 2024-05-31 17:22:23 首次发布

本文链接：https://blog.youkuaiyun.com/li_yi_feng_/article/details/139297771

版权

文章目录

效果图
CRollBox.h
CRollBox.cpp
非原创

效果图

在这里插入图片描述

CRollBox.h

#include <QWidget>
#include <QPainter>
#include <QMouseEvent>
#include <QPropertyAnimation>
class CRollingBox : public QWidget
{
    Q_OBJECT
        Q_PROPERTY(int deviation READ ReadDeviation WRITE SetDeviation)
public:
    explicit CRollingBox(QWidget* parent = nullptr);
    ~CRollingBox();
signals:
    /**
    * @brief 当前数值改变信号
    */
    void CurrentValueChanged(int value);
    /**
    * @brief 偏移量改变信号
    */
    void DeviationChange(float deviation);
public:
    /**
    * @brief 设置范围
    */
    void SetRange(int min, int max);
    /**
    * @brief 获取当前值
    */
    int ReadValue()const;
    /**
    * @brief 设置当前值
    */
    void SetValue(int currValue);
    /**
    * @brief 设置文字阴影大小
    */
    void SetShadowSize(int width,int height);
    /**
    * @brief 设置为选择AM/PM
    */
    void SetIsHalfDay();
protected:
    /**
    * @brief 鼠标点击事件
    */
    void mousePressEvent(QMouseEvent*);
    /**
    * @brief 鼠标移动事件
    */
    void mouseMoveEvent(QMouseEvent*);
    /**
    * @brief 鼠标释放事件
    */
    void mouseReleaseEvent(QMouseEvent*);
    /**
    * @brief 绘制事件
    */
    void paintEvent(QPaintEvent*);
    /**
    * @brief 绘制数字
    */
    void PaintNum(QPainter& painter, int num, int deviation,bool isHalfDay);
    /**
    * @brief 使选中的数字回到屏幕中间
    */
    void Homing();
    /**
    * @brief 获取鼠标移动偏移量，默认为0
    */
    int ReadDeviation();
    /**
    * @brief 设置偏移量
    */
    void SetDeviation(int n);
private:
    int m_numSize;                      //计算所得的数字字符尺寸，以最长的情况为准
    int m_minRange;                     //最小值
    int m_maxRange;                     //最大值
    int m_deviation;                    //偏移量，记录鼠标按下后移动的垂直距离
    int m_mouseSrcPos;                  //鼠标纵坐标
    int m_shadowWidth;                  //文字阴影宽度
    int m_shadowHeight;                 //文字阴影高度
    int m_currentValue;                 //当前值
    bool isHalfDay;                     //是否为12小时制
    bool isDragging;                    //鼠标是否按下
    QPropertyAnimation* homingAni;      //动画效果
};

CRollBox.cpp

#include "RollingBox.h"
CRollingBox::CRollingBox(QWidget* parent) :
    QWidget(parent),
    m_numSize(6),
    m_minRange(0),
    m_maxRange(0),
    m_deviation(0),
    m_mouseSrcPos(-1),
    m_shadowWidth(100),
    m_shadowHeight(80),
    m_currentValue(-1),
    isHalfDay(false),
    isDragging(false)
{
    this->setWindowFlags(windowFlags() & ~Qt::WindowMinMaxButtonsHint);
    homingAni = new QPropertyAnimation(this, "deviation");      //一个控制动画效果的类
    homingAni->setDuration(300);                                //设置动画持续时间
    homingAni->setEasingCurve(QEasingCurve::OutQuad);           //设置动画的缓动曲线，这里OutQuad是二次函数缓和曲线，减 速到零
}

CRollingBox::~CRollingBox()
{

}
//设置范围
void CRollingBox::SetRange(int min, int max)
{
    m_minRange = min;
    m_maxRange = max;

    if (m_currentValue < min)        //如果选中的当前值小于最小值，就等于最小值
        m_currentValue = min;
    if (m_currentValue > max)        //最大值同理
        m_currentValue = max;

    //计算字符尺寸
    m_numSize = 3;
    int temp = m_maxRange;
    while (temp > 0)
    {
        temp /= 10;
        m_numSize++;
    }

    repaint();      //重绘此组件，需要进行重绘时，要使用repaint
}
//获取当前值
int CRollingBox::ReadValue()const
{
    return m_currentValue;
}
//设置当前值
void CRollingBox::SetValue(int currValue)
{
    m_currentValue = currValue;
}
//设置文字阴影大小
void CRollingBox::SetShadowSize(int width, int height)
{
    m_shadowWidth = width;
    m_shadowHeight = height;
}
//设置为选择AM/PM
void CRollingBox::SetIsHalfDay()
{
    isHalfDay = true;
}
//鼠标按下事件
void CRollingBox::mousePressEvent(QMouseEvent* e)
{
    homingAni->stop();      //动画停止
    isDragging = 1;         //鼠标是否按下的标志位，布尔类型
    m_mouseSrcPos = e->pos().y();   //鼠标按下时候的y轴坐标记录下来
}
//鼠标移动事件
void CRollingBox::mouseMoveEvent(QMouseEvent* e)
{
    if (isDragging)
    {
        if ((m_currentValue == m_minRange && e->pos().y() >= m_mouseSrcPos) ||
            (m_currentValue == m_maxRange && e->pos().y() <= m_mouseSrcPos))
            return;

        m_deviation = e->pos().y() - m_mouseSrcPos;

        if (m_deviation > (height() - 1) / 4)
            m_deviation = (height() - 1) / 4;
        else if (m_deviation < -(height() - 1) / 4)
            m_deviation = -(height() - 1) / 4;

        emit DeviationChange((float)m_deviation / ((height() - 1) / 5));

        repaint();
    }
}
//鼠标松开事件
void CRollingBox::mouseReleaseEvent(QMouseEvent*)
{
    if (isDragging)
    {
        isDragging = 0;
        Homing();
    }
}
//绘图事件
void CRollingBox::paintEvent(QPaintEvent*)
{
    QPainter painter(this);     //创建画家类，指定绘图设备
    painter.setRenderHint(QPainter::Antialiasing, true);    //抗锯齿

    int Width = width() - 1;
    int Height = height() - 1;

    if (m_deviation >= Height / 4 && m_currentValue > m_minRange)  //偏移量大于1/4的时候，数字减一
    {
        m_mouseSrcPos += Height / 4;  //鼠标起始位置重新设置，即加上1/4的高度
        m_deviation -= Height / 4;    //偏移量重新设置，即减去1/4的高度
        m_currentValue -= 1;
    }
    if (m_deviation <= -Height / 4 && m_currentValue < m_maxRange) //同理，数字加一
    {
        m_mouseSrcPos -= Height / 4;
        m_deviation += Height / 4;
        m_currentValue += 1;
    }

    //中间数字
    PaintNum(painter, m_currentValue, m_deviation, isHalfDay);   //将选中数字画到中间

    //两侧数字1
    if (m_currentValue != m_minRange)    //选中的数字不是最小，不是最大，那么就有两侧数字，然后画出两侧数字
        PaintNum(painter, m_currentValue - 1, m_deviation - Height / 4, isHalfDay);
    if (m_currentValue != m_maxRange)
        PaintNum(painter, m_currentValue + 1, m_deviation + Height / 4, isHalfDay);

    //两侧数字2,超出则不显示
    if (m_deviation >= 0 && m_currentValue - 2 >= m_minRange)
        PaintNum(painter, m_currentValue - 2, m_deviation - Height / 2, isHalfDay);
    if (m_deviation <= 0 && m_currentValue + 2 <= m_maxRange)
        PaintNum(painter, m_currentValue + 2, m_deviation + Height / 2 , isHalfDay);

    //中间数字两侧的边框
    QColor color(0, 0, 0, 50);
    color.setAlphaF(0.2);
    painter.setBrush(color);
    painter.drawRoundedRect((Width / 2) - (m_shadowWidth / 2) - 2, (Height / 2) - 35, m_shadowWidth - 2, m_shadowHeight, 12, 12);
}
//画数字
void CRollingBox::PaintNum(QPainter& painter, int num, int deviation , bool isHalfDay)
{
    int Width = this->width() - 1;
    int Height = this->height() - 1;

    //int size = (Height - qAbs(deviation)) / m_numSize;        //qAbs 返回输入参数对应类型的绝对值
    int size = (Height - qAbs(deviation)) / 6;
    int transparency = 255 - 510 * qAbs(deviation) / Height;
    int height = Height / 2 - 3 * qAbs(deviation) / 5;
    int y = Height / 2 + deviation - height / 2;

    QFont font;
    font.setPixelSize(size);
    painter.setFont(font);
    painter.setPen(QColor(0, 0, 0, transparency));
    if (isHalfDay) {
        if (num == 0) {
            painter.drawText(QRectF(0, y, Width, height), Qt::AlignCenter, "AM");
        }
        else {
            painter.drawText(QRectF(0, y, Width, height), Qt::AlignCenter, "PM");
        }
    }
    else {
        if (num < 10) {
            painter.drawText(QRectF(0, y, Width, height), Qt::AlignCenter, "0" + QString::number(num));
        }
        else {
            painter.drawText(QRectF(0, y, Width, height), Qt::AlignCenter, QString::number(num));
        }
    }
}

void CRollingBox::Homing()
{
    if (m_deviation > height() / 8)
    {
        homingAni->setStartValue((height() - 1) / 8 - m_deviation);
        homingAni->setEndValue(0);
        m_currentValue--;
    }
    else if (m_deviation > -height() / 8)
    {
        homingAni->setStartValue(m_deviation);
        homingAni->setEndValue(0);
    }
    else if (m_deviation < -height() / 8)
    {
        homingAni->setStartValue(-(height() - 1) / 8 - m_deviation);
        homingAni->setEndValue(0);
        m_currentValue++;
    }
    emit CurrentValueChanged(m_currentValue);
    homingAni->start();
}

int CRollingBox::ReadDeviation()
{
    return m_deviation;
}

void CRollingBox::SetDeviation(int n)
{
    m_deviation = n;
    repaint();
}

SelectDTDialog .h

#include <QWidget>
#include "RollingBox.h"
#include <QTimer>
class SelectDTDialog : public QWidget
{
    Q_OBJECT

public:
    SelectDTDialog(QWidget *parent = nullptr);
    ~SelectDTDialog();
public slots:
    /**
    * @brief 刷新日期
    */
    void ReceiveValue();
    int MaxValue();
private:
    QTimer* time;
    CRollingBox* rby;
    CRollingBox* rbm;
    CRollingBox* rbd;
    CRollingBox* rbh;
    CRollingBox* rb_m;
    CRollingBox* rb_d;
    int m_currYear;         // 当前年份
    int m_currMonth;        // 当前月份
    int m_currDay;          // 当前日期
    int m_maxRange;         // 设置日期最大值
};

SelectDTDialog .cpp



#pragma execution_character_set("utf-8")
#include "SelectDTDialog.h"

#include <QHBoxLayout>
#include <QLabel>
SelectDTDialog::SelectDTDialog(QWidget *parent)
    : QWidget(parent)
{
    rby = new CRollingBox(this);
    rby->setFixedSize(140, 300);
    rby->SetRange(2000, 2100);
    rby->SetShadowSize(130,80);
    rbm = new CRollingBox(this);
    rbm->setFixedSize(120, 300);
    rbm->SetRange(1, 12);
    rbd = new CRollingBox(this);
    rbd->setFixedSize(120, 300);
    rbd->SetRange(0, 31);
    rbh = new CRollingBox(this);
    rbh->setFixedSize(120, 300);
    rbh->SetRange(0, 11);
    rb_m = new CRollingBox(this);
    rb_m->setFixedSize(120, 300);
    rb_m->SetRange(0, 59);
    rb_d = new CRollingBox(this);
    rb_d->setFixedSize(120, 300);
    rb_d->SetRange(0, 1);
    rb_d->SetIsHalfDay();

    QLabel* lab1 = new QLabel(this);
    lab1->resize(50, 300);
    lab1->setText("年");
    lab1->setAlignment(Qt::AlignVCenter | Qt::AlignLeft);
    lab1->setStyleSheet("font-size: 30px;color:black;");

    QLabel* lab2 = new QLabel(this);
    lab2->resize(50, 300);
    lab2->setText("月");
    lab2->setAlignment(Qt::AlignVCenter | Qt::AlignLeft);
    lab2->setStyleSheet("font-size: 30px;color:black;");

    QLabel* lab3 = new QLabel(this);
    lab3->resize(50, 300);
    lab3->setText("日");
    lab3->setAlignment(Qt::AlignVCenter | Qt::AlignLeft);
    lab3->setStyleSheet("font-size: 30px;color:black;");

    QLabel* lab4 = new QLabel(this);
    lab4->resize(50, 300);
    lab4->setText(":");
    lab4->setAlignment(Qt::AlignVCenter | Qt::AlignLeft);
    lab4->setStyleSheet("font-size: 50px;color:black;");

    QHBoxLayout* hLayout = new QHBoxLayout();
    hLayout->setMargin(0);
    hLayout->addWidget(rby);
    hLayout->addWidget(lab1);
    hLayout->addWidget(rbm);
    hLayout->addWidget(lab2);
    hLayout->addWidget(rbd);
    hLayout->addWidget(lab3);
    hLayout->addWidget(rbh);
    hLayout->addWidget(lab4);
    hLayout->addWidget(rb_m);
    hLayout->addWidget(rb_d);
    hLayout->setSpacing(0);
    this->setLayout(hLayout);

    time = new QTimer(this);
    time->start(33);     //每隔若干秒读取一次当前选中的值(default:30帧)
    connect(time, SIGNAL(timeout()), this, SLOT(ReceiveValue()));
}

SelectDTDialog::~SelectDTDialog()
{}

void SelectDTDialog::ReceiveValue()
{
    m_currYear = rby->ReadValue();
    m_currMonth = rbm->ReadValue();
    m_currDay = rbd->ReadValue();
    rbd->SetRange(1, SelectDTDialog::MaxValue());
}

int SelectDTDialog::MaxValue()
{
    //日期最大值(随年份和月份变化)
    if (m_currMonth == 1 || m_currMonth == 3 || m_currMonth == 5 || m_currMonth == 7 || m_currMonth == 8
        || m_currMonth == 10 || m_currMonth == 12)
        m_maxRange = 31;
    else if (m_currMonth == 4 || m_currMonth == 6 || m_currMonth == 9 || m_currMonth == 11)
        m_maxRange = 30;
    else if (m_currMonth == 2 && ((m_currYear % 4 == 0 && m_currYear % 100 != 0) || m_currYear % 400 == 0))
        m_maxRange = 29;
    else m_maxRange = 28;

    return m_maxRange;
}

main.cpp

#include "SelectDTDialog.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    SelectDTDialog w;
    w.resize(940, 400);
    w.show();
    return a.exec();
}

代码重点解释

Q_PROPERTY(int deviation READ ReadDeviation WRITE SetDeviation))

负责动画效果的，里面涉及到两个函数ReadDeviation 、SetDeviation，如果要修改函数名的话，这句话也要跟着修改
2.
void SetIsHalfDay()设置为12小时制显示AM/PM，需要搭配SetRange(0,1)，0——AM，1——PM
3.
日期选择时需要一个关键的函数，就是定时去刷新日期的范围，因为每个月份对应的天数不同int MaxValue()
绑定定时器

QTimer time = new QTimer(this);
time->start(33);
connect(time,SIGNAL(timeout()),this,SLOT(UpdateValue()));

public slots:
	void UpdateValue(){
		CRollingBox->SetRange(1,MaxValue());
	};

4.在领导的指示下，发现定时器刷新这个功能没必要，完全可以用信号实现，CRollBox里的CurrentValueChanged信号，把年份和月份的选择器的类的CurrentValueChanged信号去绑定之前定时器的槽函数。（这里自己去修改一下，去掉信号的参数匹配信号和槽）

非原创

原创链接：Qt滚动日期选择器
原创作者：sensetime阿清

我在其基础上进行了封装，希望可以帮助到大家