如何为QListView列表项的边框添加选中动画效果？

嘿，我来给你一个更优雅的实现思路——直接用Qt的QPropertyAnimation来处理这个边框过渡，比手动写定时器要省心太多，还能避免同步问题。下面是一步步的具体实现：

1. 给自定义Delegate加可动画的属性 #

首先，你的自定义Delegate需要一个动态变化的边框宽度属性，还要能在属性变化时触发视图重绘。代码大概是这样：

class CustomDelegate : public QStyledItemDelegate
{
    Q_OBJECT
    // 声明可动画的属性，QPropertyAnimation需要这个标记
    Q_PROPERTY(int currentBorderWidth READ currentBorderWidth WRITE setCurrentBorderWidth NOTIFY borderWidthChanged)

public:
    explicit CustomDelegate(QObject *parent = nullptr) 
        : QStyledItemDelegate(parent), m_currentBorderWidth(0) {}

    // 获取当前边框宽度
    int currentBorderWidth() const { return m_currentBorderWidth; }
    // 设置边框宽度，同时触发重绘
    void setCurrentBorderWidth(int width) {
        if (m_currentBorderWidth != width) {
            m_currentBorderWidth = width;
            emit borderWidthChanged();
            // 通知视图刷新，这里可以精准刷新选中项，我先写个简单的全局刷新
            if (auto view = qobject_cast<QAbstractItemView*>(parent())) {
                view->viewport()->update();
            }
        }
    }

    // 重写paint方法，处理自定义绘制
    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override {
        // 先调用父类的paint，保证默认的文本、图标等绘制逻辑正常
        QStyledItemDelegate::paint(painter, option, index);

        // 只给选中的项画边框
        if (option.state & QStyle::State_Selected) {
            painter->save();
            int borderWidth = m_currentBorderWidth;
            if (borderWidth > 0) {
                QPen pen(Qt::darkBlue, borderWidth); // 你可以自己改颜色
                pen.setStyle(Qt::SolidLine);
                painter->setPen(pen);
                // 调整矩形，避免边框覆盖项内容，把边框画在项的边缘内侧
                QRect borderRect = option.rect.adjusted(borderWidth/2, borderWidth/2, -borderWidth/2, -borderWidth/2);
                painter->drawRect(borderRect);
            }
            painter->restore();
        }
    }

signals:
    void borderWidthChanged();

private:
    int m_currentBorderWidth;
    // 用来存动画对象，避免重复创建
    QPointer<QPropertyAnimation> m_borderAnimation; 
};

2. 监听选中状态变化，触发动画 #

接下来，你需要在列表视图那边监听选中项的变化，启动对应的动画。比如你的列表是QListView *myListView，可以这么写：

// 在视图所在的类中，比如MainWindow的构造函数里
connect(myListView->selectionModel(), &QItemSelectionModel::selectionChanged, this, [=](const QItemSelection &selected, const QItemSelection &deselected) {
    auto delegate = qobject_cast<CustomDelegate*>(myListView->itemDelegate());
    if (!delegate) return;

    // 选中项时：从0过渡到5像素边框
    if (!selected.isEmpty()) {
        // 如果之前有动画，先停止
        if (delegate->m_borderAnimation) {
            delegate->m_borderAnimation->stop();
        }
        delegate->m_borderAnimation = new QPropertyAnimation(delegate, "currentBorderWidth", delegate);
        delegate->m_borderAnimation->setStartValue(0);
        delegate->m_borderAnimation->setEndValue(5);
        delegate->m_borderAnimation->setDuration(300); // 动画时长300毫秒，可自定义
        // 可选：加个缓动曲线，让动画更自然，比如结尾减速
        delegate->m_borderAnimation->setEasingCurve(QEasingCurve::OutQuad);
        delegate->m_borderAnimation->start(QAbstractAnimation::DeleteWhenStopped);
    } 
    // 取消选中时：从5过渡到0像素边框
    else if (!deselected.isEmpty()) {
        if (delegate->m_borderAnimation) {
            delegate->m_borderAnimation->stop();
        }
        delegate->m_borderAnimation = new QPropertyAnimation(delegate, "currentBorderWidth", delegate);
        delegate->m_borderAnimation->setStartValue(5);
        delegate->m_borderAnimation->setEndValue(0);
        delegate->m_borderAnimation->setDuration(300);
        delegate->m_borderAnimation->setEasingCurve(QEasingCurve::OutQuad);
        delegate->m_borderAnimation->start(QAbstractAnimation::DeleteWhenStopped);
    }
});

3. 一些优化小细节 #

• 精准重绘：上面的代码是全局刷新视图，如果你想更高效，可以只刷新选中/取消选中的项，比如用myListView->update(selected.indexes().first())来刷新选中的那个项。
• 动画复用：如果频繁选中取消，每次创建新的动画对象也没问题，但也可以提前创建好动画对象，每次修改start/end值再启动，减少内存开销。
• 边框颜色：你可以根据选中状态的不同（比如是否获得焦点）来调整边框颜色，让交互更清晰。

如果你非要用定时器的话，其实也可以：在Delegate里加一个QTimer，每次tick时递增或递减currentBorderWidth，直到达到目标值就停止定时器。但QPropertyAnimation已经帮我们处理了帧同步、动画曲线这些细节，显然是更优的选择。

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