Qt界面美工实例
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Qt StyleSheet样式表实例
在涉及到Qt 美工的时候首先需要掌握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 }");
同时也可以针对每一个指定的部件做直接的类型设置,下面是一个实例:
Edit->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 = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);
QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);
QPushButton * evilButton = new QPushButton (this);
evilButton ->setText("Button");
下面我们将通过一个按钮的部件来设置属性样式:
首先来设置一下样式:
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: 6px;
border-color: beige;
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#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);