泉州企业网站开发,公司做网站让我们销售,开发网站和电脑软件的区别,百度图片搜索入口本文详细介绍qt的样式表#xff0c;包含样式表如何使用#xff0c;常见语句和选择器。
背景说明
样式表用于设置外观#xff0c;他是设置控件外观的方式之一。其他方式如下#xff1a;
控件的成员函数#xff0c;如QWidget::setBackground样式表调色板
优先级依次提高…本文详细介绍qt的样式表包含样式表如何使用常见语句和选择器。
背景说明
样式表用于设置外观他是设置控件外观的方式之一。其他方式如下
控件的成员函数如QWidget::setBackground样式表调色板
优先级依次提高。调色板有最高优先级。
样式表
qt控件通过setsytlesheet(“样式表代码”)来使用样式表代码。QWidget::setstylesheet设置的qss代码作用域是设置它的控件以及其子控件。
下面是qss代码的一个举例
QPushButton {background-color: red;
}这个代码的意思是把作用域的QPushButton控件的背景颜色设置为红色。
到底是哪个QPushButton的背景变成红色取决于谁调用了setstylesheet来应用这个样式表。如果是某个Qframe调用则容器内所有的按钮背景都是红色但其他Qframe中的按钮不受影响因为setstylesheet的作用域只有调用它的QFrame以及QFrame中的子控件。如果是某个QPushButton调用则只有这个QPushButton背景会变成红色,。
setsytlesheet函数使用示例
下面通过简单的例子来示意setstylesheet函数怎么用。
#include QApplication
#include QPushButtonint main(int argc, char *argv[])
{QApplication a(argc, argv);QPushButton button(Click me!);button.setGeometry(100, 100, 200, 50);button.setStyleSheet(QPushButton { background-color: red;});button.show();return a.exec();
}像这样界面上那个调用了setStyleSheet的按钮背景颜色就变成红色了。
加载全局qss样式
我们可以在一个文件中描述所有界面上所有控件的样式。然后使用QApplication::setStyleSheet来应用全局样式。这样做的好处是分离功能和外观布局。外观布局用qss写如果外观只是变个颜色添加一个新的qss文件就行了其他代码甚至都不用重新编译。下面就是加载全局样式的示例
#include QApplication
#include QFileint main(int argc, char *argv[])
{QApplication a(argc, argv);QFile file(:/style.qss); // 加载 qss 文件if (file.open(QFile::ReadOnly | QFile::Text)){QString styleSheet QString::fromUtf8(file.readAll());a.setStyleSheet(styleSheet); // 应用样式表file.close();}// 创建窗口和控件等代码// ...return a.exec();
}这样写的qss代码作用域是整个 应用程序。其中代码写在了style.qss文件中。
样式表的作用域、选择器、语句概念
作用域是指qss语句可能对哪些区域的控件进行设置它取决于setStyleSheet在哪里被调用。作用域是明确的一旦调用了setStyleSheet作用域就确定了。作用域不体现在qss代码中。而体现在setStyleSheet的位置。选择器是指对作用域内的哪些控件进行设置。选择器是可选的可以不存在选择器。
qss代码由选择器和语句构成其中选择器不一定有qss代码语法如下
选择器{语句1语句2
}下面将介绍分别介绍语句和选择器
语句
语句用来描述控件的外观需要记忆。 设置控件背景颜色background-color: 颜色值; 设置控件前景颜色color: 颜色值; 设置控件背景图片background-image: url(图片路径); 设置背景图片平铺至整个控件区域当控件大小发生变化时背景图片也会跟着变化background-image: url(图片路径); 设置背景图片居中显示当控件大小发生变化时背景图片不会跟着变化background-image: url(图片路径) 0 0 no-repeat; 将背景图片平铺至整个控件区域当控件大小发生变化时背景图片会等比例拉伸background-image: url(图片路径) 0 0 stretch; 设置控件背景重复方式background-repeat: repeat|repeat-x|repeat-y|no-repeat; 设置控件背景位置background-position: 水平位置 垂直位置; 设置控件大小width: 宽度; height: 高度; 设置控件最小大小min-width: 宽度; min-height: 高度; 设置控件最大大小max-width: 宽度; max-height: 高度; 设置控件透明度opacity: 透明度; 设置控件的对齐方式alignment: 左|右|中; 设置控件的间距spacing: 距离; 设置控件的填充margin: 上 右 下 左; 设置控件的边框border: 宽度 样式 颜色; 设置控件的边框颜色border-color: 颜色; 设置控件的边框样式border-style: none|solid|dashed|dotted; 设置控件的边框宽度border-width: 宽度; 设置控件的圆角半径border-radius: 大小; 设置控件的阴影box-shadow: 位置 大小 颜色; 设置控件的内边距padding: 上 右 下 左; 设置控件的文本对齐方式text-align: left|right|center|justify; 设置控件的文本装饰text-decoration: none|underline|overline|line-through; 设置控件的文本字间距letter-spacing: 距离; 设置控件的文本行间距line-height: 大小; 设置控件的字体font: 字体; 设置控件的字体大小font-size: 大小; 设置控件的字体颜色color: 颜色; 设置控件的字体加粗font-weight: normal|bold; 设置控件的字体斜体font-style: normal|italic; 设置控件的字体下划线text-decoration: none|underline; 设置控件的图标大小icon-size: 宽度 高度;
选择器
选择器可以让我们定位到作用域里的某个或者某组控件只设置这一个或者这一组控件的外观。比如作用域内上有好多按钮我希望写一个qss让一部分按钮的背景颜色是红色另一部分是绿色。就需要用到选择器定位到那些有特殊要求的控件。
通用选择器
*{background-color: red;
}* 就是通用选择器它使得background-color: red作用于作用域内的所有控件。
类型选择器
选择指定的类及其子类
类名{语句
}如
QFrame{background-color: red;
}选择的是作用域内的QFrame以及其子类如QLabel等。QPushButton不是QFrame的子类所有不会被选择。
类选择器
区别于类型选择器它只选择指定的类而不选择其子类
.类名{语句;
}如
.QFrame{background-color: red;
}选择作用域内的QFrame而其他类不受影响。
id选择器
----------------背景介绍----------------------- 控件可以通过setObjectName设置它的id。 如
QPushButton* bt1new QPushButton();
bt1.setObjectName(button1);---------------------------------------------------- 选择指定id的控件。
#id{语句
}如
#button1{background-color: red;
}这样会把作用域内objectName为button1的所有控件背景颜色都设置成红色。
属性选择器
----------------背景介绍----------------------- 控件可以通过setProperty设置它的属性。 如
QPushButton* bt1new QPushButton();
bt1.setProperty(level, dangerous);这样设置了bt1的level属性为dangerous ---------------------------------------------------- 选择指定属性为指定值的控件
[属性名属性值]{语句;
}如
[leveldangerous]{background-color: red;
}这样把作用域内所有level属性为dangerous的控件的背景颜色设置为了红色。
包含选择器
比较难描述定义直接看示例吧
QFrame QPushButton {background: white;
}这里使得QFrame下的QPushButton的背景颜色为白色。如果一个QPushButton不在某个QFrame中是不会被选择的。 包含选择器可以不止两层可以更多比如QFrame下的QFrame下的QPushButton。
子元素选择器
选择一个控件的直接子控件。
父控件 子控件 {语句
}如
QFrame QGroupBox {background: white;
}选择QFrame下的QGroupBox背景为白色但不会影响QGroupBox的子控件。
伪类选择器
当控件处于某种状态时选择它
控件名[可选的“!”!表示取反]状态{语句
}如
QCheckBox:!checked {
color: red
}当QChectBox没有被选中时它的颜色为红色。 常用状态
状态说明:disabledWidget 被禁用时:enabledWidget 可使用时:focusWidget 得到输入焦点:hover鼠标放到 Widget 上:pressed鼠标按下时:checked被选中时:unchecked未选中时:has-childrenItem 有子 item例如 QTreeView 的 item 有子 item 时:has-siblingsItem 有 兄弟例如 QTreeView 的 item 有兄弟 item 时:open打开或展开状态例如 QTreeView 的 item 展开QPushButton 的菜单弹出时:closed关闭或者非展开状态:onWidget 状态是可切换的toggle, 在 on 状态:offWidget 状态是可切换的toggle, 在 off 状态
subcontrol选择器
选择控件的一部分。有些控件是由多个部分组成的例如 QCheckBox 由 icon(indicator) 和 text 组成。
类名::部分{语句;
}如
QCheckBox::indicator {width: 20px;height: 20px;
}
QCheckBox {spacing: 8px;
}常用的控件部分
Subcontrol说明::indicatorA QCheckBox, QRadioButton, checkable QMenu item, or a checkable QGroupBox’s indicator::menu-indicatorA QPushButton’s menu indicator::itemA QMenu, QMenuBar, or QStatusBar’s item::up-buttonA QSpinBox or QScrollBar’s up button::down-buttonA QSpinBox or QScrollBar’s down button::up-arrowA QSpinBox, QScrollBar, or QHeaderView’s up arrow::down-arrowA QSpinBox, QScrollBar, or QHeaderView’s down arrow::drop-downA QComboBox’s drop-down arrow::titleA QGroupBox or QDockWidget’s title::grooveA QSlider’s groove::chunkA QProgressBar’s progress chunk::branchA QTreeView’s branch indicator
