checkbox qt 样式,Qt StyleSheet样式表实例(转)

QT论坛看到的,收藏一下!

在涉及到Qt美工的时候首先需要掌握CSS级联样式表。

下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色:

如果需要一个文本编辑器的背景变为黄色, 下面是代码行:

qApp->setStyleSheet("QLineEdit {

针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色, 下面是代码:

myDialog ->setStyleSheet("QLineEdit {

如果只需要制定一个QLineEdit的内容, 将使用QObject::setObjectName()下面是一个实例:

myDialog->setStyleSheet("QLineEdit#nameEdit {

同时也可以针对每一个指定的部件做直接的类型设置, 下面是一个实例:

ui.nameEdit->setStyleSheet("

为了做一个鲜明的对比, 将要为文本设置合适的颜色。

nameEdit->setStyleSheet("color: blue;

当然最好的办法还有针对选择的文本来进行设置, 下面设置了一个选择文本的类型属性: nameEdit->setStyleSheet("color: blue;"

""

"selection-color: yellow;"

"selection-");

在有一些情况下, 不需要用户参与, 而有软件设计人员来自己制定样式, 即使这些是有违审美角度。  下面就从应用程序开发角度来设计样式。

*[mandatoryField="true"] {  ">上面的意思是一些强制的区域是需要用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 {  line-height:150%; ">说明设置的当前的按钮为红色。作为一个flat平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。

QPushButton#evilButton {

border-style: outset;

border-width: 2px;

border-color: beige;

}

在这里设置了一个边界的类型与边界的宽度。  这样看上去就好多了,文档中无法展现图片, 有兴趣可以去Qt的变成环境当中去尝试。即使这样设计, 按钮看上去也是显得混乱,与主部件没有办法分开。 首先是在边界设置出一个空间出来, 并且强制的制定最小宽度,与环绕的弧度, 并且提供一个按钮的字体设置, 似的按钮看上去比较好看。

QPushButton#evilButton {

border-style: outset;

border-width: 2px;

border-radius: 6px;

border-color: beige;

font: bold 14px;

min-width: 10em;

padding: 6px;

}

如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。  所以就需要指定一个合适的背景颜色与不一样的边界类型。

QPushButton#evilButton {

border-style: outset;

border-width: 2px;

border-radius: 10px;

border-color: beige;

font: bold 14px;

min-width: 10em;

padding: 6px;

}

QPushButton#evilButton:pressed {

border-style: inset;

}

指定QPushButton菜单指示器的子控制子控提供了访问子子元素的功能, 例如通常的时候一个按钮将会管理一个菜单,

QPushButton#evilButton::menu-indicator {

image: url(myindicator.png);

}

同时如果美化一个按钮的话, 那么将可以通过定位符来确定美化按钮的路径, 通常可以是一个图片。

QPushButton::menu-indicator {

image: url(myindicator.png);

subcontrol-position: right center;

subcontrol-origin: padding;

left: -2px;

}

经过以上的设置那么QPushButton将会在方格的中心显示一个myindicator.png的图片。

复杂区域的例子:

当应对于一个用户可编辑可输入的部件的时候, 将需要设计到用户选择区域的颜色设置, 与类型设置, 下面将通过使用QLineEdit部件来进行演示:

QLineEdit { color: red }

QLineEdit[readOnly="true"]{color:gray}

在团队开发的时候, 需要设计到不同颜色的设置, 或者说不同类型的设置,那么就需要在样式编辑当中有多种选择,将不需要的那部分,注释掉:

QLineEdit { color: red }

QLineEdit[readOnly="true"] { color: gray }

#registrationDialog QLineEdit { color: brown }

自定义制定的部件

这个部分提供了一些自定义特殊部件的某种样式

定制QAbstractScrollArea

比如说一些QAbstractScrollArea类, 例如QTextEdit与QTextBrowser .同时可以使用后台的属性来进行设置。 例如来设置一个 背景图片。

QTextEdit, QListView {

background-image: url(draft.png);

background-attachment: scroll;

}

下面的代码是让背景图片与可浏览的区域大小相同:

QTextEdit, QListView {

background-image: url(draft.png);

background-attachment: fixed;

}

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);

}

你可能感兴趣的:(checkbox,qt,样式)