如何使用Font Awesome在Qt中创建堆叠图标？

QtAwesome的C++版本官方文档确实比较匮乏，但可以通过手动绘制的方式实现堆叠图标效果，核心是利用QPixmap和QPainter将多个图标合并到同一画布中，具体步骤如下：

• 获取需要堆叠的单个图标

  QtAwesome* awesome = QtAwesome::instance();
  // 示例：获取用户图标和红色圆形标记图标
  QIcon baseIcon = awesome->icon(fa::user);
  QIcon badgeIcon = awesome->icon(fa::circle, Qt::red);
  

• 创建透明背景的画布Pixmap

  QSize targetSize(24, 24); // 根据UI需求调整尺寸
  QPixmap stackedPixmap(targetSize);
  stackedPixmap.fill(Qt::transparent);
  

• 绘制堆叠图标，调整位置和尺寸
  以下示例将小尺寸标记图标放在基础图标的右上角：

  QPainter painter(&stackedPixmap);
  // 绘制底层基础图标（居中）
  baseIcon.paint(&painter, stackedPixmap.rect(), Qt::AlignCenter);
  // 绘制上层标记图标（右上角，尺寸为基础图标的1/3）
  QSize badgeSize(targetSize.width()/3, targetSize.height()/3);
  QRect badgeRect(targetSize.width() - badgeSize.width(), 0, badgeSize.width(), badgeSize.height());
  badgeIcon.paint(&painter, badgeRect, Qt::AlignCenter);
  painter.end();
  

• 将生成的Pixmap转为QIcon使用

  QIcon stackedIcon(stackedPixmap);
  // 给控件设置堆叠图标
  ui->targetButton->setIcon(stackedIcon);
  ui->targetButton->setIconSize(targetSize);
  

额外优化建议 #

• 适配高DPI显示：可以结合设备像素比调整Pixmap尺寸，避免图标模糊
• 封装复用函数：如果需要多次创建堆叠图标，可将逻辑封装为工具函数，示例：

  QIcon createStackedQtAwesomeIcon(QtAwesome* awesome, const QString& baseFaCode, const QString& badgeFaCode, 
                                  const QSize& size = QSize(24,24), const QColor& badgeColor = Qt::red) {
      QIcon baseIcon = awesome->icon(baseFaCode);
      QIcon badgeIcon = awesome->icon(badgeFaCode, badgeColor);
      
      QPixmap pixmap(size);
      pixmap.fill(Qt::transparent);
      QPainter painter(&pixmap);
      
      baseIcon.paint(&painter, pixmap.rect(), Qt::AlignCenter);
      QSize badgeSize(size.width()/3, size.height()/3);
      QRect badgeRect(pixmap.width() - badgeSize.width(), 0, badgeSize.width(), badgeSize.height());
      badgeIcon.paint(&painter, badgeRect, Qt::AlignCenter);
      
      painter.end();
      return QIcon(pixmap);
  }
  

内容的提问来源于stack exchange，提问作者Lalit Meena