QT样式表style sheet快速速查方法
QT自带的帮助文件中有丰富的样式表示例可供我们查询,直接在帮助文件的“高级搜索”中搜索style sheet,如下图所示,可查到3个最有用的部分:1、参考手册referance,2、示例example,3、语法,如下图所示参考手册referance一张截图如下:所有ui控件(按钮、Label、复选框、容器等等)的样式表介绍都在这张表里,点击下图中红色框的部分Customiziin...
·
QT自带的帮助文件中有丰富的样式表示例可供我们查询,直接在帮助文件的“高级搜索”中搜索style sheet,如下图所示,可查到3个最有用的部分:1、参考手册referance,2、示例example,3、语法,如下图所示
参考手册referance一张截图如下:
所有ui控件(按钮、Label、复选框、容器等等)的样式表介绍都在这张表里,点击下图中红色框的部分Customiziing XXX,即可跳转到对应的示例
参考手册继续向下翻,可以看到样式表每一个属性的意义:
示例都在example文档中,可以直接从referance的超链接跳进来,也可以直接打开来看
下面来看两个具体的示例:
(1)QLabel样式
上面这张表说,QLabel和样式等同于QFrame的样式,我们直接查QFrame样式,跳转到示例文件,如下:
(2)下拉列表QComboBox的样式
官方示例如下,不截图了,直接贴文字吧:
QComboBox这个控件实际上是多个控件的集合:下拉箭头图片down-arrow、下拉按钮drop-down,下拉展开表QAbstractItemView等
QComboBox {
border: 1px solid gray;
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-width: 6em;
}/*初始样式*/
QComboBox:editable {
background: 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:on { /* shift the text when the popup opens */
padding-top: 3px;
padding-left: 4px;
}
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;
}
The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector:
QComboBox QAbstractItemView {/*下拉展开框*/
border: 2px solid darkgray;
selection-background-color: lightgray;
height:18px;/*展开项的高度*/
}
更多推荐
已为社区贡献2条内容
所有评论(0)