【Qt】滚动条QScroolBar实现滚屏功能

环境：Qt5

编译器：Qt Creator

需求：如图

显示区域win 600*300

需要显示的Widget控件show 590*550

则有600*250的show界面无法显示

使用滑块控制show界面滚动显示全部内容

实现过程：

增加水平滑块verticalScroolBar (10*300)控件

注意：verticalScroolBar不要放在show控件上，而是show、verticalScroolBar两个控件同时以win界面为父界面水平摆放

第一步：实现拖拽滑块滚动show界面

连接信号与槽

声明一个滑块响应槽

private slots:
      slot_ScroolWidget(int);

connect(ui->verticalScrollBar,SIGNAL(valueChanged(int)),this,SLOT(slot_ScroolWidget(int)));

verticalScrollBar的信号valueChagned(int)发送来一个int参数

该参数指明当前滑块所在的位置

其中，滑块长度恒定为0-100，而该参数就是介于0-100之间

槽函数实现

void fun::slot_ScroolWidget(int value)
{
    double p=static_cast<double>(value)/static_cast<double>(ui->verticalScrollBar->maximum());
    ui->background->move(0,-(ui->background->height()-350)*p);
}

获得滑块的位置value

计算一个比例因子p=滑块的位置/滑块的最大位置

利用比例因子p，调用show的成员函数move来移动相应的位置

到此，滑块滚屏的基本功能已经实现了

但是，一般来说，更顺手使用鼠标滚轮来进行滚屏

所以，我们还需要重载wheelEvent（）事件来实现此功能

void fun::wheelEvent(QWheelEvent *event)
{
    int para=event->angleDelta().y();//获得鼠标滚轮的滚动距离para，para<0向下滚动，>0向上滚动
    if (para<0)
    {   
        //向下滚动，设定鼠标滚轮每滚动一个单位，滑块就移动20个单位
        //加入此判断的理由是，若当时滑块处于90的位置上，一旦继续下滑20个单位，就会超过最大范围100，show界面就会移动超出范围。
        if (ui->verticalScrollBar->value()+20<=100)
        {
            //发射verticalScrollBar的信号valueChange（value+20），连接到了我们之前写的slot_ScrollWidget(int)槽上
            emit ui->verticalScrollBar->valueChanged(ui->verticalScrollBar->value()+20);verticalScrollBar的信号valueChange（value+20）;
            //设定滚动之后的滑块位置
            ui->verticalScrollBar->setSliderPosition(ui->verticalScrollBar->value()+20);
        }
        else
        {
            emit ui->verticalScrollBar->valueChanged(ui->verticalScrollBar->maximum());
            ui->verticalScrollBar->setSliderPosition(ui->verticalScrollBar->maximum());
        }
    }
    else
    {
        //向上滚动
        if (ui->verticalScrollBar->value()-20>=0)
        {
            emit ui->verticalScrollBar->valueChanged(ui->verticalScrollBar->value()-20);
            ui->verticalScrollBar->setSliderPosition(ui->verticalScrollBar->value()-20);
        }
        else
        {
            emit ui->verticalScrollBar->valueChanged(ui->verticalScrollBar->minimum());
            ui->verticalScrollBar->setSliderPosition(ui->verticalScrollBar->minimum());
        }
    }
}

这样，就实现了拖拽滑块或者鼠标滚轮来滚屏的功能