关于QLineEdit右侧添加图标（点击查看密码，点击隐藏密码）如何优化图标的位置呢？

移动开发 > Qt [问题点数：20分，结帖人Lulixiao]

各位大佬，请问QLineEdit右侧添加图标，点击查看密码，点击隐藏密码时，为啥如下代码显示的右侧图标会向下拉长呢？有什么办法可以让它显示正常或好看一些吗？
具体代码如下：
class pwdLineEdit : public QLineEdit
{
    Q_OBJECT
public:
    explicit pwdLineEdit(QWidget *parent = nullptr);
    ~pwdLineEdit();

signals:

public slots:

};

//pwdLineEdit
pwdLineEdit::pwdLineEdit(QWidget *parent)
    :QLineEdit(parent)
{
    setStyleSheet("QLineEdit{background:transparent;border-image:url(:/res/pwd/lineEditBkg.png);border-style:solid;color:#003DA6;padding-left: +8px;border-color:#232423;font:11px ""SimHei"";}"
                  "QLineEdit:hover{border: 1px solid #014099;}"
                  "QLineEdit:focus{border: 1px solid #014099;}"
                  "QLineEdit:hover{border: 1px solid #014099;}"
                  "QLineEdit QPushButton {width:  16px;height: 16px;qproperty-flat: true;margin-right: 4px;border: none;border-width: 0;border-image: url(:/res/pwd/password_hide.png) 0 0 0 0 stretch stretch;background: transparent;}"
                  "QLineEdit QPushButton::checked {border-image: url(:/res/pwd/password_show.png) 0 0 0 0 stretch stretch;}");
    setEchoMode(QLineEdit::Password);
    QPushButton* button = new QPushButton();
    button->setCursor(Qt::PointingHandCursor);
    button->setCheckable(true);
    connect(button, &QPushButton::toggled, [this](bool checked) {
        if (checked)
        {
            setEchoMode(QLineEdit::Normal);
        }
        else
        {
            setEchoMode(QLineEdit::Password);
        }
    });

QHBoxLayout* layout = new QHBoxLayout();
    layout->addStretch();
    layout->addWidget(button);
    layout->setContentsMargins(0, 0, 0, 0);
    setLayout(layout);
}

pwdLineEdit::~pwdLineEdit()
{

}

具体效果图如下：

不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。

引用 1 楼这是一个正经昵称的回复:

不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。

大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。

引用 2 楼 lwei2 的回复:

Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。

我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大

引用 3 楼这是一个正经昵称的回复:

Quote: 引用 2 楼 lwei2 的回复:
Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。
我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大

大佬，border-image这个背景是不能改了，项目要求。
至于你说的button的fixSize应该是setFixedSize这个吧。好像不怎么管用！！！

引用 4 楼 lwei2 的回复:

Quote: 引用 3 楼这是一个正经昵称的回复:
Quote: 引用 2 楼 lwei2 的回复:
Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。
我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大
大佬，border-image这个背景是不能改了，项目要求。
至于你说的button的fixSize应该是setFixedSize这个吧。好像不怎么管用！！！

好家伙项目要求必须用border-image设置背景？我大概知道你们应用场景了
非得把控件放布局里的话你可以试试把按钮放一个QWIdget上再把QWiget放布局里，然后控制按钮大小。

引用 5 楼这是一个正经昵称的回复:

Quote: 引用 4 楼 lwei2 的回复:
Quote: 引用 3 楼这是一个正经昵称的回复:
Quote: 引用 2 楼 lwei2 的回复:
Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。
我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大
大佬，border-image这个背景是不能改了，项目要求。
至于你说的button的fixSize应该是setFixedSize这个吧。好像不怎么管用！！！
好家伙项目要求必须用border-image设置背景？我大概知道你们应用场景了
非得把控件放布局里的话你可以试试把按钮放一个QWIdget上再把QWiget放布局里，然后控制按钮大小。

大佬，还是很感谢你的回复，我会再试试的。

引用 5 楼这是一个正经昵称的回复:

Quote: 引用 4 楼 lwei2 的回复:
Quote: 引用 3 楼这是一个正经昵称的回复:
Quote: 引用 2 楼 lwei2 的回复:
Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。
我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大
大佬，border-image这个背景是不能改了，项目要求。
至于你说的button的fixSize应该是setFixedSize这个吧。好像不怎么管用！！！
好家伙项目要求必须用border-image设置背景？我大概知道你们应用场景了
非得把控件放布局里的话你可以试试把按钮放一个QWIdget上再把QWiget放布局里，然后控制按钮大小。

大佬，我这样写的，你看有啥不对吗？感觉和截图中差不多。还劳烦再指点一下：

installEventFilter(this);
    setEchoMode(QLineEdit::Password);
    QWidget *pWidget = new QWidget();
    QPushButton *button = new QPushButton(pWidget);
    button->setCursor(Qt::PointingHandCursor);
    button->setCheckable(true);
    connect(button, &QPushButton::toggled, [this](bool checked) {
        if (checked)
        {
            setEchoMode(QLineEdit::Normal);
        }
        else
        {
            setEchoMode(QLineEdit::Password);
        }
    });

    QHBoxLayout* layout = new QHBoxLayout();
    layout->addStretch();
    layout->addWidget(button);
    layout->setContentsMargins(0, 0, 0, 0);
    setLayout(layout);

这个图标，能不能向左移动一些距离，因为太靠右了，看起来感觉不是很好。。。。

引用 7 楼 lwei2 的回复:

