《Qt 用户界面美工基础.doc》由会员分享，可在线阅读，更多相关《Qt 用户界面美工基础.doc（25页珍藏版）》请在三一文库上搜索。
1、Qt 类型编辑实例 - 091027 丁老师博文 在涉及到Qt 部件美工变成的时候首先要掌握CSS 级联样式表 级联样式表 (CSS) 包含应用于网页中的元素的样式规则。CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则，只要 Web 浏览器遇到一个元素实例，或遇到一个分配给某个特定样式类的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。CSS 样式可以通过内联方式放置在单个 HTML 元素内，也可以在网页 head 部分的 style 块内加以分组，或从单独的样式表中导入。如果样式是在单独的样式表中创建的，则可以将多个网页链接到该样式表，从而为整个
2、网站提供一个通用的外观。如果使用 CSS 设置 Web 控件的样式，则应使用 CssClass 属性来定义要与控件或控件元素关联的 CSS 类名，然后在样式表中为这些控件或控件元素指定样式时引用该类名。 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色： 如果需要样一个文本编辑器的背景变为黄色， 下面是代码行： qApp-setStyleSheet(QLineEdit background-color: yellow );针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色， 下面是代码： myDialog-setS
3、tyleSheet(QLineEdit background-color: yellow ); 如果只需要制定一个QLineEdit的内容， 将使用QObject:setObjectName() 下面是一个实例： myDialog-setStyleSheet(QLineEdit#nameEdit background-color: yellow );同时也可以针对每一个指定的部件做直接的类型设置， 下面是一个实例： nameEdit-setStyleSheet(background-color: yellow);为了做一个鲜明的对比， 将要为文本设置合适的颜色。 nameEdit-setSty
4、leSheet(color: blue; background-color: yellow);当然最好的办法还有针对选择的文本来进行设置， 下面设置了一个选择文本的类型属性： nameEdit-setStyleSheet(color: blue; background-color: yellow; selection-color: yellow; selection-background-color: blue;); 在有一些情况下， 不需要用户参与， 而有软件设计人员来自己制定样式， 即使这些是有违审美角度。 下面就从应用程序开发角度来设计样式。*mandatoryField=true ba
5、ckground-color: yellow 上面的意思是一些强制的区域是需要用Qt 的属性管理来强制设置成为黄色的背景。这样一些强制的部件，将需要通过函数来设置当前的属性已经被强制设置， 下面是实现的代码： QLineEdit *nameEdit = new QLineEdit(this); nameEdit-setProperty(mandatoryField, true); QLineEdit *emailEdit = new QLineEdit(this); emailEdit-setProperty(mandatoryField, true); QSpinBox *ageSpinBo
6、x = new QSpinBox(this); ageSpinBox-setProperty(mandatoryField, true);自定义的按钮 下面我们将通过一个按钮的部件来设置属性样式： 首先来设置一下样式： QPushButton#evilButton background-color: red 说明设置的当前的按钮为红色。 作为一个flat 平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。 QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; borde
7、r-color: beige; 在这里设置了一个边界的类型与边界的宽度。 这样看上去就好多了，文档中无法展现图片， 有兴趣可以去Qt 的变成环境当中去尝试。即使这样设计， 按钮看上去也是显得混乱，与主部件没有办法分开。 首先是在边界设置出一个空间出来， 并且强制的制定最小宽度，与环绕的弧度， 并且提供一个按钮的字体设置， 似的按钮看上去比较好看。 QPushButton#evilButton background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: bei
8、ge; 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#e
9、vilButton: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.pn
10、g); subcontrol-position: right center; subcontrol-origin: padding; left: -2px; 经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。 复杂的选择区域的例子： 当应对于一个用户可可编辑可输入的部件的时候， 将需要设计到用户选择区域的颜色设置， 与类型设置， 下面将通过使用QLineEdit 部件来进行演示： QLineEdit color: red QLineEditcolor:redQLineEditreadOnly=truecolor:gray 在团队开发的时候
11、， 需要设计到不同颜色的设置， 或者说不同类型的设置， 那么就需要在样式编辑当中有多种选择， 将不需要的那部分， 注释掉： QLineEdit color: red QLineEditreadOnly=true color: gray #registrationDialog QLineEdit color: brown 自定义制定的部件 这个部分提供了一些自定义特殊部件的某种样式 定制QAbstractScrollArea 比如说一些QAbstractScrollArea 类， 例如 QTextEdit 与QTextBrowser . 同时可以使用后台的属性来进行设置。 例如来设置一个 背景图
12、片。 QTextEdit, QListView background-color: white; background-image: url(draft.png); background-attachment: scroll; 下面的代码是让背景图片与可浏览的区域大小相同： QTextEdit, QListView background-color: white; background-image: url(draft.png); background-attachment: fixed; 给QCheckBox 做样式 QCheckBox 与QRadioButton 具有想色的属性， 他们之间
13、的不同时QCheckBox是返回当前的状态： QCheckBox spacing: 5px; QCheckBox:indicator 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:
14、 url(:/images/checkbox_unchecked_pressed.png); QCheckBox:indicator: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:in
15、dicator:indeterminate:hover image: url(:/images/checkbox_indeterminate_hover.png); QCheckBox:indicator:indeterminate:pressed image: url(:/images/checkbox_indeterminate_pressed.png); 自定义的QComboBox 下面是对QComboBox下拉列表框进行的样式设计： QComboBox border: 1px solid gray; border-radius: 3px; padding: 1px 18px 1px 3
16、px; 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 */ QCom
17、boBox:!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 subco
18、ntrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; /* 仅此一行 */ border-top-right-radius: 3px; border-bottom-right-radius: 3px; QComboBox:down-arrow image: url(/usr/share/icons/crystalsvg/16x16/actions/1down
19、arrow.png); QComboBox:down-arrow:on /* shift the arrow when popup is open */ top: 1px; left: 1px; 自定的QSpinBox QSpinBox padding-right: 15px; /* make room for the arrows */ border-image: url(:/images/frame.png) 4; border-width: 3; QSpinBox:up-button subcontrol-origin: border; subcontrol-position: top
20、right; /* position at the top right corner */ width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */ border-image: url(:/images/spinup.png) 1; border-width: 1px; QSpinBox:up-button:hover border-image: url(:/images/spinup_hover.png) 1; QSpinBox:up-button:pressed border-image: u
21、rl(:/images/spinup_pressed.png) 1; QSpinBox:up-arrow image: url(:/images/up_arrow.png); width: 7px; height: 7px; QSpinBox:up-arrow:disabled, QSpinBox:up-arrow:off /* off state when value is max */ image: url(:/images/up_arrow_disabled.png); QSpinBox:down-button subcontrol-origin: border; subcontrol-
22、position: bottom right; /* position at bottom right corner */ width: 16px; border-image: url(:/images/spindown.png) 1; border-width: 1px; border-top-width: 0; QSpinBox:down-button:hover border-image: url(:/images/spindown_hover.png) 1; QSpinBox:down-button:pressed border-image: url(:/images/spindown
23、_pressed.png) 1; QSpinBox:down-arrow image: url(:/images/down_arrow.png); width: 7px; height: 7px; QSpinBox:down-arrow:disabled, QSpinBox:down-arrow:off /* off state when value in min */ image: url(:/images/down_arrow_disabled.png); 自定义的 QFrame QFrame, QLabel, QToolTip border: 2px solid green; borde
24、r-radius: 4px; padding: 2px; background-image: url(images/welcome.png); 定制QGroupbox QGroupBox background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E0E0E0, stop: 1 #FFFFFF); border: 2px solid gray; border-radius: 5px; margin-top: 1ex; /* leave space at the top for the title */ QGrou
25、pBox:title subcontrol-origin: margin; subcontrol-position: top center; /* position at the top center */ padding: 0 3px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FFOECE, stop: 1 #FFFFFF); 对于有一个可选择的QGroupBox ， 使用#indicator-sub:indicator 他的类型控制就类似于QCheckBox. QGroupBox:indi
26、cator width: 13px; height: 13px; QGroupBox:indicator:unchecked image: url(:/images/checkbox_unchecked.png); 定制 QHeaderView QHeaderView:section background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565); color: white; padding-left:
27、4px; border: 1px solid #6c6c6c; /* style the sort indicator */ QHeaderView:down-arrow image: url(down_arrow.png); QHeaderView:up-arrow image: url(up_arrow.png); 定制QLineEdit QLineEdit border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; selection-background-color: darkgray
28、; 当一个QLineEdit 需要使用一个密码的模式的话那么将设置成为QLineEdit:Password 这样属性就被使用了。 QLineEditechoMode=2 lineedit-password-character: 9679; QLineEdit:read-only background: lightblue;定制QMenu QMenu background-color: #ABABAB; /* 设置菜单的背景 */ border: 1px solid black; QMenu:item /* 设置菜单的项目的背景 */ background-color: transparent;
29、 QMenu:item:selected /* 当用户使用鼠标活着键盘进行选择的时候选择项的颜色 */ background-color: #654321; 对于菜单部件的一些其他的选项， 下面提供了许多高级的设置： QMenu background-color: white; margin: 2px; /* 围绕菜单的一些空间 */ QMenu:item padding: 2px 25px 2px 20px; border: 1px solid transparent; /* reserve space for selection border */ QMenu:item:selected
30、border-color: darkblue; background: rgba(100, 100, 100, 150); QMenu:icon:checked /* appearance of a checked icon */ background: gray; border: 1px inset gray; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; QMenu:separator height: 2px; background: lightblue; margin-left: 10px; margi
31、n-right: 5px; QMenu:indicator width: 13px; height: 13px; /* non-exclusive indicator = check box style indicator (see QActionGroup:setExclusive) */ QMenu:indicator:non-exclusive:unchecked image: url(:/images/checkbox_unchecked.png); QMenu:indicator:non-exclusive:unchecked:selected image: url(:/images
32、/checkbox_unchecked_hover.png); QMenu:indicator:non-exclusive:checked image: url(:/images/checkbox_checked.png); QMenu:indicator:non-exclusive:checked:selected image: url(:/images/checkbox_checked_hover.png); /* exclusive indicator = radio button style indicator (see QActionGroup:setExclusive) */ QM
33、enu:indicator:exclusive:unchecked image: url(:/images/radiobutton_unchecked.png); QMenu:indicator:exclusive:unchecked:selected image: url(:/images/radiobutton_unchecked_hover.png); QMenu:indicator:exclusive:checked image: url(:/images/radiobutton_checked.png); QMenu:indicator:exclusive:checked:selec
34、ted image: url(:/images/radiobutton_checked_hover.png); 定制菜单条 QMenuBar background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 lightgray, stop:1 darkgray); QMenuBar:item spacing: 3px; /* 菜单栏项目空间大小 */ padding: 1px 4px; background: transparent; border-radius: 4px; QMenuBar:item:selected /* 当用
35、键盘或者鼠标选择的时候的背景 */ background: #a8a8a8; QMenuBar:item:pressed background: #888888; 定制进度条 QProgressBar border: 2px solid grey; border-radius: 5px; QProgressBar:chunk background-color: #05B8CC; width: 20px; QProgressBar border: 2px solid grey; border-radius: 5px; text-align: center; QProgressBar:chunk
36、background-color: #CD96CD; width: 10px; margin: 0.5px; 定制按钮 QPushButton border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; QPushButton:pressed background-color: qlineargradient(x1: 0, y1: 0,
37、 x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); QPushButton:flat border: none; /* 没有边框的按钮 */ QPushButton:default border-color: navy; /* 使得按钮显示变得更加突出 */ QPushButton:open /* when the button has its menu open */ background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f
38、6f7fa); QPushButton:menu-indicator image: url(menu_indicator.png); subcontrol-origin: padding; subcontrol-position: bottom right; QPushButton:menu-indicator:pressed, QPushButton:menu-indicator:open position: relative; top: 2px; left: 2px; /* shift the arrow by 2 px */ 定制 QRadioButton QRadioButton:indicator width: 13px; height: 13px; QRadioButton:indicator:unchecked image: url(:/images/radiobutton_unchecked.png); QRadioButton:indicator:unchecked:hover image: url(:/images/radiobutton_unchecked_hover.png); QRadioButton:indicator:unchecked:pressed image: url(:/images/radiobutton_unch