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

• 效果图