Quote: 引用 5 楼这是一个正经昵称的回复:
Quote: 引用 4 楼 lwei2 的回复:
Quote: 引用 3 楼这是一个正经昵称的回复:
Quote: 引用 2 楼 lwei2 的回复:
Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。
我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大
大佬，border-image这个背景是不能改了，项目要求。
至于你说的button的fixSize应该是setFixedSize这个吧。好像不怎么管用！！！
好家伙项目要求必须用border-image设置背景？我大概知道你们应用场景了
非得把控件放布局里的话你可以试试把按钮放一个QWIdget上再把QWiget放布局里，然后控制按钮大小。
大佬，我这样写的，你看有啥不对吗？感觉和截图中差不多。还劳烦再指点一下：

installEventFilter(this);
    setEchoMode(QLineEdit::Password);
    QWidget *pWidget = new QWidget();
    QPushButton *button = new QPushButton(pWidget);
    button->setCursor(Qt::PointingHandCursor);
    button->setCheckable(true);
    connect(button, &QPushButton::toggled, [this](bool checked) {
        if (checked)
        {
            setEchoMode(QLineEdit::Normal);
        }
        else
        {
            setEchoMode(QLineEdit::Password);
        }
    });

    QHBoxLayout* layout = new QHBoxLayout();
    layout->addStretch();
    layout->addWidget(button);
    layout->setContentsMargins(0, 0, 0, 0);
    setLayout(layout);

这个图标，能不能向左移动一些距离，因为太靠右了，看起来感觉不是很好。。。。

之前的意思是，你可以拿button放widget上，然后把widget放布局里，这样widget会被拉伸，button的大小和位置会被固定，图标自然不会变形。但是问题是按钮是固定位置，实际上并不一定在LineEdit的垂直中心。
所以你可以把widget换成一个垂直Layout，其上中下分3层，分别是Stretch，button，Stretch。

另外我要是你，我根本不会用这个布局，这个控件直接获取resize事件然后动态调整button位置就完事了。一般自己写一些布局的东西灵活运用。

引用 8 楼这是一个正经昵称的回复:

Quote: 引用 7 楼 lwei2 的回复:
Quote: 引用 5 楼这是一个正经昵称的回复:
Quote: 引用 4 楼 lwei2 的回复:
Quote: 引用 3 楼这是一个正经昵称的回复:
Quote: 引用 2 楼 lwei2 的回复:
Quote: 引用 1 楼这是一个正经昵称的回复:
不要用border-image 那个跟着控件大小走的。要么就把button大小固定成图片的比例。
大佬，刚刚试过了，把button固定成为:/res/pwd/password_show.png或:/res/pwd/password_hide.png，好像没有多大变化，和截图中的效果一样。
那个border-image背景图这个暂时不能更换了，因为项目需求限定了这个背景图片。。。
我的意思是指定button的fixdsize
或者用seticon和seticonsize
没让你固定用一个图片或者换图片
border-image会把图绘制的跟控件一样大
大佬，border-image这个背景是不能改了，项目要求。
至于你说的button的fixSize应该是setFixedSize这个吧。好像不怎么管用！！！
好家伙项目要求必须用border-image设置背景？我大概知道你们应用场景了
非得把控件放布局里的话你可以试试把按钮放一个QWIdget上再把QWiget放布局里，然后控制按钮大小。
大佬，我这样写的，你看有啥不对吗？感觉和截图中差不多。还劳烦再指点一下：

installEventFilter(this);
    setEchoMode(QLineEdit::Password);
    QWidget *pWidget = new QWidget();
    QPushButton *button = new QPushButton(pWidget);
    button->setCursor(Qt::PointingHandCursor);
    button->setCheckable(true);
    connect(button, &QPushButton::toggled, [this](bool checked) {
        if (checked)
        {
            setEchoMode(QLineEdit::Normal);
        }
        else
        {
            setEchoMode(QLineEdit::Password);
        }
    });

    QHBoxLayout* layout = new QHBoxLayout();
    layout->addStretch();
    layout->addWidget(button);
    layout->setContentsMargins(0, 0, 0, 0);
    setLayout(layout);

这个图标，能不能向左移动一些距离，因为太靠右了，看起来感觉不是很好。。。。
之前的意思是，你可以拿button放widget上，然后把widget放布局里，这样widget会被拉伸，button的大小和位置会被固定，图标自然不会变形。但是问题是按钮是固定位置，实际上并不一定在LineEdit的垂直中心。
所以你可以把widget换成一个垂直Layout，其上中下分3层，分别是Stretch，button，Stretch。

另外我要是你，我根本不会用这个布局，这个控件直接获取resize事件然后动态调整button位置就完事了。一般自己写一些布局的东西灵活运用。

多谢大佬耐心指点，我尝试过你说的方法：把widget换成一个垂直Layout，不过图标突然变到左侧了，可能是我对布局这个概念理解的不够深，目前还做到灵活。故，我只是做了以下修改：layout->setContentsMargins(5, -5, 15, -15);。还是很感谢你的帮忙。

匿名用户不能发表回复！

关于QLineEdit右侧添加图标（点击查看密码，点击隐藏密码）如何优化图标的位置呢？

关于QLineEdit右侧添加图标（点击查看密码，点击隐藏密码）如何优化图标的位置呢？

Recommend

手柄右侧四个键位为什么是ABXY，不是别的字母，叉叉圆圈三角方块同理又是什么意思呢？...

对右侧交易的不解

就想问问右侧交易者，你进场了么？

Android 获取WebView的HTML图片点击并查看

点击查看《头皮洗护行业洞察报告》，揭秘行业新机会点！

深商菁英女神丨点击查看了不起的她们@国富黄金、远鹏装饰、艾美集团、远东妇儿

上海有100余家互联网医院，点击查看线上问诊操作指南

点击查看，跨境电商常用支付方式！

亚马逊黑五再创历史新纪录！点击查看跨境平台的明争暗斗

解决 Chrome 标签页过多的难以点击/查看的问题非 OneTab

About Joyk