QSS 樣式示例：QTreeWidget, QComboBox,QSlider,QSpinBox

目錄

• Image 填充整個控件的區域
• QTreeWidget
• QSpinbox 的上翻下翻按鈕和箭頭
• QComboBox 的設置，大坑
• QSlider

最近需要對一個軟件加上Qt界面和 的樣式，第一次使用CSS/QSS，很多東西都是現查現用。現在把一些樣式的配置記錄下來備查。

Image 填充整個控件的區域

border-image 會填充整個控件的區域， image會按照實際大小加載，background-image 會多次重復填充整個區域

QTreeWidget

TreeWidget的 checkbox 是由 indicator控制的， 展開/合起的是branch。實例化的QTreeWidget對象為 cam_treeWidget

附上代碼：

#cam_treeWidget{
    font: 15px "ubuntu";
}

#cam_treeWidget::focus{
    outline: none;
}
#cam_treeWidget::item:selected{
    border:1px solid transparent;
    font: 15px "ubuntu";
    color:#51637e; 
}

#cam_treeWidget::indicator:checked{
    image: url(:/element/element/checkbox_checked.png);
}

#cam_treeWidget::indicator:unchecked{
    image: url(:/element/element/checkbox_unchecked.png);
}


#cam_treeWidget::branch {
        background: white;
}
#cam_treeWidget::branch:closed:has-children{
    image:url(:/element/element/close.png);
}

#cam_treeWidget::branch::open::has-children{
    image:url(:/element/element/open2.png);
}

QSpinbox 的上翻下翻按鈕和箭頭

分別由 up-button down-button 和 up-arrow down-arrow 子控件控制

QDoubleSpinBox::up-button{
    border:transparent;
}
QDoubleSpinBox::down-button{
    border:transparent;
}

QDoubleSpinBox::up-arrow{
    image:url(:/element/element/up_arrow.png);
}
QDoubleSpinBox::down-arrow{
    image:url(:/element/element/down_arrow.png);
}

QComboBox 的設置，大坑

QComboBox{
    background-color:#ffffff;
    font: 15px "ubuntu";
    color:#51637e;
    margin:0px;
    border: 1px solid #f0ebeb;
}

QComboBox::drop-down{
    border:transparent;   
}
QComboBox::down-arrow{
    image:url(:/element/element/open.png);
}

如果這里不設置 margin 或者設置padding，字的顏色就沒法生效，不知道為什么？只好先記錄下來

QSlider

滑塊使用 handle 子控件設置的，未被划過的地方使 add-page 子控件設置的， 被划過的地方使用sub-page子控件設置。

QSlider::handle:horizontal {
    border-image:url(:/element/element/slider_handle.png);
    width: 13px;
    height:20px;
}


QSlider::add-page:horizontal{
    border: 1px solid #999999;
    height: 8px;
    background:transparent;
}

QSlider::sub-page:horizontal{                               
    border: 1px solid #999999;
    height: 8px;
    background: #8097b8            
}