一.Qt样式表介绍
Qt样式表是一个可以自定义部件外观的强大机制,样式表的概念、术语、语法均受到HTML的层叠样式表(Cascading Style Sheets,CSS)的启发。
样式表可通过QApplication::setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()将其设置到指定的部件或子部件上,不同级别均可设置样式表,称为样式表的层叠。样式表也可通过设计模式编辑样式表。
二.样式表语法
-
样式规则
每个样式规则由选择器和声明组成。
选择器:指定受该规则影响的部件。
声明:指定这个部件上要设置的熟悉
如:QPushButton{color:red}
QPushButton是选择器;
{color:red}是声明;
color是属性;
red是值。
选择器{属性1:值1;属性2:值2;属性3:值3}
此规则指定了QPushButton和它的子类使用红色作为前景色。样式表中一般不区分大小写,如color与coLOR表相同属性,但类名、对象名及Qt属性名区分大小写。
声明中的多组“属性:值”列表以分号“;”隔开,如
QPushButton{color:red;background-color:white} -
选择器类型
三.案例介绍
1. 设置按钮样式表
// 创建一个按钮QPushButton *button = new QPushButton(this);button->setText("Click me");button->setGeometry(100,100,200,200);// 设置按钮的样式表button->setStyleSheet("QPushButton {""background-color: #FFA500;""border: 1px solid #FFA500;""color: white;""padding: 10px 20px;""text-align: center;""text-decoration: none;""display: inline-block;""font-size: 16px;""border-radius: 5px;""}""QPushButton:hover {""background-color: #FF8C00;""}""QPushButton:pressed {""background-color: #FF4500;""}");
- 效果图
-
2.设置阴影效果
// 部件设置透明度QGraphicsOpacityEffect*opacityEffect=new QGraphicsOpacityEffect;opacityEffect->setOpacity(0.1);ui->pushButton->setGraphicsEffect(opacityEffect);//设置阴影效果QGraphicsDropShadowEffect*shadoweffect=new QGraphicsDropShadowEffect;//阴影色,透明度shadoweffect->setColor(QColor(100,100,100));shadoweffect->setBlurRadius(20);//阴影模糊半径shadoweffect->setXOffset(20);//阴影偏移值ui->pushButton->setGraphicsEffect(shadoweffect);
- 效果图
3. 不规则窗体(遮罩)
QPixmap pixmap;pixmap.load(":/new/images/flower.png");ui->label->resize(pixmap.size());this->resize(pixmap.size());//设置遮罩的效果setMask(pixmap.mask());//重写绘图事件
void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.drawPixmap(0,0,QPixmap(":/new/images/flower.png"));
}
- 效果图