最近在Qt上做應用程序開發時需要對一個文本編輯框的滾動條進行設置，在網絡上查閱了很多網友的意見，多次嘗試驗證後終於達到目標，現記錄整理本次試驗的過程，以便參考查閱。
本人在應用程序中封裝PeTextEditor 類用來編輯、加載文本，文本編輯器右側的滾動條的滑塊會根據內容大小進行放大和縮小，當加載文本文件很大時，滑塊很小不方便手動操作，故需對滾動條的格式進行修改設計。
Qt設置滾動條樣式的方式有兩種，一種直接在程序中寫，適用於樣式不多的情況；另一種，寫入到文件中，適用用樣式較大且需要提供換膚功能的情況。
1.寫入到文件中，新建scrollBar.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.直接在程序中設置，適用於不復雜的格式，本次試驗就是直接寫入程序中，代碼示例如下：
textEdit->verticalScrollBar()->setStyleSheet(
"QScrollBar{
background: #F0F0F0; width:30px ;margin-top:16px;margin-bottom:16px }"
"QScrollBar::handle:vertical{
background: #EAEAED; min-height: 80px ;width:30px }"
"QScrollBar::sub-line:vertical{height:16px;subcontrol-position:top;subcontrol-origin:margin;}"
"QScrollBar::add-line:vertical{height:16px;subcontrol-position:bottom;subcontrol-origin:margin;}"
);
這樣就能把設置滾動條的寬度、滑塊大小及上下邊緣箭頭。需要其他設計可參考上述文件中設計的詳細格式。
特別注意：
在設置滑塊屬性時，一定要先設置QScrollBar 和 QScrollBar::handle:vertical 的背景顏色或圖片，不然設置其他屬性不生效，親測可用。
本文針對垂直滾動條進行示例說明，水平滾動條也類似。只需要把vertical 換成 horizontal 即可。