QLineEdit with custom button
Solution 1
The original blog post is gone now, but Trolltech once posted an example of a clear button for Qt 4.
Results
Line edit with no text:
Line edit with some text (button appears):
Line edit full of text (doesn’t go underneath button):
Source
lineedit.h
/****************************************************************************
**
** Copyright (c) 2007 Trolltech ASA <[email protected]>
**
** Use, modification and distribution is allowed without limitation,
** warranty, liability or support of any kind.
**
****************************************************************************/
#ifndef LINEEDIT_H
#define LINEEDIT_H
#include <QLineEdit>
class QToolButton;
class LineEdit : public QLineEdit
{
Q_OBJECT
public:
LineEdit(QWidget *parent = 0);
protected:
void resizeEvent(QResizeEvent *);
private slots:
void updateCloseButton(const QString &text);
private:
QToolButton *clearButton;
};
#endif // LIENEDIT_H
lineedit.cpp
/****************************************************************************
**
** Copyright (c) 2007 Trolltech ASA <[email protected]>
**
** Use, modification and distribution is allowed without limitation,
** warranty, liability or support of any kind.
**
****************************************************************************/
#include "lineedit.h"
#include <QToolButton>
#include <QStyle>
LineEdit::LineEdit(QWidget *parent)
: QLineEdit(parent)
{
clearButton = new QToolButton(this);
QPixmap pixmap("fileclose.png");
clearButton->setIcon(QIcon(pixmap));
clearButton->setIconSize(pixmap.size());
clearButton->setCursor(Qt::ArrowCursor);
clearButton->setStyleSheet("QToolButton { border: none; padding: 0px; }");
clearButton->hide();
connect(clearButton, SIGNAL(clicked()), this, SLOT(clear()));
connect(this, SIGNAL(textChanged(const QString&)), this, SLOT(updateCloseButton(const QString&)));
int frameWidth = style()->pixelMetric(QStyle::PM_DefaultFrameWidth);
setStyleSheet(QString("QLineEdit { padding-right: %1px; } ").arg(clearButton->sizeHint().width() + frameWidth + 1));
QSize msz = minimumSizeHint();
setMinimumSize(qMax(msz.width(), clearButton->sizeHint().height() + frameWidth * 2 + 2),
qMax(msz.height(), clearButton->sizeHint().height() + frameWidth * 2 + 2));
}
void LineEdit::resizeEvent(QResizeEvent *)
{
QSize sz = clearButton->sizeHint();
int frameWidth = style()->pixelMetric(QStyle::PM_DefaultFrameWidth);
clearButton->move(rect().right() - frameWidth - sz.width(),
(rect().bottom() + 1 - sz.height())/2);
}
void LineEdit::updateCloseButton(const QString& text)
{
clearButton->setVisible(!text.isEmpty());
}
Solution 2
As of Qt 5.2 one can use QLineEdit::addAction(...)
to insert custom buttons. (Qt Docs)
Example (assume we're inside the definition of MyClass):
QLineEdit *myLineEdit = new QLineEdit(this);
QAction *myAction = myLineEdit->addAction(QIcon("test.png"), QLineEdit::TrailingPosition);
connect(myAction, &QAction::triggered, this, &MyClass::onActionTriggered);
Solution 3
Once I implemented such solution for this:
// LineEdit.h
#ifndef LINEEDIT_H
#define LINEEDIT_H
#include <QLineEdit>
class QToolButton;
class LineEdit : public QLineEdit
{
Q_OBJECT
public:
LineEdit(QWidget *parent = 0);
protected:
void resizeEvent(QResizeEvent *);
private:
QToolButton *furfurIcon;
};
#endif // LINEEDIT_H
// LineEdit.cpp
#include "lineedit.h"
#include <QToolButton>
#include <QStyle>
LineEdit::LineEdit(QWidget *parent)
: QLineEdit(parent)
{
furfurIcon = new QToolButton(this);
QPixmap pixmap(":/root/your_icon");
furfurIcon->setIcon(QIcon(pixmap));
furfurIcon->setIconSize(pixmap.size());
furfurIcon->setCursor(Qt::ArrowCursor);
furfurIcon->setStyleSheet("QToolButton
"{"
"border: none; padding: 0px;"
"}");
setStyleSheet(QString("QLineEdit"
"{"
"border: 1px solid;"
"border-color: rgb(148, 168, 199);"
"border-radius: 10px;"
"background: white;"
"padding-left: %1px;"
"}").arg(furfurIcon->sizeHint().width() - 4));
setMinimumSize(0, 25);
}
void LineEdit::resizeEvent(QResizeEvent *)
{
QSize sz = furfurIcon->sizeHint();
furfurIcon->move(rect().left(), (rect().bottom() + 1 - sz.height()) / 2);
}
Position of QToolButton is handled in resizeEvent. If there are more than one you'll have to adjust their coordinates. Also you can modify it to use layout. There is no text overlapping here.
ArmanHunanyan
Updated on June 13, 2022Comments
-
ArmanHunanyan almost 2 years
I need to implement
LineEdit
widget with possibility to add tool buttons at the right end of text area. I know two ways of doing that but both solutions seems ugly.1) add tool buttons as child widgets of
QLineEdit
and handleresizeEvent
to position them correctly. The main disadvantage is that if text is enough long it may appear under tool buttons.2) Another solution is to put line edit and buttons inside frame and overwrite style to hide
lineEdits
frame and makeQFrame
look likeQLineEdit
.I need a best way to implement such widget. Also my widget should be style aware.
-
peppe over 9 yearsThis. Also there's convenience for the clear button (
setClearButtonEnabled
). -
Shravan over 8 yearsWhat is the use of these "link-and-run" answers??! The target page's links are all dead and this answer has become useless. Please don't just provide a link; explain the solution too. Links rot.
-
cgmb over 7 years@ThePeacefulCoder Indeed. This is why link-only answers are bad. I pulled the link's content from the wayback machine and added the important parts to the post.
-
Tuhin Mitra about 3 yearsI tried this implementation on PyQt5 and this worked! But the icon size isn't probably scalable!
-
Tuhin Mitra about 3 yearsThis approach worked for me in PyQt5!! Thanks