问题

There is a Search field with the magnification-lens and a greyed out "search" keyword at the top right corner of stackoverflow.com web site:

I wonder if it is possible to achieve a same appearance with QLineEdit. If so then how?

回答1:

Simple Way for Dummies

Add a QLineEdit, and set it frameless by QLineEdit::setFrame
Add a QLabel with background color in white (by stylesheet) and a icon
Combine the line edit and the label with a layout, set spacing to 0
Set placeholder text with QLineEdit::setPlaceholderText

Result

Advanced Way

Check this thread: "Can QLineEdit do this?"

And the related python code: http://bazaar.launchpad.net/~henning-schroeder/%2Bjunk/qtwidgets/annotate/head:/qtwidgets/lineedit.py

"How to do - inside in QLineEdit insert the button.[pyqt4]"

Basically customized a QLineEdit by painting a widget(label, button or even combobox) onto it. Then reset the margin, cursor, padding and the paint event. No magics!

回答2:

Here is an alternate simple way:

Set the placeholderText to "🔍" and the font Family to Seqoe UI Symbol or other font that can be found on your target systems that include the U+1F50D LEFT-POINTING MAGNIFYING GLASS glyph.

回答3:

Here's a way to achieve this with stylesheets only:

QLineEdit {
    background: #f3f3f3;
    background-image: url(:Images/search.svg); /* actual size, e.g. 16x16 */
    background-repeat: no-repeat;
    background-position: left;
    color: #252424;
    font-family: SegoeUI;
    font-size: 12px;
    padding: 2 2 2 20; /* left padding (last number) must be more than the icon's width */
}

Here's the result:

It's still not perfect. You don't have much influence over the icon's position.

回答4:

QLineEdit* _lineEdit = new QLineEdit();
_lineEdit->setClearButtonEnabled(true);
_lineEdit->addAction(":/resources/search.ico", QLineEdit::LeadingPosition);
_lineEdit->setPlaceHolderText("Search...");

extracted from: http://saurabhg.com/programming/search-box-using-qlineedit/

回答5:

To have a result like this:

You can subclass the QLineEdit.
So your header should look something like this:

#ifndef LINEEDITICON_H
#define LINEEDITICON_H

#include <QLineEdit>
#include <QIcon>

class LineEditIcon : public QLineEdit
{
    Q_OBJECT

public:
    LineEditIcon(const QIcon icon, QWidget *parent = Q_NULLPTR);
    ~LineEditIcon();
    void setIcon(QIcon icon);    
protected:
    virtual void paintEvent(QPaintEvent *event);    
private:
    QIcon m_icon;       
};

#endif // LINEEDITICON_H

And your source file look like:

#include "lineediticon.h"
#include <QPainter>

LineEditIcon::LineEditIcon(const QIcon icon, QWidget *parent)
    : QLineEdit(parent)
{
    setIcon(icon);
}

LineEditIcon::~LineEditIcon()
{    
}

void LineEditIcon::setIcon(QIcon icon)
{
    m_icon = icon;
    if (m_icon.isNull())
        setTextMargins(1, 1, 1, 1);
    else
        setTextMargins(20, 1, 1, 1);
}

void LineEditIcon::paintEvent(QPaintEvent * event)
{
    QLineEdit::paintEvent(event);
    if (!m_icon.isNull()) {
        QPainter painter(this);
        QPixmap pxm = m_icon.pixmap(height() - 6, height() - 6);
        int x = 2, cx = pxm.width();

        painter.drawPixmap(x, 3, pxm);
        painter.setPen(QColor("lightgrey"));
        painter.drawLine(cx + 2, 3, cx + 2, height() - 4);
    }
}

Edit: A possible solution is to use a custom plugin to use it directly in QtDesigner.

回答6:

QT5 addAction

```

const QIcon passwordIcon(":/new/icons/res/passwd.png");
ui->password->setClearButtonEnabled(true);
ui->password->addAction(passwordIcon, QLineEdit::LeadingPosition);

```

来源：https://stackoverflow.com/questions/27958381/how-to-place-an-icon-onto-a-qlineedit

标签

layout

pyqt

pyqt4

qlineedit

How to place an icon onto a QLineEdit?

问题