当前位置：首页 > article >正文

Qt的QToolButton样式设置

article 2025/2/22 5:02:12

概要

以下是关于 QToolButton 的样式设置方法及示例，通过 Qt 样式表（QSS）实现多种视觉效果：

1. 基本样式

设置按钮的默认背景、边框和文字颜色：

QToolButton {
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 5px;
    color: #333333;
}

2. 状态样式

设置不同交互状态下的样式（悬停、按下、禁用）：

/* 悬停 */
QToolButton:hover {
    background-color: #e0e0e0;
    border-color: #999999;
}

/* 按下 */
QToolButton:pressed {
    background-color: #d0d0d0;
}

/* 禁用 */
QToolButton:disabled {
    background-color: #f8f8f8;
    color: #a0a0a0;
}

3. 图标与文本布局

调整图标和文本的位置关系：

/* 图标在文本上方 */
QToolButton {
    qproperty-iconSize: 24px;  /* 图标大小 */
    qproperty-toolButtonStyle: ToolButtonTextUnderIcon;  /* 文本在图标下方 */
}

/* 仅显示图标 */
QToolButton {
    qproperty-toolButtonStyle: ToolButtonIconOnly;
}

4. 特殊按钮样式

带下拉菜单的按钮

设置下拉箭头样式：

QToolButton::menu-indicator {
    image: url(:/icons/down_arrow.png);  /* 自定义下拉箭头图标 */
    subcontrol-position: right center;  /* 箭头位置 */
    width: 16px;
    height: 16px;
}

扁平化风格

移除边框和背景：

QToolButton {
    background: transparent;
    border: none;
    padding: 0;
}

5. 动态效果

添加渐变或阴影：

QToolButton {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                stop:0 #ffffff, stop:1 #e0e0e0);
    border: 1px solid #cccccc;
    border-radius: 4px;
}

QToolButton:hover {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                stop:0 #f0f0f0, stop:1 #d0d0d0);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

6. 单独设置某个按钮

通过 objectName 为特定按钮定制样式：

// 代码中设置对象名
toolButton->setObjectName("specialButton");

/* 单独设置样式 */
#specialButton {
    background-color: #ffd700;
    border: 2px solid #ffa500;
}

#specialButton:hover {
    background-color: #ffeb3b;
}

完整示例

QToolButton *toolButton = new QToolButton;
toolButton->setText("按钮");
toolButton->setIcon(QIcon(":/icons/icon.png"));
toolButton->setObjectName("myButton");

// 应用样式表
toolButton->setStyleSheet(R"(
    #myButton {
        background-color: #4CAF50;
        border: 2px solid #388E3C;
        border-radius: 8px;
        color: white;
        padding: 8px 16px;
    }
    #myButton:hover {
        background-color: #66BB6A;
        border-color: #4CAF50;
    }
    #myButton:pressed {
        background-color: #388E3C;
    }
)");