如何将图标放在 QLineEdit 上？

Question

在 whosebug.com 网站的右上角有一个带有 magnification-lens 和灰色 "search" 关键字的搜索字段：

我想知道是否可以实现与QLineEdit相同的外观。如果是那么怎么办？

Answer 1

傻瓜式简单方法

添加一个QLineEdit，并通过QLineEdit::setFrame
添加一个 QLabel 背景颜色为白色（通过样式表）和一个图标
将行编辑和标签与布局结合起来，设置间距为0
设置占位符文本 QLineEdit::setPlaceholderText

结果

进阶方式

查看此线程："Can QLineEdit do this?"

以及相关的 python 代码：http://bazaar.launchpad.net/~henning-schroeder/%2Bjunk/qtwidgets/annotate/head:/qtwidgets/lineedit.py

或

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

基本上通过在其上绘制小部件（标签、按钮甚至组合框）来自定义 QLineEdit。然后重置 margin、cursor、padding 和 paint 事件。没有魔法！

Answer 2

这是一种仅使用样式表实现此目的的方法：

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 */
}

结果如下：

它仍然不完美。您对图标的位置没有太大影响。

Answer 3

这是另一种简单的方法：

将 placeholderText 设置为“”，将字体系列设置为 Seqoe UI Symbol 或可以在目标系统上找到的其他字体，包括 U+1F50D LEFT-POINTING MAGNIFYING GLASS 字形。

Answer 4

得到这样的结果：

您可以子类化 QLineEdit。
所以你的 header 应该看起来像这样：

#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

你的源文件看起来像：

#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);
    }
}

编辑: 一个可能的解决办法是用一个custom plugin直接在QtDesigner中使用。

Answer 5

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

摘自：http://saurabhg.com/programming/search-box-using-qlineedit/

Answer 6

QT5 添加动作

```

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

```

Answer 7

从 QT 5.2 开始，您可以执行类似的操作。如果你想让它更灵活，你应该使用指针：


QIcon *ico;
ico = new QIcon(":/images/search.ico");
searchEdit->addAction(*ico, QLineEdit::LeadingPosition);

如何将图标放在 QLineEdit 上？

How to place an icon onto a QLineEdit?

layout

qt

pyqt

pyqt4

qlineedit

傻瓜式简单方法

结果

进阶方式