如何为QDateTimeEdit的聚焦分段添加Opacity闪烁动画？

核心问题分析 #

Qt的QPropertyAnimation仅支持QObject的属性，而QDateTimeEdit::Section是枚举类型，无法直接作为动画目标。要实现指定分段的闪烁效果，需要通过间接控制重绘逻辑来达成。

解决方案一：自定义QDateTimeEdit子类（推荐） #

通过子类化QDateTimeEdit，添加可动画的自定义属性，结合重绘逻辑实现分段的透明度平滑闪烁。

实现代码 #

#include <QDateTimeEdit>
#include <QVariantAnimation>
#include <QPainter>
#include <QStyleOptionDateTimeEdit>

class AnimatedDateTimeEdit : public QDateTimeEdit
{
    Q_OBJECT
    Q_PROPERTY(qreal animationOpacity READ animationOpacity WRITE setAnimationOpacity NOTIFY animationOpacityChanged)

public:
    explicit AnimatedDateTimeEdit(QWidget *parent = nullptr) 
        : QDateTimeEdit(parent), m_opacity(1.0)
    {
        // 初始化闪烁动画：1秒内从完全显示到隐藏，无限循环
        m_animation = new QVariantAnimation(this);
        m_animation->setDuration(1000);
        m_animation->setStartValue(1.0);
        m_animation->setEndValue(0.0);
        m_animation->setLoopCount(-1);
        m_animation->setEasingCurve(QEasingCurve::InOutQuad);

        // 监听分段切换，启动/停止动画
        connect(this, &QDateTimeEdit::sectionChanged, this, [this](Section section) {
            section == YearSection ? m_animation->start() : (m_animation->stop(), setAnimationOpacity(1.0));
        });

        // 绑定动画值到自定义属性，触发重绘
        connect(m_animation, &QVariantAnimation::valueChanged, this, &AnimatedDateTimeEdit::setAnimationOpacity);
    }

    qreal animationOpacity() const { return m_opacity; }
    void setAnimationOpacity(qreal opacity) {
        if (qFuzzyCompare(m_opacity, opacity)) return;
        m_opacity = opacity;
        emit animationOpacityChanged();
        update();
    }

protected:
    void paintEvent(QPaintEvent *event) override {
        // 先绘制控件默认内容
        QDateTimeEdit::paintEvent(event);

        // 仅对当前聚焦的年份分段应用闪烁效果
        if (currentSection() != YearSection) return;

        QPainter painter(this);
        painter.setOpacity(1.0 - m_opacity); // 动画值从1到0，遮罩透明度从0到1，实现平滑闪烁
        painter.fillRect(getSectionRect(YearSection), palette().window().color()); // 用背景色填充实现隐藏效果
    }

private:
    QRect getSectionRect(Section targetSection) {
        // 通过QStyleOption获取各分段的区域
        QStyleOptionDateTimeEdit opt;
        initStyleOption(&opt);
        for (const auto &sectionItem : opt.sections) {
            if (sectionItem.section == targetSection) {
                return sectionItem.rect;
            }
        }
        return QRect();
    }

    QVariantAnimation *m_animation;
    qreal m_opacity;

signals:
    void animationOpacityChanged();
};

说明 #

1. 自定义animationOpacity属性作为动画目标，由QVariantAnimation控制其值在1.0（完全显示）和0.0（完全隐藏）之间循环变化。
2. 在paintEvent中，先绘制控件默认内容，再对年份分段区域绘制半透明背景遮罩，通过遮罩透明度的渐变实现平滑闪烁。
3. 监听sectionChanged信号，仅当用户聚焦年份分段时启动动画，切换到其他分段时停止并恢复默认状态。

解决方案二：事件过滤器（无需子类化） #

如果不想修改控件继承关系，可以通过事件过滤器拦截QDateTimeEdit的绘制事件，注入闪烁逻辑。

实现代码 #

#include <QDateTimeEdit>
#include <QVariantAnimation>
#include <QPainter>
#include <QStyleOptionDateTimeEdit>

class DateTimeEditAnimationFilter : public QObject
{
    Q_OBJECT
public:
    explicit DateTimeEditAnimationFilter(QDateTimeEdit *edit) 
        : QObject(edit), m_edit(edit), m_opacity(1.0)
    {
        m_animation = new QVariantAnimation(this);
        m_animation->setDuration(1000);
        m_animation->setStartValue(1.0);
        m_animation->setEndValue(0.0);
        m_animation->setLoopCount(-1);

        connect(m_edit, &QDateTimeEdit::sectionChanged, this, [this](QDateTimeEdit::Section section) {
            if (section == QDateTimeEdit::YearSection) {
                m_animation->start();
            } else {
                m_animation->stop();
                m_opacity = 1.0;
                m_edit->update();
            }
        });

        connect(m_animation, &QVariantAnimation::valueChanged, this, [this](const QVariant &val) {
            m_opacity = val.toReal();
            m_edit->update();
        });

        m_edit->installEventFilter(this);
    }

protected:
    bool eventFilter(QObject *watched, QEvent *event) override {
        if (watched == m_edit && event->type() == QEvent::Paint) {
            // 让控件先完成默认绘制
            m_edit->event(event);

            // 对年份分段应用闪烁效果
            if (m_edit->currentSection() == QDateTimeEdit::YearSection) {
                QPainter painter(m_edit);
                painter.setOpacity(1.0 - m_opacity);
                painter.fillRect(getSectionRect(QDateTimeEdit::YearSection), m_edit->palette().window().color());
            }
            return true; // 拦截事件，避免重复绘制
        }
        return QObject::eventFilter(watched, event);
    }

private:
    QRect getSectionRect(QDateTimeEdit::Section targetSection) {
        QStyleOptionDateTimeEdit opt;
        m_edit->initStyleOption(&opt);
        for (const auto &item : opt.sections) {
            if (item.section == targetSection) return item.rect;
        }
        return QRect();
    }

    QDateTimeEdit *m_edit;
    QVariantAnimation *m_animation;
    qreal m_opacity;
};

// 使用方式
QDateTimeEdit *edit = new QDateTimeEdit(this);
new DateTimeEditAnimationFilter(edit);

替代方案：样式表结合定时器（无平滑过渡） #

如果可以接受无平滑过渡的闪烁，也可以用定时器每秒切换样式表，但无法实现透明度的渐变效果：

// 初始化定时器
QTimer *blinkTimer = new QTimer(this);
connect(blinkTimer, &QTimer::timeout, this, [this]() {
    static bool isVisible = true;
    if (currentSection() == YearSection) {
        setStyleSheet(isVisible ? "" : "QDateTimeEdit { selection-background-color: transparent; }");
        isVisible = !isVisible;
    } else {
        setStyleSheet("");
        blinkTimer->stop();
    }
});

// 监听分段变化启动定时器
connect(this, &QDateTimeEdit::sectionChanged, this, [this, blinkTimer](Section section) {
    section == YearSection ? blinkTimer->start(1000) : blinkTimer->stop();
});

内容的提问来源于stack exchange，提问作者developer_