Qt样式表实例

Qt Style Sheets Examples
Qt样式表实例
我们将开始使用样式表看一些实例
Style Sheet Usage样式表用法
自定义前景色和背景色
让我们设置黄色作为所有QLineEdit的背景颜色
qApp->setStyleSheet("QLineEidt{background-color:yellow}");
如果我们想要这个属性只应用在QDialog上的QLineEdit时我们可以这样做
myDialog->setStyleSheet("QLineEdit{background-color:yellow}");
如果我们项要这个属性只应用于指定的一个QLineEdit,我们可以给它一个名字或者使用一个ID选择器。
myDialog->setStyleSheet("QLineEdit#nameEdit{background-color:yellow}");
还有一种方法是我们可以直接在QLineEdit上设置background-color属性忽略选择器
为了确保一个好的对比,我们可以为text指定一个合适的颜色
nameEdit->setStyleSheet("color:blue;background-color:yellow");
也许改变被选中文本的颜色是一个好的想法
nameEdit->setStyleSheet("color:blue;background-color:yellow;"
"selection-colro:yellow;selection-background-color:blue;");
使用动态属性自定义
有很多情况下我们需要支持一个表格中有必填字段。为了提示给用户这个字段是必填的,一个有效的解决方案是用黄色作为这些字段的背景色。使用Qt样式表很容易实现.首先我们使用下面的应用级的样式表
*[mandatoryField="true"]{background-color:yellow}
这意味着每一个有mandatory属性被设置为true的widget酱油黄色的背景
然后对于每一个必填字段的widget我们可以简单的创建一个mandatoryField属性同时设置为true
使用Box Model自定义QPushButton
这次我们将展示如何创建一个红色的button。
QPushButton#evilButton{border:none;background-color:red}
然而结果是无趣的,平坦的按钮没有边界
当杜使用本地的风格已经不能满足我们的要求
因此使用样式表来绘制按钮
我们还没有对border-width和border-style指定任何值。因此默认情况下我们将获得一个0和none
让我们通过指定一个border来改善这种情况
QPushButton#evilButton{
background-color:red;
border-style:outset;
border-width:2px;
border-color:beige;
}
这样看起来好了很多但是按钮看起来还是有一点狭窄,让我们指定一些空白在border和text之间使用padding.另外我们将强制使用一个最小宽度和边角半径并且指定一个较大的字体使得按钮看起来更好。
QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
这还有一个问题是按钮没有反应当我们按下的时候,我们可以通过指定不同的background-color和使用不同的border-style来修复这个问题。
QPushButton#evilButton:pressed {
    background-color: rgb(224, 0, 0);
    border-style: inset;
}
定制化QPushButton的菜单指示器子控制器
子控制器给出了访问一个widget子元素的方法。例如一个跟菜单关联的QPushButton有一个菜单指示器。让我们定制菜单指示器。
QPushButton#evilButtom:menu-indicator{
image:url(myindicator.png);
}
默认菜单指示器的位置是在padding矩形的右下。我们可以通过指定subcontrol-position和subcontrol-origin来改变indicator.我们也可以使用top和left来移动indicator。
QPushButton:menu-indicator{
image:url(myindicator.png);
subcontrol-position:right center;
subcontrol-origin:padding;
left:-2px;
}
复杂选择器例子
因为红色似乎是我们最喜欢的颜色,让我们设置QLineEdit的文本颜色也为text。
QLineEdit{color:red}
然而我们想要给一个可视化的提示通过设置它变灰表示制度。
QLineEdit{color:red}
QLineEdit[readOnly="true"]{color:gray}
在某些情况,我，恶魔设计要求所有的QLineEdit变为棕色
#registrationDialog QLineEdit{color:brown}
自定义指定的widget
这一部分将提供例子使用样式表自定义widget
自定义QAbstractScrollArea
任何QAbstractScrollArea的背景可以使用background属性设置。
QTextEdit,QLisView{
background-color:white;
background-iamge:url(draft.png);
background-attachment:scroll(或者fixed);
}
自定义QCheckBox
QCheckBox的样式几乎和QRadioButton的相同.主要不同是QCheckBox有不确定的状态。
QCheckBox{ spacing:5px;}
QCheckBox::indicator{ width:13px;height:13px; }
QCheckBox::indicator:unchecked{image:url(:/image/checkbox_unchecked.png);}
QCheckBox::indicator:unchecked:hover{ image:url(:/image/checkbox_unchecked_hover.png);}
QCheckBox::indicator:unchecked:pressed{image:url(:/image/checkbox_unchecked_pressed.png);}
QCheckBox::indicator:checked{image:url(:/image/checkbox_checked.png);}
QCheckBox::indicator:checked:hover{ iamge:url(:/image/checkbox_checked_hover.png);}
QCheckBox::indicator:indeterminate:hover{image:url(:/image/checkbox_indeterminate_hover.png);}
QCheckBox::indicatro:indeterminate:pressed{image:url(:/image/checkbox_indeterminate_pressed.png);}
自定义QComboBox
QComboBox{
border:1px solid gray;
border-radius:3px;
padding:1px 18px 1px 3px;
min-width:6em;
}
QComboBox:editable{ background-color:white;}
QComboBox:!editable,QComboBox::drop-down:editable{
background:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #E1E1E1,stop 0.4 #DDDDDD,stop: 0.5 #D8D8D8,stop:1.0 #D3D3D3);
}
/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}
QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;


    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}


QComboBox::down-arrow {
    image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}


QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    top: 1px;
    left: 1px;
}
QComboBox的弹出是一个QAbstractItemView并且使用子孙选择器设计。
QComboBox QAbstractItemView{
border:2px solid darkgray;
selection-background-color:lightgray;
}
自定义QDockWidget
QDockWidget的标题栏和按钮可以像下面一样自定义。
QDockWidget{
border:1px solid lightgray;
titlebar-close-icon:url(close.png);
titlebar-normal-icon:url(undock.png);
}
QDockWidget::title{
text-align:left;
background:lightgray;
padding-left:5px;
}
QDockWidget::close-button,QDockWidget::float-button{
border:1px solid transparent;
background:darkgray;
padding:0px;
}
QDockWidget::close-button:pressed,QDockWidget::float-button:pressed{
padding:1px -1px -1px 1px;
}
如果想要把dockWidget的按钮移动到左边。
QDockWidget{
border:1px solid lightgray;