Qt之自定义搜索框——QLineEdit里增加一个Layout,还不影响正常输入文字(好像是一种比较通吃的方法)
简述
关于搜索框,大家都经常接触。例如:浏览器搜索、Windows资源管理器搜索等。
当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定。
方案一:调用QLineEdit现有接口
void addAction(QAction * action, ActionPosition position)
在QLineEdit的前/后添加部件,ActionPosition表示部件所在方位。QAction * addAction(const QIcon & icon, ActionPosition position)
重载函数。
枚举:QLineEdit::ActionPosition
| 常量 | 值 | 描述 |
|---|---|---|
| QLineEdit::LeadingPosition | 0 | 当使用布局方向Qt::LeftToRight时,部件显示在文本左侧,使用Qt::RightToLeft则显示在右侧。 |
| QLineEdit::TrailingPosition | 1 | 当使用布局方向Qt::LeftToRight时,部件显示在文本右侧,使用Qt::RightToLeft则显示在左侧。 |
- 方案二:自定义(可以实现任何组合)
下面,我们来针对自定义进行讲解。
效果
细节分析
实现细节需要如下步骤:
- 组合实现,输入框+按钮
- 事件关联
- 获取输入文本,进行文本搜索
为了更人性、易用,这里有一些细节需要注意:
- 输入框的文本不能处于按钮之下
- 输入框无文本时必须给与友好性提示
- 按钮无文本描述,一般需要给予ToolTip提示
- 按钮样式-正常、滑过、按下,以及鼠标滑过鼠标样式手型,
这些都想清楚了,我们就能快速实现一个搜索框了。
Coding
搜索框实现
m_pSearchLineEdit = new QLineEdit();
QPushButton *pSearchButton = new QPushButton(this);
pSearchButton->setCursor(Qt::PointingHandCursor);
pSearchButton->setFixedSize(22, 22);
pSearchButton->setToolTip(QStringLiteral("搜索"));
pSearchButton->setStyleSheet("QPushButton{border-image:url(:/images/icon_search_normal); background:transparent;} \
QPushButton:hover{border-image:url(:/images/icon_search_hover)} \
QPushButton:pressed{border-image:url(:/images/icon_search_press)}");
//防止文本框输入内容位于按钮之下
QMargins margins = m_pSearchLineEdit->textMargins();
m_pSearchLineEdit->setTextMargins(margins.left(), margins.top(), pSearchButton->width(), margins.bottom());
m_pSearchLineEdit->setPlaceholderText(QStringLiteral("请输入搜索内容"));
QHBoxLayout *pSearchLayout = new QHBoxLayout();
pSearchLayout->addStretch();
pSearchLayout->addWidget(pSearchButton);
pSearchLayout->setSpacing(0);
pSearchLayout->setContentsMargins(0, 0, 0, 0);
m_pSearchLineEdit->setLayout(pSearchLayout);
connect(pSearchButton, SIGNAL(clicked(bool)), this, SLOT(search()));
槽函数实现
void Widget::search()
{
QString strText = m_pSearchLineEdit->text();
if (!strText.isEmpty())
{
QMessageBox::information(this, QStringLiteral("搜索"), QStringLiteral("搜索内容为%1").arg(strText));
}
}
源码下载
http://blog.csdn.net/liang19890820/article/details/50357523
Qt之自定义搜索框——QLineEdit里增加一个Layout,还不影响正常输入文字(好像是一种比较通吃的方法)的更多相关文章
- 【Qt】Qt之自定义搜索框【转】
简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 简述 效果 细节分析 Coding 源码下载 效果 ...
- Qt之自定义搜索框
简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...
- Qt之自定义检索框
1.效果展示 今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1.网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧 ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- Android自定义View——自定义搜索框(SearchView)
Android自定义View——自定义搜索框(SearchView) http://www.apkbus.com/android-142064-1-1.html
- bootStrap-table服务器端后台分页的使用,以及自定义搜索框的实现,前端代码到数据查询超详细讲解
关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...
- qt自己定义搜索框(超简单,带效果图)
1. 什么也不要说.先上效果图: 2. 代码 头文件: #ifndef APPSEARCHLINE_H #define APPSEARCHLINE_H #include <QLineEdit&g ...
- WPF 自定义搜索框
控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...
- WPF自定义搜索框代码分享
首先下载搜索图标: 控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangl ...
随机推荐
- Bootstrap3简单好用,轻松实现手机适配
个人官网http://FansUnion.cn,前端使用Bootstrap框架.大部分的样式,轻松就实现了. 只是呢,关于导航条,被无数网友吐槽了. 通过手机访问时,导航条把屏幕给完全占居了 ...
- log4erl API
https://github.com/ahmednawras/log4erl/blob/master/API.txt NOTE:=====Please be informed that the API ...
- 【codeforces 765A】Neverending competitions
[题目链接]:http://codeforces.com/contest/765/problem/A [题意] 给你一个人的n个行程 行程都是从家到某个地方或从某个地方到家; 且是无序的,且如果到了非 ...
- Python科学计算(一)
一.准备教材:<python科学计算> 作者: 张若愚 出版社: 清华大学出版社 出版年: 2012-1 页数: 621 定价: 98.00元 装帧: 平装 ISBN: 97873022 ...
- 电子商务系统的设计与实现(七):前后端系统UI设计的一些思考
对于大部分开发者来说,写界面是最烦人的事.我想,开发者最初诞生,以及我们在大学学习的时候,更加侧重的是程序设计和逻辑思维,而不是界面.界面更象是艺术,艺术和程序设计是两回事. 我个人还是想成为全栈式开 ...
- javascript中window对象 部分操作
<!--引用javascript外部脚本--> <script src="ss.js"></script> <script> //警 ...
- hadoop 3.x 回收站
使用回收站最主要是为了给误删文件的你留条后路 打开core-site.xml添加以下配置 <!--回收站保存文件时间--> <property> <name>fs. ...
- Project Euler:Problem 39 Integer right triangles
If p is the perimeter of a right angle triangle with integral length sides, {a,b,c}, there are exact ...
- 配置文件——App.config文件读取和修改
作为普通的xml文件读取的话,首先就要知道怎么寻找文件的路径.我们知道一般配置文件就在跟可执行exe文件在同一目录下,且仅仅在名称后面添加了一个.config 因此,可以用Application.Ex ...
- 你不从地址栏中增加曝光量所需的数据库ID方法
<p><span style="font-size: 18px;"></span></p> 当你想隐藏数据库id时,你能够使用 Ha ...