Qt 自定義 滾動條 樣式（模仿QQ）

今天是時候把軟件中的進度條給美化美化了，最初的想法就是仿照QQ。

先前的進度條是這樣，默認的總是很難受歡迎的；美化之后的是這樣，怎么樣？稍微好看一點點了吧，最后告訴你實現這個簡單的效果在Qt只需要加幾句簡單的樣式。下面就來吐槽吐槽，關於進度條樣式的設置問題，歡迎評論交流，高手勿噴。

　　Qt設置樣式的方式有兩種，一種直接在程序中寫，適用於樣式不多的情況；另一種，寫入到文件中，適用用樣式較大且需要提供換膚功能的情況。

　　1.寫入到文件中，新建個xx.qss，然后復制一下內容

// 設置垂直滾動條基本樣式
QScrollBar:vertical
{
    width:8px;
    background:rgba(0,0,0,0%);
    margin:0px,0px,0px,0px;
    padding-top:9px;   // 留出9px給上面和下面的箭頭
    padding-bottom:9px;
}
QScrollBar::handle:vertical
{
    width:8px;
    background:rgba(0,0,0,25%);
    border-radius:4px;   // 滾動條兩端變成橢圓
    min-height:20;
}
QScrollBar::handle:vertical:hover
{
    width:8px;
    background:rgba(0,0,0,50%);   // 鼠標放到滾動條上的時候，顏色變深
    border-radius:4px;
    min-height:20;
}
QScrollBar::add-line:vertical   // 這個應該是設置下箭頭的，3.png就是箭頭
{
    height:9px;width:8px;
    border-image:url(:/images/a/3.png);
    subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical   // 設置上箭頭
{
    height:9px;width:8px;
    border-image:url(:/images/a/1.png);
    subcontrol-position:top;
}
QScrollBar::add-line:vertical:hover   // 當鼠標放到下箭頭上的時候
{
    height:9px;width:8px;
    border-image:url(:/images/a/4.png);
    subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical:hover  // 當鼠標放到下箭頭上的時候
{
    height:9px;width:8px;
    border-image:url(:/images/a/2.png);
    subcontrol-position:top;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical   // 當滾動條滾動的時候，上面的部分和下面的部分
{
    background:rgba(0,0,0,10%);
    border-radius:4px;
}

 接着在程序中讀取文件

QFile file(":/scrollbar.qss");
file.open(QFile::ReadOnly);
listWidget->verticalScrollBar()->setStyleSheet(file.readAll());

 

 2.直接在程序中設置，簡單

listWidget->verticalScrollBar()->setStyleSheet("QScrollBar:vertical"
                                                   "{"
                                                   "width:8px;"
                                                   "background:rgba(0,0,0,0%);"
                                                   "margin:0px,0px,0px,0px;"
                                                   "padding-top:9px;"
                                                   "padding-bottom:9px;"
                                                   "}"
                                                   "QScrollBar::handle:vertical"
                                                   "{"
                                                   "width:8px;"
                                                   "background:rgba(0,0,0,25%);"
                                                   " border-radius:4px;"
                                                   "min-height:20;"
                                                   "}"
                                                   "QScrollBar::handle:vertical:hover"
                                                   "{"
                                                   "width:8px;"
                                                   "background:rgba(0,0,0,50%);"
                                                   " border-radius:4px;"
                                                   "min-height:20;"
                                                   "}"
                                                   "QScrollBar::add-line:vertical"
                                                   "{"
                                                   "height:9px;width:8px;"
                                                   "border-image:url(:/images/a/3.png);"
                                                   "subcontrol-position:bottom;"
                                                   "}"
                                                   "QScrollBar::sub-line:vertical"
                                                   "{"
                                                   "height:9px;width:8px;"
                                                   "border-image:url(:/images/a/1.png);"
                                                   "subcontrol-position:top;"
                                                   "}"
                                                   "QScrollBar::add-line:vertical:hover"
                                                   "{"
                                                   "height:9px;width:8px;"
                                                   "border-image:url(:/images/a/4.png);"
                                                   "subcontrol-position:bottom;"
                                                   "}"
                                                   "QScrollBar::sub-line:vertical:hover"
                                                   "{"
                                                   "height:9px;width:8px;"
                                                   "border-image:url(:/images/a/2.png);"
                                                   "subcontrol-position:top;"
                                                   "}"
                                                   "QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical"
                                                   "{"
                                                   "background:rgba(0,0,0,10%);"
                                                   "border-radius:4px;"
                                                   "}"
                                                   );

 

滾動條有兩種，水平的和垂直的，我這里面只設置了垂直的，水平的其實差不多，只需要把 vertical 換成 horizontal。

更多的自定義樣式可以參考http://www.zhouwenyi.com/name/193435，有點亂不過還能用，具體的意思我在上面已經添加注釋。

樣式中設計到一些圖片，如果您需要源代碼例子，請下載：ListWidget.rar.

轉載請標明出處哦：http://www.cnblogs.com/xufeiyang/p/3314955.html