【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框

2024-04-15 01:12
文章标签 实现 设计 自定义 入门 qt 搜索 控件 样式 编辑框 qlineedit

本文主要是介绍【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

往期回顾

【QT入门】Qt自定义控件与样式设计之qss的加载方式-CSDN博客

【QT入门】Qt自定义控件与样式设计之控件提升与自定义控件-CSDN博客

【QT入门】Qt自定义控件与样式设计之鼠标相对、绝对位置、窗口位置、控件位置-CSDN博客

 【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框

一、最终效果

正常样式结果：

当我们把鼠标放在按钮上时：

 二、具体实现

其实思路很简单，就是自定义一个搜索栏控件，在搜索栏控件里再增加一个自定义按钮控件，最后设置布局就实现了。

1、自定义按钮

1.1重写鼠标事件

主要是样式表的设计，因为需要设计两个样式，打开正常显示一个，鼠标放上去又是一个，这也就涉及到要重载鼠标进入和离开事件 。

class CSearchButton : public QPushButton
{Q_OBJECT
public:CSearchButton(QWidget *parent = nullptr);private://正常样式，也就是打开看到的，由于复用次数高，所以用一个方法void normalStyle();protected://重载鼠标进入和离开事件void enterEvent(QEvent *event) override;void leaveEvent(QEvent *event) override;
};
1.2设置样式和高度

在.cpp文件里要注意设置高度，另外就是不要让父窗口影响子窗口样式 

CSearchButton::CSearchButton(QWidget *parent):QPushButton(parent)
{//防止父窗口影响子窗口样式this->setAttribute(Qt::WA_StyledBackground);//设置固定高度，因为要保证跟搜索框的一样this->setFixedHeight(40);//正常样式，因为鼠标放上去样式会改变normalStyle();
}
1.3重写鼠标事件添加qss样式

 就是在重写的鼠标进入和离开两个事件方法里写qss样式。

1.3.1enterEvent(QEvent *event)
//鼠标放上去后样式改变
void CSearchButton::enterEvent(QEvent *event)
{string qss = R"(QPushButton{background-color:#148AFF;background-image: url(:/resources/search.png);background-repeat: no-repeat;background-position:left;background-origin:content;padding-left:15px; /*图片相对于左边的偏移*/text-align:right;  /*文本的对齐方式*/padding-right:15px; /*文本相对于右边的偏移*/border-radius:20px;color:#FFFFFF;font-family: \"Microsoft YaHei\";font-size: 20px;})";//设置样式，string转QString，用fromStdStringthis->setStyleSheet(QString::fromStdString(qss));//设置固定宽度，因为鼠标放上去了样式改变，宽度也会变this->setFixedWidth(130);this->setText(u8"搜全网");
}

这里有一个很细节的地方：偏移值设置和对齐方式 

             background-origin:content;
            padding-left:15px; /*图片相对于左边的偏移*/
            text-align:right;  /*文本的对齐方式*/
            padding-right:15px; /*文本相对于右边的偏移*/

 1.3.2leaveEvent(QEvent *event)
//鼠标离开后就恢复正常样式
void CSearchButton::leaveEvent(QEvent *event)
{normalStyle();
}//正常样式，一样的
void CSearchButton::normalStyle()
{string qss = R"(QPushButton{background-color:#148AFF;background-image: url(:/resources/search.png);background-repeat: no-repeat;background-position: center;border-radius:20px;})";this->setStyleSheet(QString::fromStdString(qss));this->setFixedWidth(60);this->setText(u8"");
}

注意两个样式的按钮宽度是不一样的，在搜索栏控件里要考虑到这一点。

2、自定义搜索栏

2.1添加按钮设计

这一步主要是设计搜索栏样式和把做好的按钮加进来，加进来的时候要考虑到最终的ui界面，同时设置一个信号，主要是点击搜索按钮后发送这个信号，此时就可以在widget类接收信号并做进一步处理

