You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将QMenu中的QAction转换为QWidget?并通过QSS设置其图标

Using QSS to Add Icons to QActions in QMenu

First off, you’re right that QAction can’t be styled directly with QSS—it’s not a QWidget, so it doesn’t have style sheet properties attached. But the good news is that QMenu renders each QAction using an internal widget (usually QMenuItem), and we can target that widget via QSS to simulate an icon for your action.

Here’s how to do it step by step:

To make sure we target exactly the right action, set an objectName on your QAction in code:

QMenu* menu = new QMenu();
QAction* newFile = new QAction;
newFile->setText("New File");
newFile->setObjectName("newFileAction"); // Add this line to identify the action
menu->addAction(newFile);

2. Write the QSS to add the icon

Use the QMenu::item selector, combined with your action’s objectName (or text) to apply the background image (your icon) and adjust padding so the text doesn’t overlap the icon:

/* Target the specific menu item for your "New File" action */
QMenu::item#newFileAction {
    background-image: url("path/to/your/icon.png"); /* Replace with your icon's path */
    background-repeat: no-repeat;
    background-position: left center; /* Align icon to left, vertical center */
    padding-left: 22px; /* Adjust based on your icon size—leave space between icon and text */
}

/* Optional: Customize hover state */
QMenu::item#newFileAction:hover {
    background-image: url("path/to/your/hover-icon.png"); /* Swap icon when hovering */
}

Alternative: Target by action text (no objectName needed)

If you prefer not to set an objectName, you can target the action directly by its text using attribute selectors:

QMenu::item[text="New File"] {
    background-image: url("path/to/your/icon.png");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 22px;
}

Key Notes:

  • Path correctness: Use absolute paths, or Qt resource paths (like :/icons/newfile.png if you’re using the Qt Resource System) to ensure the icon loads reliably.
  • Padding tweaks: Adjust padding-left to match your icon’s width—this ensures the text sits neatly to the right of the icon without overlapping.
  • Visual consistency: This method mimics native QAction icon behavior by styling the menu’s internal widget, so the end result will look identical to setting the icon via newFile->setIcon() in code.

内容的提问来源于stack exchange,提问作者Rubina

火山引擎 最新活动