Qt自定义外观详解

已于 2025-07-01 11:25:17 修改
阅读量1k 收藏 28
点赞数 30
CC 4.0 BY-SA版权
分类专栏： QT开发技术 文章标签： qt 数据库 开发语言
于 2025-07-01 10:22:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15181569/article/details/149039345

Qt自定义外观计数详解

一、Qt自定义外观计数概述

在某些情况下，我们可能需要修改Qt内置窗口部件的外观。可能只希望做一些美学优化，或者实现一种全新的风格，为应用程序提供统一且与众不同的外观。Qt提供了三种主要方法来自定义窗口部件外观：

  • 子类化个别窗口部件类：重新实现绘制和鼠标事件处理器
  • 子类化QStyle或预定义风格：如QWindowsStyle
  • 使用Qt样式表（Qt 4.2+）：类似HTML CSS的机制
  • QPainter自定义绘制

二、方式一：子类化QStyle

1、子类化QStyle的方法

子类化QStyle是Qt中自定义控件外观的常用方法，通过继承QStyle类并重写相关函数，可以实现完全个性化的UI风格。以下是具体实现步骤：

创建子类
继承QStyle或现有子类（如QCommonStyle），声明需要重写的虚函数：

class CustomStyle : public QCommonStyle {
    Q_OBJECT
public:
    void drawControl(ControlElement element, 
                    const QStyleOption* option,
                    QPainter* painter,
                    const QWidget* widget) const override;
    
    void drawPrimitive(PrimitiveElement element,
                      const QStyleOption* option,
                      QPainter* painter,
                      const QWidget* widget) const override;
};

实现绘图函数
在drawControl和drawPrimitive中实现自定义绘制逻辑：

void CustomStyle::drawControl(ControlElement element, 
                            const QStyleOption* option,
                            QPainter* painter,
                            const QWidget* widget) const {
    switch(element) {
        case CE_PushButton:
            // 自定义按钮绘制
            break;
        default:
            QCommonStyle::drawControl(element, option, painter, widget);
    }
}

处理样式选项
通过QStyleOption获取控件状态信息：

if (const QStyleOptionButton* btnOption = qstyleoption_cast<const QStyleOptionButton*>(option)) {
    bool isPressed = btnOption->state & State_Sunken;
    bool isEnabled = btnOption->state & State_Enabled;
}

应用自定义样式
在应用程序中设置全局样式：

QApplication::setStyle(new CustomStyle);

2、关键函数重写建议

polish与unpolish
用于初始化/清理样式相关属性：

void polish(QWidget* widget) override;
void unpolish(QWidget* widget) override;

尺寸计算
重写sizeFromContents获取控件建议尺寸：

QSize sizeFromContents(ContentsType type,
                      const QStyleOption* option,
                      const QSize& size,
                      const QWidget* widget) const override;

样式提示
通过styleHint提供行为定制：

int styleHint(StyleHint hint,
             const QStyleOption* option,
             const QWidget* widget,
             QStyleHintReturn* returnData) const override;

3、高级技巧

像素精确控制
使用像素度量函数确保DPI适配：

int pixelMetric(PixelMetric metric,
               const QStyleOption* option,
               const QWidget* widget) const override;

复杂元素绘制
对组合控件使用drawComplexControl：

void drawComplexControl(ComplexControl control,
                       const QStyleOptionComplex* option,
                       QPainter* painter,
                       const QWidget* widget) const override;

样式表集成
在子类中兼容QSS样式表：

QIcon standardIcon(StandardPixmap standardIcon,
                  const QStyleOption* option,
                  const QWidget* widget) const override;

性能优化
缓存频繁使用的资源（如QPixmap），避免重复创建。使用QStyleOptionViewItem等派生类访问特定控件数据时，优先使用qstyleoption_cast进行安全转换。

4、示例：Bronze风格

// bronze_style.h
#include <QWindowsStyle>

class BronzeStyle :public QWindowsStyle
{
    Q_OBJECT
    
public:
    BronzeStyle() {}
    
