qt自己定义搜索框（超简单，带效果图）

Posted 2020-09-27 cynchanpin

1. 什么也不要说。先上效果图：

2. 代码

头文件：

#ifndef APPSEARCHLINE_H
#define APPSEARCHLINE_H

#include <QLineEdit>

class AppSearchLine : public QLineEdit
{
    Q_OBJECT
public:
    AppSearchLine(QWidget *parent = 0);
};

#endif // APPSEARCHLINE_H

源文件

#include "appsearchline.h"
#include <QHBoxLayout>
#include <QPushButton>
AppSearchLine::AppSearchLine(QWidget *parent)
    :QLineEdit(parent)
{
    QHBoxLayout *mainLayout = new QHBoxLayout;
    QPushButton *searchBtn = new QPushButton;
    searchBtn->setFixedSize(13,13);
    searchBtn->setCursor(Qt::PointingHandCursor);
    searchBtn->setToolTip(tr("搜索"));
    searchBtn->setStyleSheet("QPushButton{border-image:url(:/image/resources/image/search-icon.png);"
                             "background:transparent;cursor:pointer;}");
    setPlaceholderText(tr("搜索"));
    mainLayout->addWidget(searchBtn);
    mainLayout->addStretch();
    //mainLayout->setContentsMargins(8,8,8,8);
    mainLayout->setContentsMargins(8,0,0,0);
    setTextMargins(13+8+2,0,0,0);
    setContentsMargins(0,0,0,0);
    setLayout(mainLayout);
    setStyleSheet("height:29px;border:1px solid #eaeaea;border-radius:14px;");
}

简单讲一下代码，这里用到的搜索图标大小为13*13，所以那个搜索button设置为固定大小13*13，代码中的

mainLayout->setContentsMargins(8,0,0,0);

这里设置的8个长度是图标左边的宽度，这样图标就不会紧挨着搜索框的边框了。

另一句

setTextMargins(13+8+2,0,0,0);

这里13是图标的宽度。8是布局的left margin，也就是上面设置的那个，2是额外的留白，主要是为了美观。

好了。代码就是那么简单。