Qt样式表及相关案例

一.Qt样式表介绍

Qt样式表是一个可以自定义部件外观的强大机制，样式表的概念、术语、语法均受到HTML的层叠样式表(Cascading Style Sheets,CSS)的启发。
样式表可通过QApplication::setStyleSheet()函数将其设置到整个应用程序上，也可以使用QWidget::setStyleSheet()将其设置到指定的部件或子部件上，不同级别均可设置样式表，称为样式表的层叠。样式表也可通过设计模式编辑样式表。

二.样式表语法

1. 样式规则
   每个样式规则由选择器和声明组成。
   选择器：指定受该规则影响的部件。
   声明：指定这个部件上要设置的熟悉
   如：QPushButton{color:red}
   QPushButton是选择器；
   {color:red}是声明；
   color是属性；
   red是值。
   选择器{属性1：值1；属性2：值2；属性3：值3}
   此规则指定了QPushButton和它的子类使用红色作为前景色。样式表中一般不区分大小写，如color与coLOR表相同属性，但类名、对象名及Qt属性名区分大小写。
   声明中的多组“属性：值”列表以分号“；”隔开，如
   QPushButton{color:red;background-color:white}

2. 选择器类型

三.案例介绍

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

• 效果图