在 QSS 中设置 Qt Widget 属性

在 QSS 中设置 Qt Widget 属性

Q_OBJECT

// 添加自定义属性到 Qt动态属性系统 (一般写在 Q_OBJECT 下方)
Q_PROPERTY(QColor colSelectionColor READ colSelectionColor WRITE SetcolSelectionColor)

// QSS 中设置
qproperty-colSelectionColor : rgba(247, 106, 91, 64);

默认样式

QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_PanelButtonTool, &opt, &p, this);

添加以下代码, 使 toolButton 支持 :hover :pressed 状态

QStylePainter p(this);
/* 使组件支持 :hover :pressed 属性 */
QStyleOptionToolButton opt;
opt.init(this);
if (isDown())
    opt.state |= QStyle::State_Sunken;
if (isChecked())
    opt.state |= QStyle::State_On;
if (autoRaise())
    opt.state |= QStyle::State_AutoRaise;
if (!isChecked() && !isDown())
    opt.state |= QStyle::State_Raised;
p.drawComplexControl(QStyle::CC_ToolButton, opt);

QSS 自定义属性与 Qt 类型对应

myWgtClass {
    qproperty-num: 1;        // Q_PROPERTY(int num ...)
    qproperty-str: "test";    // Q_PROPERTY(QString str ...)
    qproperty-mySize: 10px 15px;    // Q_PROPERTY(QSize mySize ...)
    qproperty-myColor: white;    //Q_PROPERTY(QColor myClolr ...)
    qproperty-myBool: true;        //Q_PROPERTY(bool myBool ...)
    qproperty-pixmap: url(:/test/);    //Q_PROPERTY(QPixmap pixmap ...)
}

• 备注:
  
  • 尽量不要使用 QSize. 当样式表值为小数时, 在程序中 QSize对应值为(0, 0). (尽量将 w, h 分为两个属性).

使用枚举

• 定义枚举

  class myWgtClass {
  
  Q_OBJECT
  
  Q_ENUMS(MyEnum)
  Q_PROPERTY(MyEnum type READ type WRITE setType)
  
  public:
      enum MyEnum {
          E_A, E_B
      };
  
      MyEnum type(void) const { return m_type; }
      void setType(MyEnum otherType) { m_type = otherType; }
  private:
      MyEnum m_type;
  };

• CSS 中设置

  myWgtClass {
      qproperty-myEnum: E_A;        //必须使用枚举类型, 不能用其值
  }

使用 QSS 属性选择器

• 注意: 当一个属性值变化时，所引用的样式不会自动更新。相反地，必须手动触发更新才会生效。
  
  • unpolish(): 用于清理之前的样式
  • polish(): 用于添加新的样式

代码实例

应用实例: 窗口的最大化/恢复按钮

• C++逻辑

  void Init(void)
  {
      SetMaxOrRestoreBtnStatus(true);
  }
  void MainWindow::on_maxOrRestoreBtn_clicked()
  {
      if (isMaximized()) {
          showNormal();
          SetMaxOrRestoreBtnStatus(true);
      } else {
          showMaximized();
          SetMaxOrRestoreBtnStatus(false);
      }
  
  //必须手动更新样式 有以下两种方法
  
  #if 0     // 方法1
  
      ui->maxOrRestoreBtn->style()->unpolish(ui->maxOrRestoreBtn);
      ui->maxOrRestoreBtn->style()->polish(ui->maxOrRestoreBtn);
      update();
  
  #else    // 方法2
  
      ui->maxOrRestoreBtn->setStyle(QApplication::style());
  
  #endif
  
  }
  
  void MainWindow::SetMaxOrRestoreBtnStatus(bool isMaxBtnStatus)
  {
      if (isMaxBtnStatus) {   //最大化按钮
          ui->maxOrRestoreBtn->setToolTip(tr("Maximize"));
          ui->maxOrRestoreBtn->setProperty("maxOrRestore", "maximize");
      } else {
          ui->maxOrRestoreBtn->setToolTip(tr("Restore"));
          ui->maxOrRestoreBtn->setProperty("maxOrRestore", "restore");
      }
  }

• QSS 样式表

  
  #maxOrRestoreBtn[maxOrRestore="maximize"] {
  
      background: red;
  }
  
  #maxOrRestoreBtn[maxOrRestore="maximize"]:hover {
  
      background: yellow;
  }
  
  #maxOrRestoreBtn[maxOrRestore="restore"] {
  
      background: blue;
  }