    void polish(QPalette &palette) override;
    void polish(QWidget *widget) override;
    void unpolish(QWidget *widget) override;
    int styleHint(StyleHint which, const QStyleOption *option,
                  const QWidget *widget = nullptr,
                  QStyleHintReturn *returnData = nullptr) const override;
    int pixelMetric(PixelMetric which, const QStyleOption *option,
                    const QWidget *widget = nullptr) const override;
    void drawPrimitive(PrimitiveElement which,
                       const QStyleOption *option, QPainter *painter,
                       const QWidget *widget = nullptr) const override;
    void drawComplexControl(ComplexControl which,
                            const QStyleOptionComplex *option,
                            QPainter *painter,
                            const QWidget *widget = nullptr) const override;
    QRect subControlRect(ComplexControl whichControl,
                         const QStyleOptionComplex *option,
                         SubControl whichSubControl,
                         const QWidget *widget = nullptr) const override;
    
private:
    static void setTexture(QPalette &palette, QPalette::ColorRole role,
                           const QPixmap &pixmap);
    static QPainterPath roundRectPath(const QRect &rect);
};

// bronze_style.cpp
#include "bronze_style.h"
#include <QPainter>
#include <QPushButton>
#include <QPainterPath>

void BronzeStyle::polish(QPalette &palette)
{
    QPixmap backgroundImage(":/images/background.png");
    setTexture(palette, QPalette::Window, backgroundImage);
    
    QColor bronze(207, 155, 95);
    QColor veryLightBlue(239, 239, 247);
    QColor lightBlue(223, 223, 239);
    QColor darkBlue(95, 95, 191);
    
    palette.setColor(QPalette::Window, bronze);
    palette.setColor(QPalette::WindowText, Qt::black);
    palette.setColor(QPalette::Disabled, QPalette::WindowText, Qt::darkGray);
    palette.setColor(QPalette::Base, veryLightBlue);
    palette.setColor(QPalette::AlternateBase, lightBlue);
    palette.setColor(QPalette::ToolTipBase, Qt::white);
    palette.setColor(QPalette::Text, Qt::black);
    palette.setColor(QPalette::Disabled, QPalette::Text, Qt::darkGray);
    palette.setColor(QPalette::Button, bronze);
    palette.setColor(QPalette::ButtonText, Qt::black);
    palette.setColor(QPalette::Disabled, QPalette::ButtonText, Qt::darkGray);
    palette.setColor(QPalette::BrightText, Qt::white);
    palette.setColor(QPalette::Link, darkBlue);
    palette.setColor(QPalette::Highlight, darkBlue);
    palette.setColor(QPalette::Disabled, QPalette::Highlight, Qt::darkGray);
    palette.setColor(QPalette::HighlightedText, Qt::white);
    palette.setColor(QPalette::Disabled, QPalette::HighlightedText, Qt::lightGray);
}

void BronzeStyle::polish(QWidget *widget)
{
    if (qobject_cast<QPushButton *>(widget))
        widget->setAttribute(Qt::WA_Hover, true);
}

void BronzeStyle::unpolish(QWidget *widget)
{
    if (qobject_cast<QPushButton *>(widget))
        widget->setAttribute(Qt::WA_Hover, false);
}

int BronzeStyle::styleHint(StyleHint which, const QStyleOption *option,
                           const QWidget *widget,
                           QStyleHintReturn *returnData) const
{
    switch (which) {
    case SH_DialogButtonBox_ButtonsHaveIcons:
        return1;
    case SH_EtchDisabledText:
        return1;
    case SH_DialogButtonLayout:
        return QDialogButtonBox::MacLayout;
    default:
        return QWindowsStyle::styleHint(which, option, widget, returnData);
    }
}

int BronzeStyle::pixelMetric(PixelMetric which,
                             const QStyleOption *option,
                             const QWidget *widget) const
{
    switch (which) {
    case PM_ButtonDefaultIndicator:
        return0;
    case PM_IndicatorWidth:
    case PM_IndicatorHeight:
        return16;
    case PM_CheckBoxLabelSpacing:
        return8;
    case PM_DefaultFrameWidth:
        return2;
    default:
        return QWindowsStyle::pixelMetric(which, option, widget);
    }
}

void BronzeStyle::drawPrimitive(PrimitiveElement which,
                                const QStyleOption *option,
                                QPainter *painter,
                                const QWidget *widget) const
{
    switch (which) {
    case PE_IndicatorCheckBox:
        drawBronzeCheckBoxIndicator(option, painter);
        break;
    case PE_PanelButtonCommand:
        drawBronzeBevel(option, painter);
        break;
    case PE_Frame:
        drawBronzeFrame(option, painter);
        break;
    default:
        QWindowsStyle::drawPrimitive(which, option, painter, widget);
    }
}

