《Qt界面美工实例》由会员分享，可在线阅读，更多相关《Qt界面美工实例（28页珍藏版）》请在金锄头文库上搜索。
1、Qt StyleSheet样式表实例在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表。下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色：如果需要一个文本编辑器的背景变为黄色， 下面是代码行：qApp-setStyleSheet(QLineEdit background-color: yellow );针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色， 下面是代码：myDialog -setStyleSheet(QLineEdit background-color: yellow );如果只需要制定一个QLi
2、neEdit的内容， 将使用QObject:setObjectName() 下面是一个实例：myDialog-setStyleSheet(QLineEdit#nameEdit background-color: yellow );同时也可以针对每一个指定的部件做直接的类型设置， 下面是一个实例：ui.nameEdit-setStyleSheet(background-color: yellow);为了做一个鲜明的对比， 将要为文本设置合适的颜色。nameEdit-setStyleSheet(color: blue; background-color: yellow);当然最好的办法还有针对选择
3、的文本来进行设置， 下面设置了一个选择文本的类型属性： nameEdit-setStyleSheet(color: blue; background-color: yellow; selection-color: yellow; selection-background-color: blue;);在有一些情况下， 不需要用户参与， 而有软件设计人员来自己制定样式， 即使这些是有违审美角度。 下面就从应用程序开发角度来设计样式。*mandatoryField=true background-color: yellow 上面的意思是一些强制的区域是需要用Qt 的属性管理来强制设置成为黄色的背景。
4、这样一些强制的部件，将需要通过函数来设置当前的属性已经被强制设置， 下面是实现的代码：QLineEdit *nameEdit = new QLineEdit(this);nameEdit-setProperty(mandatoryField, true);QLineEdit *emailEdit = new QLineEdit(this);emailEdit-setProperty(mandatoryField, true);QSpinBox *ageSpinBox = new QSpinBox(this);ageSpinBox-setProperty(mandatoryField, true
5、);QPushButton * evilButton = new QPushButton (this);evilButton -setText(Button);下面我们将通过一个按钮的部件来设置属性样式：首先来设置一下样式：QPushButton#evilButton background-color: red 说明设置的当前的按钮为红色。作为一个flat 平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; borde
6、r-color: beige; 在这里设置了一个边界的类型与边界的宽度。 这样看上去就好多了，文档中无法展现图片， 有兴趣可以去Qt 的变成环境当中去尝试。即使这样设计， 按钮看上去也是显得混乱，与主部件没有办法分开。 首先是在边界设置出一个空间出来， 并且强制的制定最小宽度，与环绕的弧度， 并且提供一个按钮的字体设置， 似的按钮看上去比较好看。QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; border-radius: 6px; border-color: beige
7、; font: bold 14px; min-width: 10em; padding: 6px; 如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。 所以就需要指定一个合适的背景颜色与不一样的边界类型。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;QPushButton#evilB
8、utton:pressed background-color: rgb(224, 0, 0); border-style: inset;指定QPushButton 菜单指示器的子控制子控提供了访问子子元素的功能， 例如通常的时候一个按钮将会管理一个菜单， QPushButton#evilButton:menu-indicator image: url(myindicator.png);同时如果美化一个按钮的话， 那么将可以通过定位符来确定美化按钮的路径， 通常可以是一个图片。 QPushButton:menu-indicator image: url(myindicator.png); sub
9、control-position: right center; subcontrol-origin: padding; left: -2px;经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。 复杂区域的例子：当应对于一个用户可编辑可输入的部件的时候， 将需要设计到用户选择区域的颜色设置， 与类型设置， 下面将通过使用QLineEdit 部件来进行演示：QLineEdit color: red QLineEditreadOnly=truecolor:gray在团队开发的时候， 需要设计到不同颜色的设置， 或者说不同类型的设置，那么就需要在
10、样式编辑当中有多种选择，将不需要的那部分，注释掉：QLineEdit color: red QLineEditreadOnly=true color: gray #registrationDialog QLineEdit color: brown 自定义制定的部件这个部分提供了一些自定义特殊部件的某种样式定制QAbstractScrollArea 比如说一些QAbstractScrollArea 类， 例如 QTextEdit 与QTextBrowser . 同时可以使用后台的属性来进行设置。 例如来设置一个 背景图片。 QTextEdit, QListView background-colo
11、r: white; background-image: url(draft.png); background-attachment: scroll;下面的代码是让背景图片与可浏览的区域大小相同：QTextEdit, QListView background-color: white; background-image: url(draft.png); background-attachment: fixed;QCheckBox 与QRadioButton 具有想色的属性， 他们之间的不同时QCheckBox是返回当前的状态：QCheckBox spacing: 5px;QCheckBox:in
12、dicator width: 13px; height: 13px; QCheckBox:indicator:unchecked image: url(:/images/checkbox_unchecked.png);QCheckBox:indicator:unchecked:hover image: url(:/images/checkbox_unchecked_hover.png);QCheckBox:indicator:unchecked:pressed image: url(:/images/checkbox_unchecked_pressed.png);QCheckBox:indic
13、ator:checked image: url(:/images/checkbox_checked.png);QCheckBox:indicator:checked:hover image: url(:/images/checkbox_checked_hover.png);QCheckBox:indicator:checked:pressed image: url(:/images/checkbox_checked_pressed.png);QCheckBox:indicator:indeterminate:hover image: url(:/images/checkbox_indeterm
14、inate_hover.png);QCheckBox:indicator:indeterminate:pressed image: url(:/images/checkbox_indeterminate_pressed.png);下面是对QComboBox下拉列表框进行的样式设计：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,
