帶自定義按鈕的QLineEdit

Question

我需要實現LineEdit小部件，並在文本區域的右端添加工具按鈕。我知道這樣做的兩種方式，但兩種解決方案似乎都很難看。

1）將工具按鈕添加爲QLineEdit的子部件，並處理resizeEvent以正確定位它們。主要的缺點是，如果文本足夠長，它可能出現在工具按鈕下。

2）另一種解決方案是將行編輯和按鈕放入框架中並覆蓋樣式以隱藏lineedits框架並使QFrame看起來像QLineEdit。

我需要一個最好的方式來實現這樣的小部件。另外我的小部件應該是風格意識。

Answer 1

現在的原始博客文章了，但Trolltech once posted an example of a clear button Qt的4

結果

線編輯與無文字：

線編輯與一些文字（出現按鈕）：

線編輯全文（不走按鈕下方）：

來源

lineedit.h

/**************************************************************************** 
** 
** Copyright (c) 2007 Trolltech ASA <info@trolltech.com> 
** 
** 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 <info@trolltech.com> 
** 
** 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()); 
} 

Answer 2

一旦我實現了這個這樣的解決方案：

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

QToolButton的位置在resizeEvent處理。如果有多個，你必須調整他們的座標。你也可以修改它來使用佈局。這裏沒有文字重疊。

Answer 3

從Qt 5.2開始，可以使用QLineEdit::addAction(...)來插入自定義按鈕。 （Qt Docs）

實例（假設我們是MyClass的定義裏面）：

QLineEdit *myLineEdit = new QLineEdit(this); 
QAction *myAction = myLineEdit->addAction(QIcon("test.png"), QLineEdit::TrailingPosition); 
connect(myAction, &QAction::triggered, this, &MyClass::onActionTriggered);