void BronzeStyle::drawComplexControl(ComplexControl which,
                                     const QStyleOptionComplex *option,
                                     QPainter *painter,
                                     const QWidget *widget) const
{
    if (which == CC_SpinBox) {
        drawBronzeSpinBoxButton(SC_SpinBoxUp, option, painter);
        drawBronzeSpinBoxButton(SC_SpinBoxDown, option, painter);
        drawBronzeSpinBoxFrame(option, painter);
    } else {
        QWindowsStyle::drawComplexControl(which, option, painter, widget);
    }
}

QRect BronzeStyle::subControlRect(ComplexControl whichControl,
                                   const QStyleOptionComplex *option,
                                   SubControl whichSubControl,
                                   const QWidget *widget) const
{
    if (whichControl == CC_SpinBox) {
        QRect rect = option->rect;
        int frameWidth = pixelMetric(PM_DefaultFrameWidth, option, widget);
        
        if (whichSubControl == SC_SpinBoxFrame) {
            return rect;
        } elseif (whichSubControl == SC_SpinBoxUp) {
            int buttonHeight = rect.height() / 2;
            return QRect(rect.right() - 20, rect.top(),
                         20, buttonHeight).adjusted(-frameWidth, frameWidth, 0, 0);
        } elseif (whichSubControl == SC_SpinBoxDown) {
            int buttonHeight = rect.height() / 2;
            return QRect(rect.right() - 20, rect.top() + buttonHeight,
                         20, buttonHeight).adjusted(-frameWidth, 0, 0, -frameWidth);
        } else {
            return QRect();
        }
    } else {
        return QWindowsStyle::subControlRect(whichControl, option,
                                             whichSubControl, widget);
    }
}

void BronzeStyle::setTexture(QPalette &palette, QPalette::ColorRole role,
                              const QPixmap &pixmap)
{
    for (int i = 0; i < QPalette::NColorGroups; ++i) {
        QColor color = palette.brush(QPalette::ColorGroup(i), role).color();
        palette.setBrush(QPalette::ColorGroup(i), role,
                          QBrush(color, pixmap));
    }
}

QPainterPath BronzeStyle::roundRectPath(const QRect &rect)
{
    int radius = qMin(rect.width(), rect.height()) / 2;
    int diam = 2 * radius;
    
    int x1, y1, x2, y2;
    rect.getCoords(&x1, &y1, &x2, &y2);
    
    QPainterPath path;
    path.moveTo(x2, y1 + radius);
    path.arcTo(QRect(x2 - diam, y1, diam, diam), 0.0, 90.0);
    path.lineTo(x1 + radius, y1);
    path.arcTo(QRect(x1, y1, diam, diam), 90.0, 90.0);
    path.lineTo(x1, y2 - radius);
    path.arcTo(QRect(x1, y2 - diam, diam, diam), 180.0, 90.0);
    path.lineTo(x1 + radius, y2);
    path.arcTo(QRect(x2 - diam, y2 - diam, diam, diam), 270.0, 90.0);
    path.closeSubpath();
    return path;
}

三、方式二：使用样式表

1、QT样式表基础概念

QT样式表（QSS）是基于CSS语法的一种机制，用于自定义QT应用程序的外观。通过样式表，可以修改控件颜色、字体、边框、背景等属性，实现界面个性化。

2、QT样式表语法结构

样式表由选择器和声明块组成，选择器指定目标控件，声明块包含属性-值对：

QPushButton {  
    color: red;  
    background-color: white;  
}
  • 选择器类型：
    • 类选择器（如QPushButton）
    • ID选择器（如#btnSubmit）
    • 子控件选择器（如QComboBox::drop-down）
    • 伪状态选择器（如QPushButton:hover）

3、常用样式属性

  • 颜色与背景：
    color: #FF0000;  /* 文本颜色 */  
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop:1 blue);
  • 边框与圆角：
    border: 2px solid gray;  
border-radius: 10px;
  • 字体与对齐：
    font-family: "Arial";  
font-size: 14px;  
text-align: center;

4、子控件与伪状态

  • 子控件：
    QSpinBox::up-button { width: 30px; }
  • 伪状态：
    QPushButton:hover { background-color: yellow; }  
QCheckBox:checked { color: green; }

5、动态加载样式表

通过代码动态加载样式表：

// 单个控件  
button->setStyleSheet("QPushButton { color: red; }");  

// 全局应用  
qApp->setStyleSheet("QWidget { font-size: 12px; }");

