【问题标题】：How to place an icon onto a QLineEdit?如何将图标放在 QLineEdit 上？
【发布时间】：2015-03-13 13:09:11
【问题描述】：

在 stackoverflow.com 网站的右上角有一个带有放大镜和灰色“搜索”关键字的搜索字段：

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

【问题讨论】：

有几种方法可以做到这一点，但一种我认为可行的简单方法是在QFrame 中添加QLabel 和QLineEdit，从QLineEdit 并使其背景透明。然后为标签设置一个像素图。然后，您只需为 QFrame 对象设置框架样式和背景颜色。应该足够简单。
How to do - inside in QlineEdit insert the button.[pyqt4] 的可能重复项

【解决方案1】：

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


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

【讨论】：

【解决方案2】：

要得到这样的结果：

您可以继承 QLineEdit。
所以你的标题应该是这样的：

#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 中使用它。

【讨论】：

【解决方案3】：

QT5 addAction

```

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

```

【讨论】：

【解决方案4】：

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/

【讨论】：

【解决方案5】：

这是另一种简单的方法：

将 placeholderText 设置为“?”，将字体 Family 设置为 Seqoe UI Symbol 或您的目标系统上可以找到的其他字体，包括 U+1F50D 左指向放大镜字形。

【讨论】：

【解决方案6】：

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

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

结果如下：

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

【讨论】：

这里是一个对图标位置有一些影响的例子： QLineEdit { background-color: white; padding-right: 8px;填充左：16px；背景图片: url("%s");背景重复：不重复；背景位置：右；背景来源：内容； } QLineEdit:disabled { /* 与不同的 bgcolor 相同 */} 使用原点位置内容确保您的填充适用于图像。
@PiRK，尝试了您的示例，但它没有产生所需的示例（Qt 5.12）。它向右对齐，如果我将其更改为向左，则图标和文本将相互重叠。多年来，我一直尝试通过样式表和代理样式来破解 Qt，以相同的方式为 QLineEdit、QComboBox 和可编辑的 QComboBox（使用 QLineEdit）绘制这些图标和文本。您能否重新访问并重新发布工作示例。谢谢:)
在我的示例中，搜索图标应该在右侧。而且我的行编辑总是足够长，搜索字符串也足够短，以至于用户不会注意到图标和文本重叠。抱歉，我无法提供更多帮助。

【解决方案7】：

傻瓜的简单方法

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

结果

进阶方式

查看这个帖子："Can QLineEdit do this?"

或者

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

基本上通过在QLineEdit 上绘制一个小部件（标签、按钮甚至组合框）来定制一个QLineEdit。然后重置边距、光标、填充和绘制事件。没有魔法！

【讨论】：

我可能更喜欢先做简单的方法。目前尚不清楚高级方式是否会更好看或反应更好，但它更复杂。简单的方法可能是更好的方法。
@Trilarion：我完全同意。使用第二种解决方案，您最终会复制布局代码，代码库中还有一个特殊的类，您会失去灵活性。如果你想在右边有一个额外的图标怎么办？我认为这也说明了“现代” GUI 有什么问题以及为什么它们如此臃肿：对于相同的一般想法（即上下文菜单、列表和表格视图、可停靠小部件，这些基本上都是关于安排图形项目）。功能几何是一种更好的方法，我希望这个想法在实践中得到更广泛的采用......