2.1.1CSearchLineEdit.h
class CSearchLineEdit : public QLineEdit
{Q_OBJECT
public:CSearchLineEdit(QWidget *parent = nullptr);signals://鼠标点击搜索按钮后触发搜索信号void sig_Search(const QString& text);private://定义一个搜索按钮控件CSearchButton* m_pBtn = nullptr;
};
2.1.2CSearchLineEdit.cpp 
#include "csearchlineedit.h"
#include <string>
#include <QHBoxLayout>using namespace std;CSearchLineEdit::CSearchLineEdit(QWidget *parent):QLineEdit(parent)
{//防止父类窗口影响子类样式 this->setAttribute(Qt::WA_StyledBackground);string qss = R"(QLineEdit{background-color:#33373E;     /* 背景颜色 */border: 1px solid #33373E;      /* 边框宽度为1px，颜色为#A0A0A0 */border-radius: 20px;         /* 边框圆角 */padding-left: 10px;           /* 文本距离左边界有5px */color: #FFFFFF;     /* 文本颜色 */selection-background-color: #A0A0A0;     /* 选中文本的背景颜色 */selection-color: #F2F2F2;    /* 选中文本的颜色 */font-family: \"Microsoft YaHei\";    /* 文本字体族 */font-size:18px;    /* 文本字体大小 */})";//设置样式this->setStyleSheet(QString::fromStdString(qss));//这个是设置未输入时的提示内容this->setPlaceholderText(u8"请输入搜索内容");//固定高度和最小宽度this->setFixedHeight(40);this->setMinimumWidth(400);m_pBtn = new CSearchButton(this);//创建水平布局QHBoxLayout* pHlay = new QHBoxLayout(this);pHlay->addStretch();//添加弹簧把按钮放最右边pHlay->addWidget(m_pBtn);pHlay->setContentsMargins(0,0,0,0);//这个很熟悉了，默认为11，所以都要设置//这是设置文字的margin（左上右下），这里右边设置为130+5，因为要把按钮位置空出来，所以是this->setTextMargins(10, 0, 130 + 5,0);connect(m_pBtn, &CSearchButton::clicked, [=]{emit sig_Search(this->text());});
}

注意：

.cpp文件布局里注意几个问题

第一个，用了stringR写样式，别忘了加头文件和命名空间 

#include <string>
using namespace std;

 第二个，搜索栏加了一个弹簧把按钮放在了最右边，不然默认是挤在中间的

    //创建水平布局
    QHBoxLayout* pHlay = new QHBoxLayout(this);
    pHlay->addStretch();//添加弹簧把按钮放最右边
    pHlay->addWidget(m_pBtn);

第三个，设置margins，一个是搜索栏和按钮之间的，也就是控件之间的，一个是搜索栏里的文字之间的，文字设置那要把按钮空间空出来，不然最后输入的文字会和按钮挤在一起

    pHlay->setContentsMargins(0,0,0,0);//这个很熟悉了，默认为11，所以都要设置

    //这是设置文字的margin（左上右下），这里右边设置为130+5，因为要把按钮位置空出来，所以是
    this->setTextMargins(10, 0, 130 + 5,0);

 3、widget创建布局放进去

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置窗口样式this->setStyleSheet("background-color:#1A1E21");//创建编辑栏CSearchLineEdit* pEdit = new CSearchLineEdit(this);//创建垂直布局，并把编辑栏放进去，由于就一个部件，垂直或者水平都行QVBoxLayout* pVLay = new QVBoxLayout(this);pVLay->addWidget(pEdit);pVLay->addStretch();
}

以上，就是自定义QLineEdit实现搜索编辑框的简单介绍

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！

这篇关于【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/904531。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
认识、理解、分类——acm之搜索

认识、理解、分类——acm之搜索

普通搜索方法有两种：1、广度优先搜索；2、深度优先搜索； 更多搜索方法： 3、双向广度优先搜索； 4、启发式搜索（包括A*算法等）； 搜索通常会用到的知识点：状态压缩（位压缩，利用hash思想压缩）。
阅读更多...
hdu1240、hdu1253（三维搜索题）

hdu1240、hdu1253（三维搜索题）

1、从后往前输入，（x，y，z）; 2、从下往上输入，（y , z, x）; 3、从左往右输入，（z，x，y）； hdu1240代码如下： #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#inc
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2