qt 之 QLineEdit

1)使用的几个函数

占位符 setPlaceholderText("placeholder");

密码输入setEchoMode(QLineEdit::Password)

2)search button

https://github.com/jakepetroules/blog-archive

Creating a Windows Explorer style search box in Qt

Making applications look and feel native to the platform they are running on is an important part of software design. Today I'll be showing how to build a search box like the one found in Windows Vista Explorer using Qt.

Unfortunately the control is not a native one as far as I can tell, so we'll have to draw it ourselves. Fortunately, this is not as involved as it sounds. All we need is a QLineEdit control, and almost all the rest is Qt style sheets. First, the code:

// File: searchlineedit.h
#ifndef SEARCHLINEEDIT_H
#define SEARCHLINEEDIT_H

#include <QLineEdit>

class QToolButton;

class SearchLineEdit : public QLineEdit
{
    Q_OBJECT

public:
    explicit SearchLineEdit(QWidget *parent = NULL);

protected:
    void resizeEvent(QResizeEvent *event);

private slots:
    void updateSearchButton(const QString &text);

private:
    QString styleSheetForCurrentState() const;
    QString buttonStyleSheetForCurrentState() const;

    QToolButton *mSearchButton;
};

#endif // SEARCHLINEEDIT_H

// File: searchlineedit.cpp
#include "searchlineedit.h"
#include <QToolButton>
#include <QStyle>

SearchLineEdit::SearchLineEdit(QWidget *parent) :
    QLineEdit(parent)
{
    // Create the search button and set its icon, cursor, and stylesheet
    this->mSearchButton = new QToolButton(this);
    this->mSearchButton->setFixedSize(18, 18);
    this->mSearchButton->setCursor(Qt::ArrowCursor);
    this->mSearchButton->setStyleSheet(this->buttonStyleSheetForCurrentState());

    // Update the search button when the text changes
    QObject::connect(this, SIGNAL(textChanged(QString)), SLOT(updateSearchButton(QString)));

    // Some stylesheet and size corrections for the text box
    this->setPlaceholderText(tr("Search"));
    this->setStyleSheet(this->styleSheetForCurrentState());

    int frameWidth = this->style()->pixelMetric(QStyle::PM_DefaultFrameWidth);
    QSize minSizeHint = this->minimumSizeHint();
    this->setMinimumSize(qMax(minSizeHint.width(), this->mSearchButton->sizeHint().width() + frameWidth * 2 + 2),
                         qMax(minSizeHint.height(), this->mSearchButton->sizeHint().height() + frameWidth * 2 + 2));
    this->setSizePolicy(QSizePolicy::Maximum, this->sizePolicy().verticalPolicy());
}

void SearchLineEdit::resizeEvent(QResizeEvent *event)
{
    Q_UNUSED(event);
    QSize size = this->mSearchButton->sizeHint();
    int frameWidth = this->style()->pixelMetric(QStyle::PM_DefaultFrameWidth);
    this->mSearchButton->move(this->rect().right() - frameWidth - size.width() - 2, (this->rect().bottom() + 2 - size.height()) / 2);
}

void SearchLineEdit::updateSearchButton(const QString &text)
{
    if (!text.isEmpty())
    {
        // We have some text in the box - set the button to clear the text
        QObject::connect(this->mSearchButton, SIGNAL(clicked()), SLOT(clear()));
    }
    else
    {
        // The text box is empty - make the icon do nothing when clicked
        QObject::disconnect(this->mSearchButton, SIGNAL(clicked()), this, SLOT(clear()));
    }

    this->setStyleSheet(this->styleSheetForCurrentState());
    this->mSearchButton->setStyleSheet(this->buttonStyleSheetForCurrentState());
}

QString SearchLineEdit::styleSheetForCurrentState() const
{
    int frameWidth = this->style()->pixelMetric(QStyle::PM_DefaultFrameWidth);

    QString style;
    style += "QLineEdit {";
    if (this->text().isEmpty())
    {
        style += "font-family: 'MS Sans Serif';";
        style += "font-style: italic;";
    }

    style += "padding-left: 3px;";
    style += QString("padding-right: %1px;").arg(this->mSearchButton->sizeHint().width() + frameWidth + 1);
    style += "border-width: 3px;";
    style += "border-image: url(:/images/esf-border.png) 3 3 3 3 stretch;";
    style += "background-color: rgba(255, 255, 255, 204);";
    style += "}";
    style += "QLineEdit:hover, QLineEdit:focus {";
    style += "background-color: rgba(255, 255, 255, 255);";
    style += "}";
    return style;
}

QString SearchLineEdit::buttonStyleSheetForCurrentState() const
{
    QString style;
    style += "QToolButton {";
    style += "border: none; margin: 0; padding: 0;";
    style += QString("background-image: url(:/images/esf-%1.png);").arg(this->text().isEmpty() ? "search" : "clear");
    style += "}";

    if (!this->text().isEmpty())
    {
        style += "QToolButton:hover { background-image: url(:/images/esf-clear-hover.png); }";
        style += "QToolButton:pressed { background-image: url(:/images/esf-clear-active.png); }";
    }

    return style;
}

To start, we create a subclass of QLineEdit. We override resizeEvent and create a couple utility methods to build the stylesheets.

For the search icon we'll use a QToolButton and add it as a child of our line edit control. Most of the constructor code is just setting up sizing rules. The code in resizeEvent keeps the search button aligned to the right side of the text box.

The updateSearchButton slot sets the proper display state of the text box whenever the text is changed, since the search icon should change to a clear icon, and clear the text in the text box when it is clicked.

The last two methods are the real meat of the control's look-and-feel; the Qt stylesheets CSS for the images, border, and padding of the button and text box. Clearly this is not a native Explorer search box but it looks very close to it. That's about it.

Here is an example project demonstrating the control, go ahead and give it a try: Windows Explorer search control demo