Qt用户界面开发.docx
- 文档编号:23940091
- 上传时间:2023-05-22
- 格式:DOCX
- 页数:33
- 大小:22.42KB
Qt用户界面开发.docx
《Qt用户界面开发.docx》由会员分享,可在线阅读,更多相关《Qt用户界面开发.docx(33页珍藏版)》请在冰豆网上搜索。
Qt用户界面开发
Qt用户界面开发
在Qt部件美化时要掌握CSS级联样式表,下文将对部件进行详细说明。
级联样式表(CSS)包含应用于网页中的元素的样式规则。
CSS样式定义元素的显示方式以及元素在页中的放置位置。
可以创建一个通用规则,只要Web浏览器遇到一个元素实例,或遇到一个分配给某个特定样式类的元素,该规则就立刻应用属性,而不是将属性逐个分配给页中的每个元素。
CSS样式可以通过内联方式放置在单个HTML元素内,也可以在网页head部分的style块内加以分组,或从单独的样式表中导入。
如果样式是在单独的样式表中创建的,则可以将多个网页链接到该样式表,从而为整个网站提供一个通用的外观。
如果使用CSS设置Web控件的样式,则应使用CssClass属性来定义要与控件或控件元素关联的CSS类名,然后在样式表中为这些控件或控件元素指定样式时引用该类名。
下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。
自定义的前台背景与后台背景的颜色:
如果需要样一个文本编辑器的背景变为黄色,下面是代码行:
qApp->setStyleSheet("QLineEdit{background-color:
yellow}");
针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色,下面是代码:
myDialog->setStyleSheet("QLineEdit{background-color:
yellow}");
如果只需要制定一个QLineEdit的内容,将使用QObject:
:
setObjectName()下面是一个实例:
myDialog->setStyleSheet("QLineEdit#nameEdit{background-color:
yellow}");
同时也可以针对每一个指定的部件做直接的类型设置,下面是一个实例:
nameEdit->setStyleSheet("background-color:
yellow");
为了做一个鲜明的对比,将要为文本设置合适的颜色。
nameEdit->setStyleSheet("color:
blue;background-color:
yellow");
当然最好的办法还有针对选择的文本来进行设置,下面设置了一个选择文本的类型属性:
nameEdit->setStyleSheet("color:
blue;"
"background-color:
yellow;"
"selection-color:
yellow;"
"selection-background-color:
blue;");
在有一些情况下,不需要用户参与,而有软件设计人员来自己制定样式,即使这些是有违审美角度。
下面就从应用程序开发角度来设计样式。
*[mandatoryField="true"]{background-color:
yellow}
上面的意思是一些强制的区域是需要用Qt的属性管理来强制设置成为黄色的背景。
这样一些强制的部件,将需要通过函数来设置当前的属性已经被强制设置,下面是实现的代码:
QLineEdit*nameEdit=newQLineEdit(this);
nameEdit->setProperty("mandatoryField",true);
QLineEdit*emailEdit=newQLineEdit(this);
emailEdit->setProperty("mandatoryField",true);
QSpinBox*ageSpinBox=newQSpinBox(this);
ageSpinBox->setProperty("mandatoryField",true);
自定义的按钮
下面我们将通过一个按钮的部件来设置属性样式:
首先来设置一下样式:
QPushButton#evilButton{background-color:
red}
说明设置的当前的按钮为红色。
作为一个flat平滑的按钮时没有边界的。
下面是来改进一下对边界的设置。
QPushButton#evilButton{
background-color:
red;
border-style:
outset;
border-width:
2px;
border-color:
beige;
}
在这里设置了一个边界的类型与边界的宽度。
这样看上去就好多了,文档中无法展现图片,有兴趣可以去Qt的变成环境当中去尝试。
即使这样设计,按钮看上去也是显得混乱,与主部件没有办法分开。
首先是在边界设置出一个空间出来,并且强制的制定最小宽度,与环绕的弧度,并且提供一个按钮的字体设置,似的按钮看上去比较好看。
QPushButton#evilButton{
background-color:
red;
border-style:
outset;
border-width:
2px;
border-radius:
10px;
border-color:
beige;
font:
bold14px;
min-width:
10em;
padding:
6px;
}
如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。
所以就需要指定一个合适的背景颜色与不一样的边界类型。
QPushButton#evilButton{
background-color:
red;
border-style:
outset;
border-width:
2px;
border-radius:
10px;
border-color:
beige;
font:
bold14px;
min-width:
10em;
padding:
6px;
}
QPushButton#evilButton:
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);
subcontrol-position:
rightcenter;
subcontrol-origin:
padding;
left:
-2px;
}
经过以上的设置那么QPushButton将会在方格的中心显示一个myindicator.png的图片。
复杂的选择区域的例子:
当应对于一个用户可可编辑可输入的部件的时候,将需要设计到用户选择区域的颜色设置,与类型设置,下面将通过使用QLineEdit部件来进行演示:
QLineEdit{color:
red}
QLineEdit{color:
red}
QLineEdit[readOnly="true"]{color:
gray}
在团队开发的时候,需要设计到不同颜色的设置,或者说不同类型的设置,那么就需要在样式编辑当中有多种选择,将不需要的那部分,注释掉:
QLineEdit{color:
red}
QLineEdit[readOnly="true"]{color:
gray}
#registrationDialogQLineEdit{color:
brown}
自定义制定的部件
这个部分提供了一些自定义特殊部件的某种样式
定制QAbstractScrollArea
比如说一些QAbstractScrollArea类,例如QTextEdit与QTextBrowser.同时可以使用后台的属性来进行设置。
例如来设置一个背景图片。
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具有想色的属性,他们之间的不同时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:
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:
:
indicator:
indeterminate:
hover{
image:
url(:
/images/checkbox_indeterminate_hover.png);
}
QCheckBox:
:
indicator:
indeterminate:
pressed{
image:
url(:
/images/checkbox_indeterminate_pressed.png);
}
自定义的QComboBox
下面是对QComboBox下拉列表框进行的样式设计:
QComboBox{
border:
1pxsolidgray;
border-radius:
3px;
padding:
1px18px1px3px;
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);
}
/*QComboBoxgetsthe"on"statewhenthepopupisopen*/
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{/*shiftthetextwhenthepopupopens*/
padding-top:
3px;
padding-left:
4px;
}
QComboBox:
:
drop-down{
subcontrol-origin:
padding;
subcontrol-position:
topright;
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/1downarrow.png);
}
QComboBox:
:
down-arrow:
on{/*shiftthearrowwhenpopupisopen*/
top:
1px;
left:
1px;
}
自定的QSpinBox
QSpinBox{
padding-right:
15px;/*makeroomforthearrows*/
border-image:
url(:
/images/frame.png)4;
border-width:
3;
}
QSpinBox:
:
up-button{
subcontrol-origin:
border;
subcontrol-position:
topright;/*positionatthetoprightcorner*/
width:
16px;/*16+2*1pxborder-width=15pxpadding+3pxparentborder*/
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:
url(:
/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{/*offstatewhenvalueismax*/
image:
url(:
/images/up_arrow_disabled.png);
}
QSpinBox:
:
down-button{
subcontrol-origin:
border;
subcontrol-position:
bottomright;/*positionatbottomrightcorner*/
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_pressed.png)1;
}
QSpinBox:
:
down-arrow{
image:
url(:
/images/down_arrow.png);
width:
7px;
height:
7px;
}
QSpinBox:
:
down-arrow:
disabled,
QSpinBox:
:
down-arrow:
off{/*offstatewhenvalueinmin*/
image:
url(:
/images/down_arrow_disabled.png);
}
自定义的QFrame
QFrame,QLabel,QToolTip{
border:
1pxsolidgreen;
border-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:
1pxsolidgray;
border-radius:
5px;
margin-top:
1ex;/*leavespaceatthetopforthetitle*/
}
QGroupBox:
:
title{
subcontrol-origin:
margin;
subcontrol-position:
topcenter;/*positionatthetopcenter*/
padding:
03px;
background-color:
qlineargradient(x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#FFOECE,stop:
1#FFFFFF);
}
对于有一个可选择的QGroupBox,使用{#indicator-sub}{:
:
indicator}他的类型控制就类似于QCheckBox.
QGroupBox:
:
indicator{
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:
4px;
border:
1pxsolid#6c6c6c;
}
/*stylethesortindicator*/
QHeaderView:
:
down-arrow{
image:
url(down_arrow.png);
}
QHeaderView:
:
up-arrow{
image:
url(up_arrow.png);
}
定制QLineEdit
QLineEdit{
border:
1pxsolidgray;
border-radius:
10px;
padding:
08px;
background:
yellow;
selection-background-color:
darkgray;
}
当一个QLineEdit需要使用一个密码的模式的话那么将设置成为QLineEdit:
:
Password这样属性就被使用了。
QLineEdit[echoMode="2"]{
lineedit-password-character:
9679;
}
QLineEdit:
read-only{
background:
lightblue;
定制QMenu
QMenu{
background-color:
#ABABAB;/*设置菜单的背景*/
border:
1pxsolidblack;
}
QMenu:
:
item{
/*设置菜单的项目的背景*/
background-color:
transparent;
}
QMenu:
:
item:
selected{/*当用户使用鼠标活着键盘进行选择的时候选择项的颜色*/
background-color:
#654321;
}
对于菜单部件的一些其他的选项,下面提供了许多高级的设置:
QMenu{
background-color:
white;
margin:
2px;/*围绕菜单的一些空间*/
}
QMenu:
:
item{
padding:
2px25px2px20px;
border:
1pxsolidtransparent;/*reservespaceforselectionborder*/
}
QMenu:
:
item:
selected{
border-color:
darkblue;
background:
rgba(100,100,100,150);
}
QMenu:
:
icon:
checked{/*appearanceofa'checked'icon*/
background:
gray;
border:
1pxinsetgray;
position:
absolute;
top:
1px;
right:
1px;
bottom:
1px;
left:
1px;
}
QMenu:
:
separator{
height:
2px;
background:
lightblue;
mar
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Qt 用户界面 开发
![提示](https://static.bdocx.com/images/bang_tan.gif)