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 ...
随机推荐
- B/S系统的前台和后台数据转递机制探究
作者:朱金灿 来源:http://blog.csdn.net/clever101 说实话写这篇文章超出了我的能力范围之外(因为我并没有多少Web开发经验),我所期待的是能起一个抛砖引玉的作用--希望高 ...
- 正則表達式基础及java使用
正則表達式基础 正則表達式语法(1) 普通字符:字母,数字.汉子,下划线以及没有特殊定义的标点符号都是"普通字符".表达式中的普通字符.在匹配一个字符串的时候,匹配与之同样 ...
- android --Activity生命周期具体解释
一. 再探Activity生命周期 为了研究activity的生命周期,简单測试代码例如以下. package com.example.testactivity; import android.app ...
- PCI的imagework已由freeview软件代替
作者:朱金灿 来源:http://blog.csdn.net/clever101 在PCI 9.1中重要模块集成显示环境imagework还存在,但是到了PCI 10.0中imagework已经消失了 ...
- 【t095】拯救小tim
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小tim在游乐场,有一天终于逃了出来!但是不小心又被游乐场的工作人员发现了... 所以你的任务是安全地 ...
- sparksql 用反射的方式将rdd转换成dataset/dataframe
java public class ReflectionDemo { private static SparkConf conf = new SparkConf().setAppName(" ...
- Springboot系列:@SpringBootApplication注解
在使用 Springboot 框架进行开发的时候,通常我们会在 main 函数上添加 @SpringBootApplication 注解,今天为大家解析一下 @SpringBootApplicatio ...
- struts2_11_实现自己的拦截器的定义
1)登录界面代码: <% //设置session的值keyword为user request.getSession().setAttribute("user", " ...
- 在线算法交互、可视化与演示及应用(caffe 网络配置文件 .prototxt 的可视化)
0. 全集 Explained Visually 1. 图像与视觉 Image Kernels 2. 数学操作 Convolution arithmetic:卷积: 3. 神经网络与深度学习 A Ne ...
- bootstrap paginator使用简述
1.引入bootstrap-paginator.js(依赖jquery)2.html部分需要一个ul标签,接下来我们会把该标签设置为分页组件 3.js部分(核心) 注意事项: 1.通过onPageCl ...