QSS按钮样式

2024-03-07 20:41:03

1.2 Qt样式表语法

（1）样式规则

每个样式规则由选择器和声明组成。

选择器：指定受该规则影响的部件。

声明：指定这个部件上要设置的属性

如：QPushButton{color:red}

QPushButton是选择器；

{color:red}是声明；

color是属性；

red是值。

（2）选择器类型

（3）子部件
对于一些复杂的部件修改样式，可能需要访问它们的子部件，如QComboBox的下拉按钮，QSpinBox的向上、向下箭头灯。
如：
下拉按钮设置图片属性：
QComboBox::drop-down{image:url(dropdown.png)}
（4）伪状态
①选择器可以包含为状态来限制规则在部件的指定状态上的应用。伪状态在选择器之后，用冒号隔离。如
鼠标悬停在按钮上时被应用：
QPushButton:hover{color:white}
鼠标不悬停在按钮上时被应用(!表否定)：
QPushButton:!hover{color:white}
②伪状态可多个连用，达到逻辑与效果。如
鼠标悬停在一个被选中的QCheckBox部件上时才应用规则：
QCheckBox:hover:checked{color:white}
③伪状态可通过逗号达到逻辑或效果。如
QCheckBox:hover,checked{color:white}
④伪状态和子部件联合使用。如
QComboBox::drop-down:hover{image:url(dropdown_bright.png)}
（5）冲突解决
几个样式规则对相同的属性指定不同的值时会产生冲突。如
QPushButton#okButton{color:gray}
QPushButton{color:red}
冲突原则：特殊的选择器优先。此例中QPushButton#okButton代表的是单一对象，而不是一个类的所有实例，所以okButton的文本颜色会是灰色的。同样的有伪状态的比没有伪状态的优先。
①层叠
样式表设置在QApplication上、父部件上或子部件上。部件有效的样式表示通过部件的祖先样式表和QApplication上的样式表合并得到的，当发生冲突时，部件自己的样式表优先于任何继承的样式表。
②继承
当使用Qt样式时，部件并不会自动从父部件继承字体和样色样式设置。如一个QPushButton包含在一个QGroupBox中，这里对QGroupBox设置样式表：
qApp->setStyleSheet(“QGroupBox{color:red;}”);
但没有对QPushButton设置样式表，这是QPushButton会使用系统颜色，而不会继承QGroupBox的颜色，如果想要QGroupBox的颜色设置到其子部件上，可以这样：
qApp->setStyleSheet(“QGroupBox,QGroupBox*{color:red;}”)
③设置QObject属性
从Qt4.3开始，任何可设计的Q_PROPERTY都可以使用“qproperty-属性名称”语法来设置样式表。如：
MyLabel{qproperty-pixmap:url(pixmap.png);}
MyGroupBox{qproperty-titleColor:rgb(100,200,100);}
QPushButton{qproperty-iconSize:20px 20px;}
（6）盒子模型
使用样式表时，每个部件被看作拥有4个同心矩形的的盒子，四个矩形的内容分别为内容（content）、填衬（padding）、边框（border）、边距（margin）。边距、边框宽度和填衬等属性的默认值都是0，这样四个矩形正好重叠。

（7）设计模式下设置样式表
①右键单击部件，选择“改变样式表”，然后进行样式的编辑。
②部件属性区选择styleSheet也可进行样式的设置。

常用接口

setStyleSheet(""); //设置样式表
backgound:yellow //背景色:黄色
color:red;//前景色:红色

border-bottom-left-radius:10px;  //边框底部左侧半径,设置弧度;
border-bottom-right-radius:10px;  //边框底部右侧侧半径,设置弧度;
border-top-left-radius:15px      //左上角 
border-top-right-radius:15px;    //右上角

font-size:18px; //字体大小

border-style:outset;

		/* 边框风格 */
        border-style:outset;//外凸

        /* 边框宽度 */
        border-width:0.5px;//图为10px,0.5

		/* 边框颜色 */
        border-color:rgb(10,45,110);//图3

//设置半径,样式设置为圆角
border-radius:10px;/* 边框倒角 */

//设置字体大小,风格	
font:bold 14px //粗体 14大小
font-family:微软雅黑;

/* 控件最小宽度 */
min-width:100px;

/* 控件最小高度 */
min-height:20px;

/* 内边距 */
padding:4px;//下图为100px内边距

鼠标按下

//设置pressed(按下)状态
QPushButton#testBtn:pressed{\
        background-color:rgb(40,85,20);}
        border-style:inset;//内凹风格
        //按下时类似内凹风格,图为border-width:10px;

//通过增加内边距使文字向右下偏移一点点(用于鼠标按下按钮时反馈)
		padding-left:6px;  //内边距左侧增加
        padding-top:6px;	//内边距上部增加

鼠标悬停

QPushButton:hover  //鼠标悬停时风格

窗口圆角实现

QWidget#testWidget{background-color:rgb(0,242,255);border-radius:30px;}

this->setAttribute(Qt::WA_TranslucentBackground);  //设置窗口背景透明
this->setWindowFlags(Qt::FramelessWindowHint);     //设置无边框窗口

需要重写

#include <QPaintEvent>
#include <QPainter>
#include <QStyleOption>

void Widget::paintEvent(QPaintEvent *event)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    QWidget::paintEvent(event);
}

border: 1px solid rgba(0, 0, 0, 0.1); 
//设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。

透明

background: transparent;//设置成透明

QScrollBar::handle //::对象样式设置(滚动条中的句柄)

letter//字距

码农公寓

1.2 Qt样式表语法

常用接口

相关文章