如何使用样式表设置 QToolButton 的图标? [英] How to set the QToolButton's icons using style sheet?

问题描述

我想使用样式表设置 QToolButton 的图标，如下所示:

#include #include QString FormStyleSheetString( const QString & name ){const QString thisItemStyle( "QToolButton:enabled { image: url(" + name + "_normal.png); } ""QToolButton:pressed { image: url(" + name + "_pressed.png); } ""QToolButton:disabled { image: url(" + name + "_disabled.png); } ");返回 thisItemStyle;}int main(int argc, char * argv[]){QApplication qapp(argc,argv);QToolButton 按钮；button.setStyleSheet(FormStyleSheetString("button"));button.setToolButtonStyle(Qt::ToolButtonTextUnderIcon);button.setIconSize(QSize(200,200));button.setText("某事...");button.show();返回 qapp.exec();}

我是这样编译的:

g++ -O3 -std=c++0x -Wall -Wextra -pedantic test.cpp -lQtCore -lQtGui -I/usr/include/Qt/-I/usr/include/QtCore/-I/usr/include/QtGui/

不幸的是，上述方法不起作用(图标未显示).

如果我使用 ，但是一旦设置了文本，答案就不起作用(图标全部被压扁，并且文本不在图标下方).

编辑 1:我也尝试过这个功能(正如 Kamil Klimek 建议的那样):

QString FormStyleSheetString( const QString & name ){const QString thisItemStyle("QToolButton { qproperty-icon: url(" + name + "_normal.png); }; ""QToolButton:pressed { qproperty-icon: url(" + name + "_pressed.png); }; ""QToolButton:hover { qproperty-icon: url(" + name + "_disabled.png); }; ");返回 thisItemStyle;}

但它也没有奏效.按下按钮或悬停不会更改图标.

解决方案

那天晚些时候我设法以某种方式解决了问题，但忘记发布解决方案:

QString FormStyleSheetString( const QString & name ){const QString thisItemStyle("QToolButton {\n"" 边框:无；\n"" 背景: url(" + name + "_normal.png) 顶部中心不重复；\n"" 顶部填充:200 像素；\n"" 宽度:200px;\n"" 字体:粗体 14px;\n"" 颜色:红色；\n""}\n""QToolButton:hover {\n"" 背景: url("+name+"_hover.png) 顶部中心不重复；\n"" 颜色:蓝色；\n""}\n"QToolButton:按下{\n"" 背景: url("+name+"_pressed.png) 顶部中心不重复；\n"" 颜色:灰色；\n}" );返回 thisItemStyle;}

仅仅设置背景是不够的.它还需要固定大小.

I would like to set a QToolButton's icons using style sheets, like this :

#include <QToolButton>
#include <QApplication>

QString FormStyleSheetString( const QString & name )
{
  const QString thisItemStyle( "QToolButton:enabled { image: url(" + name + "_normal.png); }  "
                             "QToolButton:pressed { image: url(" + name + "_pressed.png); }  "
                             "QToolButton:disabled { image: url(" + name + "_disabled.png); }  "
                           );

  return thisItemStyle;
}

int main(int argc, char * argv[])
{
    QApplication qapp(argc,argv);

    QToolButton button;
    button.setStyleSheet( FormStyleSheetString( "button" ) );
    button.setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button.setIconSize(QSize(200,200));
    button.setText("some thing..." );
    button.show();

    return qapp.exec();
}

I compiled it like this :

g++ -O3 -std=c++0x -Wall -Wextra -pedantic test.cpp -lQtCore -lQtGui -I/usr/include/Qt/ -I/usr/include/QtCore/ -I/usr/include/QtGui/

Unfortunately, the above doesn't work (the icon is not shown).

If I use setIcon, then the icon is shown properly.

So, what am I doing wrong? How to set the button's icon using style sheet?

The images I used are :

PS Take a note that I asked similar question here, but the answer doesn't work once the text is set (the icon is all squished, and the text is not below the icon).

EDIT 1: I also tried this function (as Kamil Klimek suggested) :

QString FormStyleSheetString( const QString & name )
{
  const QString thisItemStyle( "QToolButton { qproperty-icon: url(" + name + "_normal.png); };  "
                               "QToolButton:pressed { qproperty-icon: url(" + name + "_pressed.png); };  "
                               "QToolButton:hover { qproperty-icon: url(" + name + "_disabled.png); };  "
                               );

  return thisItemStyle;
}

but it also didn't work. Pressing the button, or hovering, doesn't change the icon.

解决方案

Later that day I managed to somehow solve the problem, but forgot to post the solution :

QString FormStyleSheetString( const QString & name )
{
  const QString thisItemStyle(
  "QToolButton {\n"
                "   border: none;\n"
                "   background: url(" + name + "_normal.png) top center no-repeat;\n"
                "   padding-top: 200px;\n"
                "   width: 200px;\n"
                "   font: bold 14px;\n"
                "   color: red;\n"
                "}\n"
                "QToolButton:hover {\n"
                "   background: url("+name+"_hover.png) top center no-repeat;\n"
                "   color: blue;\n"
                "}\n"
                "QToolButton:pressed {\n"
                "   background: url("+name+"_pressed.png) top center no-repeat;\n"
                "   color: gray;\n}" );

  return thisItemStyle;
}

It wasn't enough just to set the background. It also needed the size fixed.

这篇关于如何使用样式表设置 QToolButton 的图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！