Qt列表等控件实现平滑滚动

Qt自带的的列表控件是不能平滑滚动的，但如果滚动速度快的话很容易引起视线丢失，体验效果很差。本篇主要讲述如何在Qt中对列表控件加入平滑滚动。文中以QScrollArea控件为例，其他控件方法一样。

原理

Qt的列表控件中，有以下两个接口：

void QAbstractScrollArea::setHorizontalScrollBar(QScrollBar *scrollBar);
void QAbstractScrollArea::setVerticalScrollBar(QScrollBar *scrollBar);

显然上述两个接口的作用是设置控件的横纵两个滚动条，以指针形式传入，我们将以此来实现控制页面的滚动。传入滚动条对象后，我们就可以使用setValue()来间接控制页面的滚动了。然后再使用QPropertyAnimation类来实现滚动的效果。

实现

一、自定义滚动条控件

需要实现两个功能：

当使用setValue()对滚动条的滑块进行移动时，滑块会在一个时间段内以某种规律连续的移动到目标位置，而不是瞬间移动。
新增一个槽函数void scroll(int value)，实现传入一个数字后相对滚动指定距离。如：scroll(100)就是向下滚动100个单位。

头文件：






class SmoothScrollBar : public QScrollBar
{
    Q_OBJECT
public:
    SmoothScrollBar(QWidget *parent=nullptr);
private:
    //这里重写鼠标事件的目的是在手动点击或拖动滚动条时更新m_targetValue_v变量，并且在拖动时立即结束滚动的动画。
    //这里如果不明白作用，可以先注释掉看看手动拖动滚动条时对动画有什么影响。
    void mousePressEvent(QMouseEvent *) override;
    void mouseReleaseEvent(QMouseEvent *) override;
    void mouseMoveEvent(QMouseEvent *) override;

    QPropertyAnimation *m_scrollAni; //用来实现动画
    int m_targetValue_v; //用来记录目标位置的变量
public slots:
    void setValue(int value); //重写的setValue槽函数，实现动画效果
    void scroll(int value); //新增相对滚动的槽函数，value为滚动距离的矢量表示
signals:
};

// SMOOTHSCROLLBAR_H

源文件：



SmoothScrollBar::SmoothScrollBar(QWidget* parent):QScrollBar(parent)
{
    m_scrollAni=new QPropertyAnimation;
    m_scrollAni->setTargetObject(this);
    m_scrollAni->setPropertyName("value");
    m_scrollAni->setEasingCurve(QEasingCurve::OutQuint); //设置动画曲线，在Qt文档中有详细的介绍
    m_scrollAni->setDuration(800); //设置动画时间，数值越小播放越快
    m_targetValue_v=value(); //将m_targetValue_v初始化
}

void SmoothScrollBar::setValue(int value)
{
    m_scrollAni->stop();//停止现在的动画，防止出现冲突
    m_scrollAni->setStartValue(this->value()); //设置动画滚动的初始值为当前位置
    m_scrollAni->setEndValue(value); //设置动画的结束位置为目标值
    m_scrollAni->start(); //开始动画
}

void SmoothScrollBar::scroll(int value)
{
    m_targetValue_v-=value; //将目标值和相对位置进行运算
    setValue(m_targetValue_v); //开始动画
}

void SmoothScrollBar::mousePressEvent(QMouseEvent *e)
{
    //当使用鼠标操作滚动条时，不会刷新m_targetValue_v的值，因而需要重写事件，对其进行刷新。
    m_scrollAni->stop();
    QScrollBar::mousePressEvent(e);
    m_targetValue_v=value();
}

void SmoothScrollBar::mouseReleaseEvent(QMouseEvent *e)
{
    m_scrollAni->stop();
    QScrollBar::mouseReleaseEvent(e);
    m_targetValue_v=value();
}

void SmoothScrollBar::mouseMoveEvent(QMouseEvent *e)
{
    m_scrollAni->stop();
    QScrollBar::mouseMoveEvent(e);
    m_targetValue_v=value();
}

二、自定义列表控件

将列表的滚动条替换为我们刚刚自定义的滚动条

头文件：







class SmoothScrollArea : public QScrollArea
{
    Q_OBJECT
public:
    explicit SmoothScrollArea(QWidget *parent = nullptr);
private:
    SmoothScrollBar* vScrollBar; //纵向滚动条
    void wheelEvent(QWheelEvent* e); //捕获鼠标滚轮事件
};

// SMOOTHSCROLLAREA_H

源文件：






SmoothScrollArea::SmoothScrollArea(QWidget *parent) : QScrollArea(parent)
{
    auto layout = new QVBoxLayout;
    vScrollBar=new SmoothScrollBar();
    vScrollBar->setOrientation(Qt::Orientation::Vertical); //将滚动条设置为纵向
    QWidget* w=new QWidget; //主体Widget
    for (int i=0;i<200 ;i++ ) { //在w中加入200个label，用来测试滚动
        QFont font;
        font.setPointSize(i+1);
        auto a=new QLabel(QString::number(i));
        a->setFont(font);
        layout->addWidget(a);
    }
    setVerticalScrollBar(vScrollBar); //设置纵向滚动条
    w->setLayout(layout); //设置布局
    setWidget(w); //设置widget

}

void SmoothScrollArea::wheelEvent(QWheelEvent *e)
{
    //当捕获到事件后，调用相对滚动的槽函数
    vScrollBar->scroll(e->angleDelta().y());
}

到此为止，SmoothScrollArea类便可以支持纵向的平滑滚动。其他的列表控件方法一致。

三、测试效果

将SmoothScrollArea列表控件加入到主窗口后，运行即可。

补充

在此之前参考过deepin-launcher的小窗口模式列表代码，deepin的平滑滚动策略存在缺陷，导致体验较差。这里我详细说明一下这一简单的问题，非deepin用户或开发者可以到此为止了。

/**
 * @brief AppListView::wheelEvent 鼠标滑轮事件触发滑动区域控件动画
 * @param e 鼠标滑轮事件指针对象
 */
void AppListView::wheelEvent(QWheelEvent *e)
{
    if (e->orientation() == Qt::Horizontal)
        return;

    int offset = -e->delta();

    m_scrollAni->stop();
    m_scrollAni->setStartValue(verticalScrollBar()->value());
    m_scrollAni->setEndValue(verticalScrollBar()->value() + offset * m_speedTime);
    m_scrollAni->start();
}

由代码中可以看到，首先他屏蔽了横向滑动的事件，这个主要应对触控板的一些问题。

offset为滚动的距离，每次滚动之前先停止上次动画（如果还没有结束的话），然后在以当前位置为起始位置，以相对offset的位置为结束位置，这就会导致一个问题。

假设有两个连续的滚动事件被触发，上边这个函数就会执行两次。这里会出现两种情况：

两次连续的事件时间间隔比较大，鼠标滚轮速度比较慢。
两次连续事件时间间隔很小，小于动画时长，鼠标滚动速度很快。

第一种情况下，deepin的这个方案并没有什么问题，两次动画之间互不干扰。但是第二种情况就会发现问题，假设动画时长为800ms，当第一次滚动事件触发后，随后800ms的时间中，滚动条将相应的向目标位置滚动，但是当第二次事件在第一次的动画还未结束时到来的话，第一次的动画将被打断，也就是只滚动了一部分就结束了，因此，当连续的快速滚动事件结束后，实际滚动的距离要远小于期望的距离。

这个问题在本文中的解决方案时建立一个目标位置的变量。此变量用于记录滚动所期望的位置，不会导致滚动失真。

大致如下：

设记录目标位置的变量为a，a的值将被初始化为滚动条当前的value，此后，当鼠标滚动事件被触发时，首先将a的值通过和滚动距离的计算变为新的位置，此时当前位置与a的值将不再相等，然后在通过动画将结束位置定为a。这样处理的好处，通过上边的方法分析如下：

首先第一种情况是没有区别的，来看第二种。同样假设动画时方案长为800ms，当第一次滚动事件发生后，a将被计算为要滚动的目标位置，随后的800ms将是动画的执行过程，当这个过程还未结束时，第二次滚动又将a的值通过和滚动距离的计算，变为一个新的位置，再由动画去执行。这里注意，a在两次变化中，第一次的距离并未丢失，两次距离相加，当连续的快速滚动事件结束后，实际滚动的距离等于所期望的距离。

deepin那种方案所导致的现象