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            
}