6、样式表优先级规则

  • 直接设置的样式表优先级最高。
  • 父控件样式可能被子控件继承。
  • 使用!important强制覆盖：
    QLabel { color: black !important; }

7、调试技巧

  • 使用Qt Designer实时预览样式效果。
  • 检查未生效的样式是否因选择器冲突或属性不支持。
  • 避免过度使用全局样式，防止性能下降。

8、高级应用示例

/* 自定义QProgressBar */  
QProgressBar {  
    border: 2px solid grey;  
    border-radius: 5px;  
    text-align: center;  
}  

QProgressBar::chunk {  
    background-color: #05B8CC;  
    width: 10px;  /* 块状进度条 */  
}

四、方式三：QPainter绘制

1、QPainter 基本介绍

QPainter 是 Qt 框架中用于二维图形绘制的核心类，支持在多种绘图设备（如 QWidget、QPixmap、QImage）上绘制图形、文本和图像。它提供了一系列高级绘图功能，包括坐标变换、抗锯齿、混合模式等，适用于 UI 绘制、图表生成和自定义控件开发。

2、主要功能

  1. 基本图形绘制

    • 绘制点、线、矩形、椭圆、多边形等几何图形。
    • 填充图形颜色或渐变（QBrush）。
    • 设置画笔样式（QPen）控制线条宽度、颜色和虚线样式。

  2. 文本绘制

    • 支持字体设置（QFont）、文本对齐和多行文本渲染。
    • 可通过 drawText() 在指定位置绘制文本。

  3. 图像操作

    • 绘制 QImage 或 QPixmap（drawImage()/drawPixmap()）。
    • 支持图像缩放、旋转和裁剪。

  4. 坐标变换

    • 平移、旋转、缩放和剪切（translate()、rotate()、scale()）。
    • 通过 save() 和 restore() 管理变换状态栈。

  5. 高级特性

    • 抗锯齿（setRenderHint(QPainter::Antialiasing)）。
    • 混合模式（setCompositionMode()）。
    • 路径绘制（QPainterPath 组合复杂形状）。

3、基本用法示例

以下代码展示了在 QWidget 的 paintEvent 中使用 QPainter 绘制一个带边框的椭圆和文本：

void MyWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);

    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing);

    // 绘制椭圆（填充红色，边框蓝色）
    painter.setBrush(Qt::red);
    painter.setPen(QPen(Qt::blue, 2));
    painter.drawEllipse(50, 50, 100, 60);

    // 绘制文本
    painter.setFont(QFont("Arial", 12));
    painter.drawText(50, 150, "Hello, QPainter!");
}

4、常见应用场景

  1. 自定义控件

    • 重写 paintEvent() 实现个性化外观（如圆形按钮、进度条）。

  2. 图表绘制

    • 结合数据动态绘制折线图、柱状图等。

  3. 图像处理

    • 修改 QImage 像素数据后通过 QPainter 渲染。

  4. 打印和 PDF 生成

    • 使用 QPrinter 作为绘图设备，输出到打印机或文件。

5、注意事项

  • 性能优化

    • 避免在频繁调用的函数（如 mouseMoveEvent）中创建 QPainter 对象。
    • 对静态内容使用 QPixmap 缓存（QPixmap::grabWidget()）。

  • 坐标系

    • 默认坐标系原点在左上角，Y轴向下为正方向。可通过变换调整。

  • 资源管理

    • 确保 QPainter 在绘图设备（如 QWidget）有效时使用，否则可能导致崩溃。

五、总结

  • 样式表：适合快速、简单的自定义，无需编程知识，但控制有限
  • QStyle子类：提供完全控制，适合复杂自定义，但需要更多工作
  • QPainter：在高性能或实时性要求较高的场景下（如游戏或复杂动画），QPainter的渲染效率可能不如专门的图形API（如OpenGL或Vulkan）。
  • 混合使用：可以同时使用两种方法，样式表覆盖QStyle的部分设置

选择哪种方法取决于项目需求和开发者的偏好。对于大多数情况，样式表已经足够；对于需要完全控制或创建全新视觉风格的情况，QStyle子类更合适。

六、实例展示

在这里插入图片描述

background-color: rgb(85, 170, 0);
border: 2px solid;  /* 设置边框为 2px 黑色实线 */
border-radius: 15px;         /* 设置边框圆角 */

两个表位QPainter绘制，源码在我博客。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小灰灰搞电子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值