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则显示在左侧。
  • 方案二:自定义(可以实现任何组合)

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

效果

细节分析

实现细节需要如下步骤:

  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

时间: 2024-10-28 10:27:31

Qt之自定义搜索框——QLineEdit里增加一个Layout,还不影响正常输入文字(好像是一种比较通吃的方法)的相关文章

Qt之自定义检索框

1.效果展示 今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1.网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧重点不仅仅是搜索,而且包括了检索功能.有兴趣的小伙伴可以看下步骤3的思路讲解. 图1 自定义搜索框 2.功能分析 这个自定义搜索框支持输入一定的数据源,然后通过检索窗口进行搜索数据,匹配到的数据会优先展示到预览下拉框,预览窗口支持hover高亮整行.仔细阅读demo源码的同学可能就会发现其实这个搜搜

“商城项目”自定义搜索框

1.要实现搜索的效果图如下:<功能:当输入关键字点击搜索按钮的时候在list上显示出来,点击商品进入商品详情页即可> 2>自定义搜索框,在导航栏视图上添加搜索视图,代码如下: 3>搜索结果的tableView,定义一个数组将解析数据的内容存取到数组中,将数组的个数加一,最后多得一行作为清除历史记录的一行 4>重要的一点就是:点击清除历史记录的时候,将保存到NSuserdefault的内容remove掉 5>最后将数据解析的内容传过去就行了,自定义搜索框就完成了. 注意点

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

概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有 1. 搜索界面大致由三部门组成

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

1. 什么也不要说.先上效果图: 2. 代码 头文件: #ifndef APPSEARCHLINE_H #define APPSEARCHLINE_H #include <QLineEdit> class AppSearchLine : public QLineEdit { Q_OBJECT public: AppSearchLine(QWidget *parent = 0); }; #endif // APPSEARCHLINE_H 源文件 #include "appsearchl

IOS自定义搜索框

如果只是在某个地方添加一个自定义的搜索框,只需要添加以下代码: //创建搜索框对象 UITextField *searchBar=[[UITextField alloc] init]; searchBar.width=300; searchBar.height=30; searchBar.font=[UIFont systemFontofSize:15]; [email protected]"请输入搜索框"; searchBar.backgroud=[UIImage imageName

Android自定义搜索框

搜索框里的虚拟键盘 xml如下 <EditText android:id="@+id/et_shopshow_search" android:layout_width="144dp" android:layout_height="40dp" android:singleLine="true" android:paddingLeft="8dp" android:paddingRight="8d

iOS - 完全自定义搜索框

此项目已上传GitHub,支持pods安装,Awsearch git地址: https://github.com/adampei/AwSearch git上有详细说明 效果图大概长这样 这个库都能做什么? 自定义搜索的icon, icon大小, icon位置, 搜索框背景色, 位置, 圆角等, 输入框字体大小, 颜色, placeholder字体大小, 颜色等, 右侧按钮字体大小, 背景色, 图片, 背景图等详细说明在GitHub,喜欢的话可以给个star谢谢 原文地址:https://www.

WPF 自定义搜索框

  控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2.然后中间放TextBox输入,可以重写其中的模板.提示语Label放在模板中,可以在模板的触发器中控制隐藏显示~ 3.搜索按钮-大家随便在网上下个就行了. UserControl界面: <UserControl x:Class="WpfApplication18.SearchControl&q

【UI集合】- 自定义搜索框

疑问:看到好多APP上,导航栏上都有个搜索框,这个UI部分是肿么实现的呢...???