Qt样式表之三：QSS奇技淫巧

下面介绍一些项目中可能要用到的 QSS "奇技淫巧"。

一、指定位置设置背景图片

QMainWindow#MyWidget {
    background-color: gainsboro;
    background-image: url(:/images/pagefold.png);
    background-position: top right;
    background-repeat: no-repeat
}

二、QSS实现按钮的图标在文本上方

由于项目中需要实现中英文动态翻译，所以如果切带文本图标的话，就要多切多张英文文本的图标，这样就很麻烦，所以只切图标，文本颜色改变通过 qss 实现，所以要实现按钮的图标在文本上方。

/*** 摄像头按钮 ***/
QPushButton#MeetVideoConf_BtnCamera {
    color: #FFFFFF;
    font-size: 12px;
    border: none;
    background: url(:/Image/Meeting/btn_cameraDis_nor.png) top center no-repeat;
    padding-top: 28px;
}

三、用QSS切分图片

Qt 设计时有时需要实现动态按钮，按钮点击时一个状态，鼠标悬浮时一个状态，离开时一个状态，静止时一个状态。可以用一张 png 长图，使用 QSS 分段截取，分配给每一个状态。

1.调用函数

    SetButtonStyle(ui->flashButton,":/images/button.png",4); // qss切割图片

2.声明函数

// 设置按钮样式：Qss切割图片
void Widget::SetButtonStyle(QPushButton *button, QString imgsrc, int CutSec)
{
    int img_w = QPixmap(imgsrc).width();
    int img_h = QPixmap(imgsrc).height();
    int PicWidth = img_w / CutSec;
    button->setFixedSize(PicWidth, img_h);
    button->setStyleSheet(QString("QPushButton{border-width: 41px; border-image: url(%1)  0 0 0 %2 repeat  repeat;border-width: 0px; border-radius: 0px;}")
      .append("QPushButton::hover{border-image: url(%1) 0 0 0 %3  repeat  repeat;}")
      .append("QPushButton::pressed{border-image: url(%1) 0  0 0 %4 repeat  repeat;}")
      .append("QPushButton::checked{border-image: url(%1) 0  0 0 %4 repeat  repeat;}")
      .append("QPushButton::disabled{border-image: url(%1) 0  0 0 %5 repeat  repeat;}")
      .arg(imgsrc).arg(0).arg(PicWidth*1).arg(PicWidth*2).arg(PicWidth*3));
}

在styleSheet.qss文件中设置也可以。

四、消除在ARM下按钮禁用状态下的重影

在 ARM 板子上，Linuxfb显示插件下，按钮禁用，图标和文本都会模糊，像是有重影一样，可以使用 qss 消除重影：

QPushButton:disabled#MeetVideoConf_BtnCamera {
    color: #eff3fa;
    background: transparent url(:/Image/Meeting/btn_narrow_dis.png) top center no-repeat; /* transparent 消除在arm下禁用状态下的重影 */
}

五、消除按钮按压后的文本下沉效果

按钮按压后的文本会有下沉效果，可以使用 qss 消除：

QPushButton#HelperWidget_BtnVideoDis {
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0px; /* 取消按压后文字下沉效果 */
}