Question

我需要在按钮上添加两个图像！第一个图像必须是默认的，第二个图像在点击时应该是活动的.. 我试过这段代码，但它不能正常工作！

QPushButton{background-image: url(:/images/activity.png);}     
QPushButton:pressed{background-image: url(:/images/activity_active.png);}

任何人都可以帮我解决这个错误吗？

Answer 1

Qt附带的Style Sheet example拥有了解如何完成此操作所需的一切。在Qt SDK文件夹中查找QtSDK\Examples\4.7\widgets\stylesheet。

之类的内容

<强>更新

运行该示例程序时，可以使用File菜单并选择Edit Style...来编辑活动样式表。选择Pagefold样式。回到主屏幕，您会注意到OK和Cancel按钮正在使用多个图像进行向上，向下和悬停状态。

这些状态分别映射到QtSDK\Examples\4.7\widgets\stylesheet\images目录中的图片：pushbutton.png，pushbutton_pressed.png和pushbutton_hover.png。

将这些图像映射到按钮的样式表为QtSDK\Examples\4.7\widgets\stylesheet\pagefold.qss。 Qt不幸的使用.qss作为样式表的文件扩展名的惯例可能让你感到困惑。

在这里，您将找到以下相关选择器：

QPushButton, QComboBox[editable="false"],
QComboBox[editable="true"]::drop-down {
    border-image: url(:/images/pushbutton.png) 5;
    border-width: 5;
}

QPushButton:hover, QComboBox[editable="false"]:hover,
QComboBox[editable="true"]::drop-down:hover, QMenuBar::item:hover {
    border-image: url(:/images/pushbutton_hover.png) 5;
    border-width: 5;
}

QPushButton:pressed, QComboBox[editable="false"]:on,
QComboBox[editable="true"]::drop-down:on, QMenuBar::item:on {
    border-image: url(:/images/pushbutton_pressed.png) 5;
    border-width: 5;
}

使用路径前缀:/引用按钮图像，该前缀对应于存储在Qt资源文件中的图像。图像不必编译成资源。它们也可以通过绝对或相对文件路径来识别。

要让这些样式表生效，需要将它们加载到QString并分配给应用程序对象或目标按钮的父层次结构中的某个窗口小部件。在示例程序中，执行此操作的代码位于loadStyleSheet()方法：

void StyleSheetEditor::loadStyleSheet(const QString &sheetName)
{
    QFile file(":/qss/" + sheetName.toLower() + ".qss");
    file.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(file.readAll());

    ui.styleTextEdit->setPlainText(styleSheet);
    qApp->setStyleSheet(styleSheet);
    ui.applyButton->setEnabled(false);
}

如何使用CSS QT在Pushbutton中添加两个图像？

1 个答案: