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

电玩女神 2022-08-20 11:11 236阅读 0赞

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

![Center][]

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，所以那个搜索按钮设置为固定大小13\*13，代码中的

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

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

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

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

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

[Center]: /images/20220731/da7ef67a36554c0ab56d0132cfdf2357.png