I am trying to create a QPushButton in my project such that the text shows on top of the custom button image or icon.
I tried the below methods:
imagePath = path;
QPixmap pixmap(imagePath);
QIcon ButtonIcon(pixmap);
button->setIcon(ButtonIcon);
button->setIconSize(pixmap.rect().size());
button->setGeometry(0,0,height,width);
button->setStyleSheet(
"background-color: gray;"
"border: 1px solid black;"
"border-radius: "+QString::number(radius)+"px;"
"color: lightGray; "
"font-size: 25px;"
);
When I try to use the setText here, it shows the icon first and text on its right. I want the text to appear on top of the icon.
I also tried the below method I found online:
imagePath = path;
button->setGeometry(0,0,height,width);
button->setStyleSheet("background-image: url(:/images/images/2adjacentTracksButton.png));"
"background-position: center center");
This one is not accepting my url path, hence is not displaying the image I need on the button.
How can I solve this?
When it comes to manipulate button, you may want to do your own class, which will implement QAbstractButton. Something like this:
class MyButton : public QAbstractButton
{
Q_OBJECT
public:
static MyButton* createButton(QIcon icon, QWidget *parent);
~MyButton();
void setText(QString);
void setIcon(eIcon);
void setOrientation(Qt::Orientation);
protected :
MyButton(QWidget *parent);
// here, you can reimplement event like mousePressEvent or paintEvent
private :
QBoxLayout* m_ButtonLayout;
QLabel* m_IconLabel;
QIcon m_Icon;
QLabel* m_TextLabel;
}
In the .cpp :
MyButton::MyButton(QWidget *parent)
: QAbstractButton(parent)
{
m_ButtonLayout = new QBoxLayout(QBoxLayout::LeftToRight, this);
m_ButtonLayout->setAlignment(Qt::AlignCenter);
m_ButtonLayout->setContentsMargins(0, 0, 0, 0);
m_ButtonLayout->setSpacing(1);
m_IconLabel = new QLabel(this);
m_IconLabel->setAlignment(Qt::AlignCenter);
m_ButtonLayout->addWidget(m_IconLabel);
m_TextLabel = new QLabel(this);
m_TextLabel->setAlignment(Qt::AlignCenter);
m_ButtonLayout->addWidget(m_TextLabel);
//m_TextLabel->hide();
}
MyButton* MyButton::createButton(QIcon icon, QWidget *parent)
{
MyButton* pButton = new MyButton(parent);
pButton->setIcon(icon);
return pButton;
}
void MyButton::setText(QString text)
{
m_TextLabel->setVisible(!text.isEmpty());
m_TextLabel->setText(text);
QAbstractButton::setText(text);
}
void MyButton::setIcon(QIcon icon)
{
m_Icon = icon;
m_IconLabel->setVisible(true);
}
void MyButton::setOrientation(Qt::Orientation orientation)
{
if (orientation == Qt::Horizontal)
m_ButtonLayout->setDirection(QBoxLayout::LeftToRight);
else
m_ButtonLayout->setDirection(QBoxLayout::TopToBottom);
}
And now you can create your button with your icon by calling the static method:
MyButton* button = MyButton::createButton(myButtonIcon, this);
It is just a basic example I gave you, and I am not sure it will work (this is a thing I did some time ago) but you can give it a shot. Hope that helps !
Related
I have a custom widget whose parent is yet another custom widget. I am able to set the background color of the parent custom widget using QPalette and it works fine. But I am unable to set the child custom widget's border color using both QPalette and stylesheet.
This is how I set my parent custom widget's background color:
QPalette pal = parentCustomWidget->palette();
QColor color = {226, 208, 208};
pal.setColor (QPalette::Background, color);
parentCustomWidget->setAutoFillBackground (true);
parentCustomWidget->setPalette (pal);
parentCustomWidget->show();
I referred several SO posts/answers for setting background color to custom widget, but I am unable to set it. This is how I set my childCustomWidget's color:
Approach1:
QPalette pal = childCustomWidget->palette();
QColor color = {204, 231, 47};
pal.setColor (QPalette::Background, color);
childCustomWidget->setAutoFillBackground (true);
childCustomWidget->setPalette (pal);
Approach2:
childCustomWidget->setStyleSheet ("*{border-width:" +
BorderThickness +
";border-style:solid;border-color:" +
hexColorCode + " ;color:white;}");
Note: I have commented out the paintEvent virtual function.
I have gone through this link: How to Change the Background Color of QWidget and have incorporated changes like given but im unable to set color to childCustomWidget.
My custom widgets with the above approaches look like this:
Here orange is the parent's BG color which I am able to set. The grey colored one seems to be the default color for the child widget.
Solution
For Approach2 to work, i.e. for your custom widget to respect the stylesheet, the Qt::WA_StyledBackground attribute should be set to true, as it:
Indicates the widget should be drawn using a styled background.
Example
Here is a minimal example I have prepared for you in order to demonstrate a possible implementation of the suggested solution:
class ParentWidget : public QWidget
{
Q_OBJECT
public:
explicit ParentWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};
class ChildWidget : public QWidget
{
Q_OBJECT
public:
explicit ChildWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0) :
QMainWindow(parent)
{
auto *pWidget = new ParentWidget(this);
auto *l = new QVBoxLayout(pWidget);
auto *cWidget = new ChildWidget(pWidget);
QString BorderThickness("2");
QString hexColorCode("#FF00FF");
l->addWidget(cWidget);
l->setContentsMargins(25, 25, 25, 25);
QPalette pal(pWidget->palette());
QColor color(226, 208, 208);
pal.setColor (QPalette::Background, color);
pWidget->setAutoFillBackground (true);
pWidget->setPalette (pal);
cWidget->setAttribute(Qt::WA_StyledBackground, true);
cWidget->setStyleSheet("ChildWidget { border: " + BorderThickness + " solid " +
hexColorCode + ";"
"background-color: rgb(204, 231, 47);"
"color: white; }");
setCentralWidget(pWidget);
resize (400, 400);
}
};
Result
As it is written, this example produces the following result:
Qt docs about palette: Warning: Do not use this function in conjunction with Qt Style Sheets. When using style sheets, the palette of a widget can be customized using the "color", "background-color", "selection-color", "selection-background-color" and "alternate-background-color".
http://doc.qt.io/qt-5/qwidget.html#palette-prop
Qt docs about autoFillBackground: Warning: Use this property with caution in conjunction with Qt Style Sheets. When a widget has a style sheet with a valid background or a border-image, this property is automatically disabled.
http://doc.qt.io/qt-5/qwidget.html#autoFillBackground-prop
I'm working on a Qt application (in C++). Without appyling any styles, my menu looks like this:
I'd like it to look like this:
How do I achieve this? Either using qss, or programmatically?
I already tried this, without success:
menu->addAction(tr("Add"), this, SLOT(CreateNewWaypoint()))->setIconVisibleInMenu(false);
Answers for both Qt4.8 and Qt5 are needed to get the full bounty!
One way to solve the problem is to use QProxyStyle:
customstyle.h
#ifndef CUSTOMSTYLE_H
#define CUSTOMSTYLE_H
#include <QProxyStyle>
#include <QStyleOptionMenuItem>
class CustomStyle : public QProxyStyle{
public:
using QProxyStyle::QProxyStyle;
void drawControl(ControlElement element, const QStyleOption *opt, QPainter *p, const QWidget *w) const override
{
if(element == QStyle::CE_MenuItem){
QStyleOptionMenuItem myMenuOption;
const QStyleOptionMenuItem *menuOption =
qstyleoption_cast<const QStyleOptionMenuItem *>(opt);
if (menuOption) {
const int width = pixelMetric(PM_SmallIconSize)+6;
myMenuOption = *menuOption;
QRect r(myMenuOption.rect);
r.setLeft(-width);
myMenuOption.rect = r;
}
QProxyStyle::drawControl(element, &myMenuOption, p, w);
return;
}
QProxyStyle::drawControl(element, opt, p, w);
}
};
#endif // CUSTOMSTYLE_H
then you install it in the QApplication:
QApplication a(argc, argv);
QApplication::setStyle(new CustomStyle);
You can influence on how your menu appears by playing with its style sheet. With you example code you can do the following:
menu.setStyleSheet("QMenu::item {"
"padding: 2px 5px 2px 2px;"
"}"
"QMenu::item:selected {"
"background-color: rgb(0, 85, 127);"
"color: rgb(255, 255, 255);"
"}");
Note the padding property, which sets the offsets of your menu item rectangles.
I wanted to get rid of the icons in the standard context menu for a QPlainTextEdit.
Just using setIconVisibleInMenu(false) for all the actions in the QMenu still left the icon space as shown in the question.
I was only able to get rid of the icon space when I set the icon for the menu actions to a null icon.
Full example:
void CustomPlainTextEdit::contextMenuEvent(QContextMenuEvent *event)
{
QMenu *menu = createStandardContextMenu();
foreach (QAction *action, menu->actions()) {
action->setIcon(QIcon());
}
menu->exec(event->globalPos());
delete menu;
}
I want to choose the color from the dropdown and based on that color I want to draw a rectangle on the window.
I can draw a rectangle with predefined color but not sure how can I pass the color from the combobox.
and Only one rectangle is drawn on the window, I want to draw multiple rectangles on the window.
So the procedure works like this. User will click the push button --> combobox appears ---> choose the color --> click OK and rectangle of that color will appear on the window.
Dialog.cpp
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
ui(new Ui::Dialog)
{
ui->setupUi(this);
}
Dialog::~Dialog()
{
delete ui;
}
class CustomDialog : public QDialog
{
public:
CustomDialog(const QStringList& items)
{
setLayout(new QHBoxLayout());
box = new QComboBox;
box->addItems(items);
layout()->addWidget(box);
connect(box, SIGNAL(currentIndexChanged(const QString&)), this, SLOT(colorSelected(const QString&)));
QPushButton* ok = new QPushButton("ok");
layout()->addWidget(ok);
connect(ok, &QPushButton::clicked, this, [this]()
{
accept();
});
}
QComboBox* combobox() { return box; }
private:
QComboBox* box;
};
void Dialog::on_pushButton_clicked()
{
QStringList itemList({"Red", "Blue", "Green"});
CustomDialog dialog(itemList);
// connect(box, SIGNAL(currentIndexChanged(const QString&)), this, SLOT(colorSelected(const QString&)));
if (dialog.exec() == QDialog::Accepted)
{
scene = new QGraphicsScene(this);
ui->graphicsView->setScene(scene);
QBrush redBrush(Qt::red);
QBrush blackBrush(Qt::black);
QPen blackpen(Qt::black);
blackpen.setWidth(3);
rectangle = scene->addRect(10,10,100,100,blackpen,redBrush);
rectangle->setFlag(QGraphicsItem::ItemIsMovable);
}
}
void Dialog::colorSelected(const QString& text)
{
const QColor selected = colorMap[text];
}
The previous post doesnt solve my question.
In addition to the above, I'd suggest using the item data to hold the color definitions. Look at:
QComboBox::setItemData
QComboBox::itemData
QComboBox::currentData
Each item in a combo box has two components; there's the text that's displayed, and then there's a related QVariant, which is the item data. The QVariant can hold your color definition so that you don't have to store them separately. In reality, it's more than two because you could define as many user roles as you want, which would allow you to store even more data elements per combobox item. For your purposes, however, the default UserRole is sufficient.
Your colorSelected definition would be:
void Dialog::colorSelected (const QString &text)
{
const QColor selected = box->currentData().value <QColor> ();
// do what you need with the color
}
If you are not interested in a color picker and you want your own solution with aQComboBox you can predefine your own set of colors you want to use.
You can declare a map, for instance QMap<QString, QColor> colors; which would hold the color value under a key which describes it with a string.
Then you should define the desired values. For example:
colors =
{
{"Red", QColor(255, 0, 0)},
{"Green", QColor(0, 255, 0)},
{"Blue", QColor(0, 0, 255)},
};
You can easily use this map to fill the contents of your QComboBox. That's quick as writing:
box->addItems(colors.keys());
Next action depends on when you need to know the color value. If you want to know it right after user selects it you would need to make a proper connect. For example:
connect(box, SIGNAL(currentIndexChanged(const QString&)), this, SLOT(colorSelected(const QString&)));
Where colorSelected would be the slot where you handle the selected color value:
void Dialog::colorSelected(const QString& text)
{
const QColor selected = colors[text];
// do what you need with the color
}
With the following code I tried to render a red push button using QStyle.drawControl():
#include <QtCore/QtCore>
#include <QtGui/QtGui>
class Widget : public QWidget
{
virtual void paintEvent(QPaintEvent* event)
{
QStyleOptionButton opt;
opt.palette = QPalette(Qt::red);
opt.state = QStyle::State_Active | QStyle::State_Enabled;
opt.rect = QRect(50, 25, 100, 50);
QPainter painter(this);
style()->drawControl(QStyle::CE_PushButton, &opt, &painter);
}
};
int main(int argc, char** argv)
{
QApplication app(argc, argv);
Widget w;
w.resize(200, 100);
w.show();
return app.exec();
}
However I get the following result:
How do I render a red push button using QStyle.drawControl()?
I'm using Qt 4.8.1 and Visal Studio 2010 on Windows XP.
The buttons are drawn by the native style engine, so the palette might not be used at all (see that question from the FAQ).
You can use an actual button with a stylesheet that you pass as the last parameter to the own button's style drawControl function.
class Widget : public QWidget
{
// To allow the automatic deletion without parenting it
QScopedPointer<QPushButton> button;
public:
Widget() : button(new QPushButton) {
button->setStyleSheet("background-color: red");
}
virtual void paintEvent(QPaintEvent* event)
{
QStyleOptionButton opt;
opt.state = QStyle::State_Active | QStyle::State_Enabled;
opt.rect = QRect(50, 25, 100, 50);
QPainter painter(this);
button->style()->drawControl(QStyle::CE_PushButton, &opt, &painter,
button.data());
}
};
But you will loose the native style, so you'll have to fake it (bali182's answer might be useful for that part).
Or you can use the same button with colorize effect and call its render() function to paint it:
class Widget : public QWidget {
QScopedPointer<QPushButton> button;
public:
Widget() : button(new QPushButton) {
QGraphicsColorizeEffect *effect = new QGraphicsColorizeEffect(button.data());
effect->setColor(Qt::red);
button->setGraphicsEffect(effect);
}
virtual void paintEvent(QPaintEvent* event) {
button->setFixedSize(100, 50);
button->render(this, QPoint(50, 25));
}
};
What you are trying to do, seems overly complicated. If you just want a red button, why not use the setStyleSheet() method of the QPushButton? It takes a QString, and you can define your button similar to CSS. Here i created you a red button, similar to the XP ui buttons:
QPushButton
{
background: qlineargradient(x1:0,y1:0,x2:0,y2:1, stop:0 #f4a3a3,stop: 1 #cc1212);
border-width: 1px;
border-color: #d91414;
border-style: solid;
padding: 5px;
padding-left:10px;
padding-right:10px;
border-radius: 3px;
color:#000;
}
QPushButton:hover
{
border-color: #e36666;
}
QPushButton:pressed
{
background:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop: 0 #de8383, stop: 1 #ad0C0C);
border-color: #d91414;
}
Now you just need to pass the code above as a string to your buttons setStyleSheet() method. If you want to create a button widget, what is red by default, then extend the QPushButton class, create a static QString field with the content above, and set the button as stylesheet in the constructor.
More easy to understand examples on stylesheets:
Stylesheet Examples
I need to display a button on top of an image. Something similar to
The background is a QPixmap/QImage and the button is a QPushbutton. I need to be able to dynamically change the image - so I am not sure if a stylesheet would be suitable for the task. I tried this, but could not get it to work.
Any solutions?
Subclass QWidget and implement paintEent where you can paint your image at the background. Set and change background image by stylesheet also possible.
Add layout with button to this widget.
There are something like this:
class WidgetWithButton
: public QWidget
{
Q_OBJECT
QImage m_bgImage;
public:
WidgetWithButton(QWidget* aParent)
: QWidget(aParent)
{
QHBoxLayout* l = new QHBoxLayout(this);
QPushButton* myButton = new QPushButton(tr("Close"));
l->addWidget( myButton, 0, Qt::AlignCenter );
}
void setImage(const QImage& aImage)
{
m_image = aImage;
update();
}
protected:
virtual void paintEvent(QPaintEvent* aPainEvent)
{
if (m_image.isValid())
{
QPainter painter(this);
painter.drawImage(rect(), m_image);
}
else
QWidget::paintEvent(aPainEvent);
}
};