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);}/*QComboBoxgetstheonstatewhenthepopupisopen*/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