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_OBJECTpublic: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绘制，源码在我博客。