目录
一、前言
像如下图所示的搜索框都是很常见的，那么如何使用Qt来设计一个搜索框呢？本文介绍两种方法来实现自定义搜索框。
二、实现效果
第一个搜索框和第二个搜索框分别用不同的方法进行设计，获取搜索框的内容显示在QTextBrowser上面，后期可以根据搜索框的内容进行查找数据等一些查询操作。
三、方法一
方法一比较直接，是将一个编辑框（QLineEdit）和一个按钮（QPushButton）结合起来，通过按钮的点击信号（clicked）来连接槽函数的。有个缺点就是加载在按钮上面的图片需要和按钮一样大（宽高都相等）。
实现过程
1、初始化按钮
可以通过样式表设计按钮正常状态、鼠标滑过、鼠标点击等不同状态时显示的图片，本例只做正常状态下按钮加载的图片。
//搜索按钮
search_btn = new QPushButton(this);
search_btn->setFixedSize(32, 32);//设置固定大小
search_btn->setFlat(true);//去掉按钮边框
search_btn->setToolTip("搜索");//设置鼠标悬浮的提示
search_btn->setStyleSheet("QPushButton {background-image: url(:/image/搜索.png)}");//设置样式表可通过如下所示设置样式表
//设置样式表
search_btn->setStyleSheet("QPushButton {background-image: url(:/image/搜索.png)}"
"QPushButton:hover {background-image: url(:/image/搜索_hover.png)}"
"QPushButton:clicked {background-image: url(:/image/搜索_clicked.png)}");2、初始化编辑框
设置编辑框位置大小、友好提示、文字输入的边距。
//第一个编辑框
search_edit1 = new QLineEdit(this);
//设置编辑框位置大小
search_edit1->setGeometry(100, 50, 400, 50);
//设置编辑框没有输入内容时的友好提示
search_edit1->setPlaceholderText("请输入你想要搜索的内容");
//设置编辑框文字的边距，防止文字写到按钮上 参数：左 上 右 下
search_edit1->setTextMargins(0, 0, search_btn->width(), 0);3、按钮添加至编辑框上方
通过水平布局，实现按钮处在编辑框上方。
//水平布局
QHBoxLayout *hlayout = new QHBoxLayout;
hlayout->addStretch();
hlayout->addWidget(search_btn);//将按钮加到布局中
hlayout->setContentsMargins(0, 0, 0, 0);//设置布局的边距
//第一个编辑框添加布局（将按钮放在编辑框上）
search_edit1->setLayout(hlayout);最后通过connect将按钮的点击信号（clicked）和槽函数连接起来。
四、方法二
方法二是通过编辑框的addAction（）函数来实现的，实现起来非常简单，比较推荐使用这种方法。不过有个缺点就是不能设置正常状态、鼠标滑过、鼠标点击等不同状态的时候action显示不同的图片（可能有方法实现，不过我不知道，哈哈哈）。
实现过程
1、初始化 QAction
//初始化 QAction
search_action = new QAction;
search_action->setToolTip("搜索");//设置鼠标悬浮的提示
search_action->setIcon(QIcon(":/image/搜索.png"));//加载显示图片2、初始化编辑框并添加 QAction
//第二个编辑框
search_edit2 = new QLineEdit(this);
//设置编辑框位置大小
search_edit2->setGeometry(100, 150, 400, 50);
//设置编辑框没有输入内容时的友好提示
search_edit2->setPlaceholderText("请输入你想要搜索的内容");
//TrailingPosition:将action放置在右边
search_edit2->addAction(search_action, QLineEdit::TrailingPosition);QAction放置的方向可以放置在编辑框左边，也可以放置在编辑框右边，通过枚举值：TrailingPosition 和 LeadingPosition 来设置。
放置在右边（TrailingPosition ）
放置在左边（LeadingPosition ）
最后通过connect将QAction的点击信号（triggered）和槽函数连接起来。
五、全部代码
1、头文件（.h）
#ifndef SEARCH_BOX_H
#define SEARCH_BOX_H
#include <QWidget>
#include <QAction>
#include <QLineEdit>
#include <QPushButton>
#include <QLabel>
#include <QTextBrowser>
class search_box : public QWidget
{
Q_OBJECT
public:
explicit search_box(QWidget *parent = 0);
private:
QLineEdit *search_edit1, *search_edit2;
QAction *search_action;
QPushButton *search_btn;
QTextBrowser *text;
signals:
public slots:
};
#endif // SEARCH_BOX_H2、源文件（.cpp）
#include "search_box.h"
#include <QIcon>
#include <QHBoxLayout>
#include <QString>
search_box::search_box(QWidget *parent) : QWidget(parent)
{
this->setWindowIcon(QIcon(":/image/搜索.png"));
this->resize(600, 600);
this->setWindowTitle("自定义搜索框");
//方法一
//搜索按钮
search_btn = new QPushButton(this);
search_btn->setFixedSize(32, 32);//设置固定大小
search_btn->setFlat(true);//去掉按钮边框
search_btn->setToolTip("搜索");//设置鼠标悬浮的提示
search_btn->setStyleSheet("QPushButton {background-image: url(:/image/搜索.png)}");//设置样式表
connect(search_btn, &QPushButton::clicked, [&](){
text->append(QString("第一个搜索框输入的内容为: %1").arg(search_edit1->text()));
});
//第一个编辑框
search_edit1 = new QLineEdit(this);
search_edit1->setGeometry(100, 50, 400, 50);//设置编辑框位置大小
search_edit1->setPlaceholderText("请输入你想要搜索的内容");//设置编辑框没有输入内容时的友好提示
search_edit1->setTextMargins(0, 0, search_btn->width(), 0);//设置编辑框文字的边距，防止文字写到按钮上 参数：左 上 右 下
//水平布局
QHBoxLayout *hlayout = new QHBoxLayout;
hlayout->addStretch();
hlayout->addWidget(search_btn);
hlayout->setContentsMargins(0, 0, 0, 0);//设置布局的边距
//第一个编辑框添加布局（将按钮放在编辑框上）
search_edit1->setLayout(hlayout);
//方法二
//QAction
search_action = new QAction;
search_action->setToolTip("搜索");//设置鼠标悬浮的提示
search_action->setIcon(QIcon(":/image/搜索.png"));//加载显示图片
connect(search_action, &QAction::triggered, [&](){
text->append(QString("第二个搜索框输入的内容为: %1").arg(search_edit2->text()));
});
//第二个编辑框
search_edit2 = new QLineEdit(this);
search_edit2->setGeometry(100, 150, 400, 50);//设置编辑框位置大小
search_edit2->setPlaceholderText("请输入你想要搜索的内容");//设置编辑框没有输入内容时的友好提示
//TrailingPosition:将action放置在右边
search_edit2->addAction(search_action, QLineEdit::TrailingPosition);
//LeadingPosition:将action放置在左边
//search_edit2->addAction(search_action, QLineEdit::LeadingPosition);
//初始化QTextBrowser
text = new QTextBrowser(this);
text->setGeometry(100, 250, 400, 300);
}本例的connect使用C++ 11的lambda表达式来做简单的测试，可以改成如下写法，槽函数slot_function1()和slot_function2()可自行实现。
connect(search_btn, SIGNAL(clicked(bool)), this, SLOT(slot_function1()));
connect(search_action, SIGNAL(triggered(bool)), this, SLOT(slot_function2()));原创不易，转载请标明出处。