调用别人网站的数据库,网站促销活动策划,如何创建公司,wordpress调用最新文章模板1.QSS
如果通过QSS设置的样式和通过C代码设置的样式冲突#xff0c;则QSS优先级更高
①基本语法
选择器{属性名#xff1a;属性值;
}
例如#xff1a;
QPushButton {color: red;
}
1指定控件设置样式
#include widget.h
#include ui_widget.h代码设置的样式冲突则QSS优先级更高
①基本语法
选择器{属性名属性值;
}
例如
QPushButton {color: red;
}
1指定控件设置样式
#include widget.h
#include ui_widget.hWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);//应用到这个特定的按钮上ui-pushButton-setStyleSheet(QPushButton{color:red;});//可以用颜色的英文也可以用#//ui-pushButton-setStyleSheet(QPushButton{color:#ffaa00;});//应用到该窗口内全部的按钮上this-setStyleSheet(QPushButton{color:red;});}Widget::~Widget()
{delete ui;
}
效果都是将QPushButton的文字颜色设置成指定颜色
2设置全局样式
通过QApplication的setStyleSheet方法设置整个程序的全局样式.
全局样式优点
使同一个样式针对多个控件生效代码更简洁.所有控件样式内聚在起便于维护和问题排查.
#include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(QPushButton{ color:red; });Widget w;w.show();return a.exec();
}如果全局和QSS冲突了呢
#include widget.h
#include ui_widget.hWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);//局部优先级更高ui-pushButton-setStyleSheet(QPushButton{color:black; font-size:50px;});//层叠性ui-pushButton_2-setStyleSheet(QPushButton{font-size:30px;});}Widget::~Widget()
{delete ui;
} QSS样式优先级更高
除此之外如果全局和指定控件分别设置两种不同的样式例如pushbutton_2那么这两种样式会叠加起来都给该控件进行设置属性层叠性
3样式和代码分离
上述设置方式比较繁琐样式设置和C代码混在了一起可以把样式代码放在文件中读取文件加载QSS内容。不过Qt Designer中直接集成了这样的功能允许我们把样式直接写进.ui文件里读取文件的方法不做介绍 由于设置样式太灵活有很多地方都能设置就导致当某个控件样式不符合预期的时候排查起来就比较麻烦
实际开发中如果需要设置样式最好统一使用某一种方式来设置
②选择器的用法 选择器 示例 说明 全局选择器 * 选择所有的widget 类型选择器 QPushButton 选择所有的QPushButton和其子类的控件 类选择器 .QPushButton 选择所有的QPushButton的控件不会选择子类 ID选择器 #pushButton_2 选择objectName为pushButton_2的控件 后代选择器 QDialog QPushButton 选择QDialog的所有后代子控件孙子控件等中的QPushButton 子选择器 QDialogQPushButton 选择QDialog的所有子控件中的QPushButton 并集选择器 QPushButton,QLineEdit,QComboBox 选择QPushButtonQLineEditQComboBox这三种控件样式针对这三种控件都生效 属性选择器 QPushButton[flatfalse] 选择所有QPushButton中flat属性为false的控件
1使用类型选择器选中子类控件
在全局中设置
#include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(QWidget{color:red;});Widget w;w.show();return a.exec();
}
注意此处选择器使用的是QWidgetQPushButton也是QWidget的子类所以会受到QWidget选择器的影响但如果改成a.setStyleSheet(.QWidget{color:red;});
此时按钮的颜色不会发生改变.此时只是选择QWidget类而不会选择QWidget的子类QPushButton2使用id选择器 #include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);//设置全局样式QString style ;//将所有按钮全局设置为黄色style QPushButton{color:yellow;};//用id选择器设置第一个按钮为红色第二个为绿色style #pushButton{color:red;};style #pushButton_2{color:green;};a.setStyleSheet(style);Widget w;w.show();return a.exec();
}当某个控件身上通过类型选择器和D选择器设置了冲突的样式时ID选择器样式优先级更高
同理如果是其他的多种选择器作用同一个控件时出现冲突的样式也会涉及到优先级问题
Qt文档上有具体的优先级规则介绍参见The Style Sheet Syntax的Conflict Resolution章节)
这里的规则计算起来非常复杂(CSS中也存在类似的设定)此处对于优先级不做进一步讨论
实践中我们可以简单的认为选择器描述的范围越精准则优先级越高。一般来说ID选择器优先级是最高的
3使用并集选择器 #include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(QPushButton,QLabel,QLineEdit{color:red;});Widget w;w.show();return a.exec();
}4设置下拉框的下拉按钮样式
有些控件内部包含了多个子控件比如QComboBox的下拉后的面板比如QSpinBox的上下按钮等
可以通过子控件选择器::针对上述子控件进行样式设置. #include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);QString style ;style QComboBox::down-arrow{image:url(:/down.png)};a.setStyleSheet(style);//resource.qrc内添加 down.pngWidget w;w.show();return a.exec();
}5修改进度条颜色 此处如果不设置alignment进度条中的数字会跑到左上角 6设置按钮的伪类样式
伪类选择器是根据控件所处的某个状态被选择的.例如按钮被按下输入框获取到焦点鼠标移动到某个控件上等
当状态具备时控件被选中样式生效当状态不具备时控件不被选中样式失效
使用:的方式定义伪类选择器 伪类选择器 说明 :hover 鼠标放到控件上 :pressed 鼠标左键按下时 :focus 获取输入焦点时 :enabled 元素处于可用状态时 :checked 被勾选时 :read-only 元素为只读状态时
这些状态可以使用来取反.比如:hover就是鼠标离开控件时:pressed就是鼠标松开时等等 #include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);QString style ;style QPushButton {color:red};style QPushButton:hover {color:green};style QPushButton:pressed {color:blue};a.setStyleSheet(style);Widget w;w.show();return a.exec();
}7用事件方式实现6中的效果
创建CclassMyPushButton继承父类QPushButton 重写MyPushButton的四个事件处理函数 ③样式属性 盒模型Box Model 一个遵守盒子模型的控件由上述几个部分构成
Content矩形区域存放控件内容.比如包含的文本/图标等Border矩形区域控件的边框Padding矩形区域内边距边框和内容之间的距离Margin矩形区域外边距边框到控件geometry返回的矩形边界的距离
默认情况下外边距内边距边框宽度都是0
复合属性以margin为例
可以拆为margin-leftmargin-rightmargin-topmargin-bottom QSS属性 说明 margin 设置四个方向的外边距复合属性 padding 设置四个方向的内边距复合属性 border-style 设置边框样式 border-width 边框的粗细 border-color 边框的颜色 border 复合属性相当于border-styleborder-widthborder-color
1设置边框和内边距 #include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(QLabel{border:5px solid red;padding-left:10px;});//solid表示实线Widget w;w.show();return a.exec();
}2设置外边距 终端打印的位置还是0,0但是视觉上能看到不在0,0位置因为加了外边框
#include widget.h
#include ui_widget.h
#includeQPushButton
#includeQDebugWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);QPushButton* btn new QPushButton(this);btn-setGeometry(0,0,100,100);btn-setText(hello);btn-setStyleSheet(QPushButton{border:5px solid red;margin:20px;});const QRect rect btn-geometry(); //获取按钮的几何位置和大小。qDebug()rect;
}Widget::~Widget()
{delete ui;
}
④控件样式属性
1按钮 属性 说明 font-size 设置文字大小 border-radius 设置圆角矩形数值设置的越大角就越圆 background-color 设置背景颜色
2复选框 要点 说明 ::indicator 子控件选择器选中checkbox中的对钩部分 :hover 伪类选择器选中鼠标移动上去的状态 :pressed 伪类选择器选中鼠标按下的状态 :checked 伪类选择器选中checkbox被选中的状态 :unchecked 伪类选择器选中checkbox未被选中的状态 width 设置子控件宽度对普通控件无效普通控件使用geometry方法设定尺寸 height 设置子控件高度对普通控件无效普通控件使用geometry方法设定尺寸 image 设置子控件的图片像QSpinBoxQComboBox等可以使用这个属性来设置子控件的图片
3单选框 要点 说明 ::indicator 子控件选择器选中radioButton中的对钩部分 :hover 伪类选择器选中鼠标移动上去的状态 :pressed 伪类选择器选中鼠标按下的状态 :checked 伪类选择器选中radioButton被选中的状态 :unchecked 伪类选择器选中radioButton未被选中的状态 width 设置子控件宽度对普通控件无效普通控件使用geometry方法设定尺寸 height 设置子控件高度对普通控件无效普通控件使用geometry方法设定尺寸 image 设置子控件的图片像QSpinBoxQComboBox等可以使用这个属性来设置子控件的图片
4输入框 属性 说明 border-width 设置边框宽度 border-radius 设置边框圆角 border-color 设置边框颜色 border-style 设置边框风格 padding 设置内边距 color 设置文字颜色 background 设置背景颜色 selection-background-color 设置选中文字的背景颜色 selection-color 设置选中文字的文本颜色
5列表 要点 说明 ::item 选中QListView中的具体条目 :hover 选中鼠标悬停的条目 :selected 选中某个被选中的条目 background 设置背景颜色 border 设置边框 qlineargradient 设置渐变色
关于qlineargradient
qlineargradient有六个参数
x1,y1:标注了一个起点.
x2,y2:标注了一个终点.
这两个点描述了一个方向
例如
x1:0,y1:0,x2:0,y2:1就是垂直方向从上向下进行颜色渐变.x1:0,y1:0,x2:1,y2:0就是水平方向从左向右进行颜色渐变.x1:0,y1:0,X2:1,y2:1就是从左上往右下方向进行颜色渐变
stop0和stop1描述了两个颜色渐变过程就是从stop0往stop1进行渐变的. //从上向下渐变
QWidget{background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #fff,stop:1 #FFFFBF);}
//从左向右渐变
QWidget{background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0 #fff,stop:1 #FFFFDE);}
6菜单栏 要点 说明 QMenuBar::item 选中菜单栏中的元素 QMenuBar::item:selected 选中菜单栏中的被选中的元素 QMenuBar::item:pressed 选中菜单栏中的鼠标点击的元素 QMenu::item 选中菜单中的元素 QMenu::item:selected 选中菜单中的被选中的元素 QMenu::separator 选中菜单中的分割线
