Qt懸浮滾動條-讓滾動條不再佔用控件的大小

        

         我們在Qt開發中經常會用到帶有滾動條的控件，但是自帶的滾動條實在太醜。於是我們想到用qss美化滾動條，這是一種很常見的做法。但是當我們只是對滾動條通過一個style做一些美化的話，會發現效果並不是那麼完美。例如滾動條會佔用控件的大小，滾動條的ScrollBarPolicy默認值是Qt::ScrollBarAsNeeded，即需要它的時候纔出現。如果我們改變控件大小時，滾動條會出現/消失，導致內容寬度變化這樣的話用戶體驗就不是很好了。如圖：

        如上圖。左邊是沒有滾動條的，它可以最大的顯示內容，右邊出現了滾動條，導致內容顯示的寬度變小了。懸浮滾動條的目的就是解決這個問題。再來一張懸浮滾動條效果圖。

        使用效果，如滾動滑動、拖動與一般滾動條一樣。

進入正題，首先實現一個懸浮滾動條組件，可用於各種使用滾動條的控件。

suspendedscrollbar.h :

class SuspendedScrollBar : public QScrollBar
{
    Q_OBJECT
public:
    explicit SuspendedScrollBar(Qt::Orientation t , QWidget * parent = 0);
    ~SuspendedScrollBar(){}
public slots:
    void slt_valueChange_scrollBar(int);//當使用該組件的控件的滾動條發出valueChanged信號時，該信號被觸發
    void slt_rangeChanged(int min,int max);//當使用該組件的控件的滾動條發出rangeChanged信號時，該信號被觸發

};

suspendedscrollbar.cpp :

SuspendedScrollBar::SuspendedScrollBar(Qt::Orientation t ,  QWidget *parent) : QScrollBar(parent){

    this->setOrientation(t);//設置水平或者垂直滾動條
    QString style_file = ":/scrollbar.qss";
    QFile styleFile(style_file);//路徑名
    if(styleFile.open( QFile::ReadOnly )){
        QString style( styleFile.readAll() );
        this->setStyleSheet(style);
    }

    this->setRange(0 , 0);
    this->hide();
}

void SuspendedScrollBar::slt_rangeChanged(int min,int max){
    this->setMinimum(min);
    this->setRange(0 , max);
    this->setPageStep(0.75 * (this->height() + max));
    if(max <= 0)
        this->hide();
}

void SuspendedScrollBar::slt_valueChange_scrollBar(int value){ this->setValue(value);}

        接下來介紹一下怎麼使用這個組件。首先，設置控件ScrollBarPolicy屬性爲Qt::ScrollBarAlwaysOff，即總是關閉滾動條

    setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

        

        然後初始化懸浮滾動條組件，並且綁定信號槽

    m_pVertScrollBar = new SuspendedScrollBar(Qt::Vertical , this);
    connect(this->verticalScrollBar(),SIGNAL(valueChanged(int)),m_pVertScrollBar,SLOT(slt_valueChange_scrollBar(int)));
    connect(m_pVertScrollBar,SIGNAL(valueChanged(int)),this,SLOT(slt_valueChange_widget(int)));
    connect(this->verticalScrollBar(),SIGNAL(rangeChanged(int,int)),m_pVertScrollBar,SLOT(slt_rangeChanged(int,int)));

         實現slt_valueChange_widget槽函數

void SuspendedScrollBar_ListWidget::slt_valueChange_widget(int value){
    this->verticalScrollBar()->setValue(value);
}

         實現enterEvent leaveEvent resizeEvent事件

void SuspendedScrollBar_ListWidget::resizeEvent(QResizeEvent *e){
    int iX = this->width() - 8;
    m_pVertScrollBar->setGeometry(iX,1,8,this->height()-2);
    return QListWidget::resizeEvent(e);
}

void SuspendedScrollBar_ListWidget::enterEvent(QEvent * e){
    if(m_pVertScrollBar->maximum() > 0)
        m_pVertScrollBar->show();
    return QListWidget::enterEvent(e);
}
void SuspendedScrollBar_ListWidget::leaveEvent(QEvent * e){
    m_pVertScrollBar->hide();
    return QListWidget::leaveEvent(e);
}

        然後在這個自定義的繼承QListWidget的類裏面實現你自己的功能即可，具體代碼我這裏就不詳述了，我會將整個工程上傳，裏面有關於QListWidget以及QScrollArea使用這個組件的代碼。

       代碼下載地址，如果你的積分不足，請評論留下你的郵箱號