Qt界面美工实例Word格式.docx
- 文档编号:4790734
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:31
- 大小:21.56KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Qt 界面 美工 实例