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