简述

关于搜索框,大家都经常接触。例如:浏览器搜索、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则显示在左侧。
  • 方案二:自定义(可以实现任何组合)

下面,我们来针对自定义进行讲解。

效果

细节分析

实现细节需要如下步骤:

  1. 组合实现,输入框+按钮
  2. 事件关联
  3. 获取输入文本,进行文本搜索

为了更人性、易用,这里有一些细节需要注意:

  1. 输入框的文本不能处于按钮之下
  2. 输入框无文本时必须给与友好性提示
  3. 按钮无文本描述,一般需要给予ToolTip提示
  4. 按钮样式-正常、滑过、按下,以及鼠标滑过鼠标样式手型,

这些都想清楚了,我们就能快速实现一个搜索框了。

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,还不影响正常输入文字(好像是一种比较通吃的方法)的更多相关文章

  1. 【Qt】Qt之自定义搜索框【转】

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 简述 效果 细节分析 Coding 源码下载 效果 ...

  2. Qt之自定义搜索框

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  3. Qt之自定义检索框

    1.效果展示 今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1.网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧 ...

  4. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  5. Android自定义View——自定义搜索框(SearchView)

    Android自定义View——自定义搜索框(SearchView) http://www.apkbus.com/android-142064-1-1.html

  6. bootStrap-table服务器端后台分页的使用,以及自定义搜索框的实现,前端代码到数据查询超详细讲解

    关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...

  7. qt自己定义搜索框(超简单,带效果图)

    1. 什么也不要说.先上效果图: 2. 代码 头文件: #ifndef APPSEARCHLINE_H #define APPSEARCHLINE_H #include <QLineEdit&g ...

  8. WPF 自定义搜索框

      控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...

  9. WPF自定义搜索框代码分享

    首先下载搜索图标: 控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangl ...

随机推荐

  1. [NPM] Use a shorthand syntax for running multiple npm scripts with npm-run-all

    Running multiple scripts in series or in parallel can become very verbose. Using a tool such as npm- ...

  2. 通过binlog日志统计dml语句,找出操作频繁的表

    mysqlbinlog --no-defaults --base64-output=decode-rows -v -v mysql-bin.000002 |awk '/###/{if($0~/UPDA ...

  3. 自定义view布局过程详解

    布局过程,就是程序在运行时利用布局文件的代码来计算出实际尺寸的过程. 布局分为两个阶段:测量阶段和布局阶段. 测量阶段:从上到下递归地调用每个 View 或者 ViewGroup 的 measure( ...

  4. [Cordova+Sencha Touch] 移动开发1 sencha 2.4.0 + 在 安卓2.3.6上使用报错 - has no method 'bind'

    Sencha Touch 2.3.2和2.4.0在安卓2.3上面用会报错,具体报错信息如下: 解决办法是: 打开文件:你的file:///android_asset/www/sencha-touch- ...

  5. Bitmap,byte[],Drawable相互转化

    1.Drawable就是一个可画的对象.其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable).还有可能是一个图层(LayerDrawable),我们依据绘图 ...

  6. QT之QSignalMapper(可以理解为转发器,多个按钮绑定到一个Edit上,且能分辨。每个单独连接的话,反而麻烦)

    QT之QSignalMapper QT之QSignalMapper 简述 效果图 上代码 相关知识点文章 结尾 简述 QSignalMapper我们可以理解为转发器,此话怎讲呢?比如,按钮点击的响应槽 ...

  7. 机器学习: t-Stochastic Neighbor Embedding 降维算法 (一)

    Introduction 在计算机视觉及机器学习领域,数据的可视化是非常重要的一个应用,一般我们处理的数据都是成百上千维的,但是我们知道,目前我们可以感知的数据维度最多只有三维,超出三维的数据是没有办 ...

  8. android高仿人人网

    经过几个月的努力,终于基本完成了人人API拥有的所有功能,界面采用仿照人人梦想版5.13制作,其中资源文件也采用人人的APK文件资源,完成的功能及知识点如下: 1.通过三种动画仿照出人人引导页的放大切 ...

  9. 贝叶斯方法(Bayesian approach) —— 一种概率解释(probabilistic interpretation)

    1. Bayesian approach 对于多项式拟合问题,我们可通过最小二乘(least squares)的方式计算得到模型的参数,最小二乘法又可视为最大似然(maximum likelihood ...

  10. python 和为S的两个数字

    输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 运用到的知识; 1.判断是否是统一类型: if not isinsta ...