Qt界面美工实例Word格式.docx
《Qt界面美工实例Word格式.docx》由会员分享，可在线阅读，更多相关《Qt界面美工实例Word格式.docx（31页珍藏版）》请在冰点文库上搜索。
selection-background-color:
在有一些情况下，不需要用户参与，而有软件设计人员来自己制定样式，即使这些是有违审美角度。
下面就从应用程序开发角度来设计样式。
*[mandatoryField="
true"
]{background-color:
yellow}
上面的意思是一些强制的区域是需要用Qt的属性管理来强制设置成为黄色的背景。
这样一些强制的部件，将需要通过函数来设置当前的属性已经被强制设置，下面是实现的代码：
QLineEdit*nameEdit=newQLineEdit（this）;
setProperty（"
mandatoryField"
true）;
QLineEdit*emailEdit=newQLineEdit（this）;
emailEdit->
QSpinBox*ageSpinBox=newQSpinBox（this）;
ageSpinBox->
QPushButton*evilButton=newQPushButton（this）;
evilButton->
setText（"
Button"
下面我们将通过一个按钮的部件来设置属性样式：
首先来设置一下样式：
QPushButton#evilButton{background-color:
red}
说明设置的当前的按钮为红色。
作为一个flat平滑的按钮时没有边界的。
下面是来改进一下对边界的设置。
QPushButton#evilButton{
red;
border-style:
outset;
border-width:
2px;
border-color:
beige;
}
在这里设置了一个边界的类型与边界的宽度。
这样看上去就好多了，文档中无法展现图片，有兴趣可以去Qt的变成环境当中去尝试。
即使这样设计，按钮看上去也是显得混乱，与主部件没有办法分开。
首先是在边界设置出一个空间出来，并且强制的制定最小宽度，与环绕的弧度，并且提供一个按钮的字体设置，似的按钮看上去比较好看。
border-radius:
6px;
font:
bold14px;
min-width:
10em;
padding:
}
如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。
所以就需要指定一个合适的背景颜色与不一样的边界类型。
10px;
}
QPushButton#evilButton:
pressed{
rgb（224,0,0）;
inset;
指定QPushButton菜单指示器的子控制子控提供了访问子子元素的功能，例如通常的时候一个按钮将会管理一个菜单，
menu-indicator{
image:
url（myindicator.png）;
同时如果美化一个按钮的话，那么将可以通过定位符来确定美化按钮的路径，通常可以是一个图片。
QPushButton:
subcontrol-position:
rightcenter;
subcontrol-origin:
padding;
left:
-2px;
经过以上的设置那么QPushButton将会在方格的中心显示一个myindicator.png的图片。
复杂区域的例子：
当应对于一个用户可编辑可输入的部件的时候，将需要设计到用户选择区域的颜色设置，与类型设置，下面将通过使用QLineEdit部件来进行演示：
QLineEdit{color:
QLineEdit[readOnly="
]{color:
gray}
在团队开发的时候，需要设计到不同颜色的设置，或者说不同类型的设置，那么就需要在样式编辑当中有多种选择，将不需要的那部分，注释掉：
]{color:
gray}
#registrationDialogQLineEdit{color:
brown}
自定义制定的部件
这个部分提供了一些自定义特殊部件的某种样式
定制QAbstractScrollArea
比如说一些QAbstractScrollArea类，例如QTextEdit与QTextBrowser.同时可以使用后台的属性来进行设置。
例如来设置一个背景图片。
QTextEdit,QListView{
white;
background-image:
url（draft.png）;
background-attachment:
scroll;
下面的代码是让背景图片与可浏览的区域大小相同：
fixed;
QCheckBox与QRadioButton具有想色的属性，他们之间的不同时QCheckBox是返回当前的状态：
QCheckBox{
spacing:
5px;
QCheckBox:
indicator{
width:
13px;
height:
indicator:
unchecked{
url（:
/images/checkbox_unchecked.png）;
unchecked:
hover{
/images/checkbox_unchecked_hover.png）;
/images/checkbox_unchecked_pressed.png）;
checked{
/images/checkbox_checked.png）;
checked:
/images/checkbox_checked_hover.png）;
/images/checkbox_checked_pressed.png）;
indeterminate:
/images/checkbox_indeterminate_hover.png）;
/images/checkbox_indeterminate_pressed.png）;
下面是对QComboBox下拉列表框进行的样式设计：
QComboBox{
border:
1pxsolidgray;
3px;
1px18px1px3px;
6em;
QComboBox:
editable{
background:
!
editable,QComboBox:
drop-down:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#E1E1E1,stop:
0.4#DDDDDD,
0.5#D8D8D8,stop:
1.0#D3D3D3）;
/*QComboBoxgetsthe"
on"
statewhenthepopupisopen*/
editable:
on,QComboBox:
on{
0#D3D3D3,stop:
0.4#D8D8D8,
0.5#DDDDDD,stop:
1.0#E1E1E1）;
on{/*shiftthetextwhenthepopupopens*/
padding-top:
padding-left:
4px;
drop-down{
topright;
15px;
border-left-width:
1px;
border-left-color:
darkgray;
border-left-style:
solid;
/*仅此一行*/
border-top-right-radius:
border-bottom-right-radius:
down-arrow{
url（/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png）;
down-arrow:
on{/*shiftthearrowwhenpopupisopen*/
top:
自定的QSpinBox
QSpinBox{
padding-right:
/*makeroomforthearrows*/
border-image:
/images/frame.png）4;
3;
QSpinBox:
up-button{
border;
/*positionatthetoprightcorner*/
16px;
/*16+2*1pxborder-width=15pxpadding+3pxparentborder*/
/images/spinup.png）1;
up-button:
/images/spinup_hover.png）1;
/images/spinup_pressed.png）1;
up-arrow{
/images/up_arrow.png）;
7px;
up-arrow:
disabled,QSpinBox:
off{/*offstatewhenvalueismax*/
/images/up_arrow_disabled.png）;
down-button{
bottomright;
/*positionatbottomrightcorner*/
/images/spindown.png）1;
border-top-width:
0;
down-button:
/images/spindown_hover.png）1;
/images/spindown_pressed.png）1;
/images/down_arrow.png）;
disabled,
QSpinBox:
off{/*offstatewhenvalueinmin*/
/images/down_arrow_disabled.png）;
自定义的QFrame
QFrame,QLabel,QToolTip{
1pxsolidgreen;
url（images/welcome.png）;
定制QGroupbox
QGroupBox{
0#E0E0E0,stop:
1#FFFFFF）;
margin-top:
1ex;
/*leavespaceatthetopforthetitle*/
QGroupBox:
title{
margin;
topcenter;
/*positionatthetopcenter*/
03px;
0#FFOECE,stop:
对于有一个可选择的QGroupBox，使用{#indicator-sub}{:
indicator}他的类型控制就类似于QCheckBox.
定制QHeaderView
QHeaderView:
section{
0,y1:
0,x2:
0,y2:
1,
0#616161,stop:
0.5#505050,
0.6#434343,stop:
1#656565）;
color:
1pxsolid#6c6c6c;
/*stylethesortindicator*/
url（down_arrow.png）;
url（up_arrow.png）;
定制QLineEdit
QLineEdit{
08px;
selection-background-color:
当一个QLineEdit需要使用一个密码的模式的话那么将设置成为QLineEdit:
Password这样属性就被使用了。
QLineEdit[echoMode="
2"
]{
lineedit-password-character:
9679;
QLineEdit:
read-only{
lightblue;
定制QMenu
QMenu{
#ABABAB;
/*设置菜单的背景*/
1pxsolidblack;
QMenu:
item{
/*设置菜单的项目的背景*/
transparent;
item:
selected{/*当用户使用鼠标活着键盘进行选择的时候选择项的颜色*/
#654321;
对于菜单部件的一些其他的选项，下面提供了许多高级的设置：
margin:
/*围绕菜单的一些空间*/
2px25px2px20px;
1pxsolidtransparent;
/*reservespaceforselectionborder*/
selected{
darkblue;
rgba（100,100,100,150）;
icon:
checked{/*appearanceofa'
checked'
icon*/
gray;
1pxinsetgray;
position:
absolute;
right:
bottom:
separator{
margin-left:
margin-right:
/*non-exclusiveindicator=checkboxstyleindicator（seeQActionGroup:
setExclusive）*/
non-exclusive:
indica
升级会员 