Qt之自定义搜索框

简述

关于搜索框,大家都经常接触。例如:浏览器搜索、Windows资源管理器搜索等。

当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定。

  • 简述
  • 效果
  • 细节分析
  • Coding
  • 源码下载

效果

细节分析

实现细节需要如下步骤:

  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));
    }
}

源码下载

时间: 2022-12-17

Qt之自定义搜索框的相关文章

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

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

WPF自定义搜索框代码分享_实用技巧

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

wordpress自定义搜索框和结果页面的方法

对于在某个主题中想添加很多自己想要的效果给搜索框和结果页面的人来说这绝对是一个好的方案,其实代码很简单而且很少,关键是几个要注意的地方. 首先是搜索框的代码如下:  代码如下 复制代码 <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">     <input class=

自定义搜索功能Android实现_Android

先看看效果图: 源码下载:自定义搜索功能 代码: SearchActivity.java package com.bzu.gxs.search.activity; import android.app.Activity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.AdapterView; import and

百度开放搜索框提示为中小网站注入动力

基于该功能,用户在搜索框中输入汉字或拼音时会动态地获得相关的搜索提示和建议,使网民能够更轻而易举地找到自己的搜索目标.根据测算,深受网民欢迎的搜索框提示功能自推出以来使用率已经接近50%,并能够帮助用户减少输入成本33%以上.凭借以上优势,在页面中嵌入该功能的中小网站不但可以有效地降低用户的使用成本,而且还会在改善用户体验的同时,令网站的用户黏性明显的提升. 据了解,此次开放的搜索框提示功能模块不仅在服务上远远比竞争对手稳定,而且为中小网站站长们提供了三种引入方式,网站可以根据自身的具体情况和需

ios-iOS 有没有好用搜索框控制器的第三方框架?

问题描述 iOS 有没有好用搜索框控制器的第三方框架? iOS 有没有好用搜索框控制器的第三方框架? iOS 有没有好用搜索框控制器的第三方框架? 解决方案 要么用系统的 UISearchController ,要么自定义搜索框 解决方案二: 要么用系统的 UISearchController ,要么自定义搜索框 解决方案三: 要么用系统的 UISearchController ,要么自定义搜索框

自定义webkit搜索框样式

每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致... 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的? 那我们在很多情况下需要让页

XP系统开始菜单没有“搜索框”怎么回事

XP系统开始菜单没有"搜索框"怎么回事   恢复开始菜单中"搜索"的方法与步骤: 1,第一个方法,在开始处右键,在弹出菜单中选择"属性",进入窗口后,按照"[开始]菜单"->"自定义"->"高级"->"[开始]菜单项目"此路径,在列表框中找到"搜索"这一项,勾选,然后按"确定". 2,这时,在开始菜单中,就已经

Android---浮动搜索框(SearchManager)

浮动搜索框的使用其实并不难,而是在于它的配置非常之繁琐,对于它的使用主要是方便开发者对于程序中有搜索业务时,更好的设计UI SearchManager具体使用步骤如下: (1)配置search bar的相关信息,新建一个位于res/xml下的一个searchable.xml的配置文件,如默认值.是否有搜索建议或者语音搜索. 代码 <searchable xmlns:android=http://schemas.android.com/apk/res/android   <!-- label为搜