简述

关于搜索框,大家都经常接触。例如:浏览器搜索、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

搜索框实现

  1. m_pSearchLineEdit = new QLineEdit();
  2. QPushButton *pSearchButton = new QPushButton(this);
  3. pSearchButton->setCursor(Qt::PointingHandCursor);
  4. pSearchButton->setFixedSize(22, 22);
  5. pSearchButton->setToolTip(QStringLiteral("搜索"));
  6. pSearchButton->setStyleSheet("QPushButton{border-image:url(:/images/icon_search_normal); background:transparent;} \
  7. QPushButton:hover{border-image:url(:/images/icon_search_hover)} \
  8. QPushButton:pressed{border-image:url(:/images/icon_search_press)}");
  9. //防止文本框输入内容位于按钮之下
  10. QMargins margins = m_pSearchLineEdit->textMargins();
  11. m_pSearchLineEdit->setTextMargins(margins.left(), margins.top(), pSearchButton->width(), margins.bottom());
  12. m_pSearchLineEdit->setPlaceholderText(QStringLiteral("请输入搜索内容"));
  13. QHBoxLayout *pSearchLayout = new QHBoxLayout();
  14. pSearchLayout->addStretch();
  15. pSearchLayout->addWidget(pSearchButton);
  16. pSearchLayout->setSpacing(0);
  17. pSearchLayout->setContentsMargins(0, 0, 0, 0);
  18. m_pSearchLineEdit->setLayout(pSearchLayout);
  19. connect(pSearchButton, SIGNAL(clicked(bool)), this, SLOT(search()));

槽函数实现

  1. void Widget::search()
  2. {
  3. QString strText = m_pSearchLineEdit->text();
  4. if (!strText.isEmpty())
  5. {
  6. QMessageBox::information(this, QStringLiteral("搜索"), QStringLiteral("搜索内容为%1").arg(strText));
  7. }
  8. }

源码下载

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. B/S系统的前台和后台数据转递机制探究

    作者:朱金灿 来源:http://blog.csdn.net/clever101 说实话写这篇文章超出了我的能力范围之外(因为我并没有多少Web开发经验),我所期待的是能起一个抛砖引玉的作用--希望高 ...

  2. 正則表達式基础及java使用

    正則表達式基础 正則表達式语法(1)     普通字符:字母,数字.汉子,下划线以及没有特殊定义的标点符号都是"普通字符".表达式中的普通字符.在匹配一个字符串的时候,匹配与之同样 ...

  3. android --Activity生命周期具体解释

    一. 再探Activity生命周期 为了研究activity的生命周期,简单測试代码例如以下. package com.example.testactivity; import android.app ...

  4. PCI的imagework已由freeview软件代替

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在PCI 9.1中重要模块集成显示环境imagework还存在,但是到了PCI 10.0中imagework已经消失了 ...

  5. 【t095】拯救小tim

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小tim在游乐场,有一天终于逃了出来!但是不小心又被游乐场的工作人员发现了... 所以你的任务是安全地 ...

  6. sparksql 用反射的方式将rdd转换成dataset/dataframe

    java public class ReflectionDemo { private static SparkConf conf = new SparkConf().setAppName(" ...

  7. Springboot系列:@SpringBootApplication注解

    在使用 Springboot 框架进行开发的时候,通常我们会在 main 函数上添加 @SpringBootApplication 注解,今天为大家解析一下 @SpringBootApplicatio ...

  8. struts2_11_实现自己的拦截器的定义

    1)登录界面代码: <% //设置session的值keyword为user request.getSession().setAttribute("user", " ...

  9. 在线算法交互、可视化与演示及应用(caffe 网络配置文件 .prototxt 的可视化)

    0. 全集 Explained Visually 1. 图像与视觉 Image Kernels 2. 数学操作 Convolution arithmetic:卷积: 3. 神经网络与深度学习 A Ne ...

  10. bootstrap paginator使用简述

    1.引入bootstrap-paginator.js(依赖jquery)2.html部分需要一个ul标签,接下来我们会把该标签设置为分页组件 3.js部分(核心) 注意事项: 1.通过onPageCl ...