Qt学习之自定义搜索框（两种方案）

似末

已于 2022-03-19 09:03:31 修改

阅读量8.7k

点赞数 20

分类专栏： Qt学习文章标签：自定义搜索框 qt c++

于 2022-03-18 03:03:30 首次发布

本文链接：https://blog.csdn.net/wmcy123/article/details/123564865

版权

Qt学习专栏收录该内容

19 篇文章 20 订阅

订阅专栏

一、前言

像如下图所示的搜索框都是很常见的，那么如何使用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_H

2、源文件（.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()));

原创不易，转载请标明出处。