一、前言

二、实现效果

三、方法一

1、初始化按钮

2、初始化编辑框

3、按钮添加至编辑框上方

四、方法二

1、初始化 QAction

2、初始化编辑框并添加 QAction

五、全部代码

1、头文件（.h）

2、源文件（.cpp）

一、前言

像如下图所示的搜索框都是很常见的，那么如何使用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);//方法二//QActionsearch_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);//初始化QTextBrowsertext = 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()));

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

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

Qt 之自定义搜索框QLineEdit
Qt 之自定义搜索框 2015年12月19日 10:44:14 一去丶二三里阅读数 15126更多分类专栏: Qt <Qt 实战一二三> 版权声明:本文为博主原创文章,遵循 CC 4. ...
iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
小程序自定义搜索框_将自定义搜索提供程序添加到Windows 7以及高级搜索技巧
小程序自定义搜索框 Disclaimer: Many of my tips have crashed cars, broken lights, and caused lawnmowers to go ...
前端开发：自定义搜索框（含联想搜索）
在前端开发过程中,搜索功能是比较常见的功能,也是在项目开发过程中比较常见的需求.搜索框功能常用的几种需求也都是大同小异,但是实用的搜索框可以作为一个例子来写是很有必要的,那么本篇博文就来分享一下前端开 ...
android 自定义搜索框edittext,Android编程自定义搜索框实现方法【附demo源码下载】...
本文实例讲述了Android编程自定义搜索框实现方法.分享给大家供大家参考,具体如下: 先来看效果图吧~ 分析:这只是模拟了一个静态数据的删除与显示用EditText+PopupWindow+lis ...
EntityFramework Core 2.0自定义标量函数两种方式
前言上一节我们讲完原始查询如何防止SQL注入问题同时并提供了几种方式.本节我们继续来讲讲EF Core 2.0中的新特性自定义标量函数. 自定义标量函数两种方式在EF Core 2.0中我们可以将 ...
vue实现搜索框记录搜索历史_云开发版的微信商城小程序第四章，首页自定义搜索框的实现...
四,首页自定义搜索框的实现我们的搜索框,会在多个页面使用,所以我们这里把搜索框做成一个自定义组件,这样就可以在别的地方很方便的使用我们的搜索框了. 老规矩,先看效果图 4-1,自定义搜索框组件我们 ...
iOS 自定义layer的两种方式
在iOS中,你能看得见摸得着的东西基本都是UIView,比如一个按钮,一个标签,一个文本输入框,这些都是UIView: 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层在创建UIVi ...
使用vivado调用自定义IP的两种方法
使用vivado调用自定义IP的两种方法方法一:采用Creat Block Design以图形化界面方式,即原理图方式调用自定义IP,例如下图: 方法二:采用代码方式,即类似函数方式调用自定义IP, ...

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

一、前言

二、实现效果

三、方法一

1、初始化按钮

2、初始化编辑框

3、按钮添加至编辑框上方

四、方法二

1、初始化 QAction

2、初始化编辑框并添加 QAction

五、全部代码

1、头文件（.h）

2、源文件（.cpp）

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

最新文章

热门文章