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 "appsearchline.h"
#include <QHBoxLayout>
#include <QPushButton>
AppSearchLine::AppSearchLine(QWidget *parent)
    :QLineEdit(parent)
{
    QHBoxLayout *mainLayout = new QHBoxLayout;
    QPushButton *searchBtn = new QPushButton;
    searchBtn->setFixedSize(13,13);
    searchBtn->setCursor(Qt::PointingHandCursor);
    searchBtn->setToolTip(tr("搜索"));
    searchBtn->setStyleSheet("QPushButton{border-image:url(:/image/resources/image/search-icon.png);"
                             "background:transparent;cursor:pointer;}");
    setPlaceholderText(tr("搜索"));
    mainLayout->addWidget(searchBtn);
    mainLayout->addStretch();
    //mainLayout->setContentsMargins(8,8,8,8);
    mainLayout->setContentsMargins(8,0,0,0);
    setTextMargins(13+8+2,0,0,0);
    setContentsMargins(0,0,0,0);
    setLayout(mainLayout);
    setStyleSheet("height:29px;border:1px solid #eaeaea;border-radius:14px;");
}

简单讲一下代码,这里用到的搜索图标大小为13*13,所以那个搜索button设置为固定大小13*13,代码中的

mainLayout->setContentsMargins(8,0,0,0);

这里设置的8个长度是图标左边的宽度,这样图标就不会紧挨着搜索框的边框了。

另一句

setTextMargins(13+8+2,0,0,0);

这里13是图标的宽度。8是布局的left margin,也就是上面设置的那个,2是额外的留白,主要是为了美观。

好了。代码就是那么简单。

时间: 2024-08-08 22:00:31

qt自己定义搜索框(超简单,带效果图)的相关文章

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

简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void addAction(QAction * action, ActionPosition position) 在QLineEdit的前/后添加部件,ActionPosition表示部件所在方位. QAction * addAction(const QIcon & icon, ActionPosition

猫猫学iOS 之微博项目实战(5)微博自己定义搜索框searchBar

猫猫分享.必须精品 原创文章.欢迎转载. 转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:效果 用UITextField简单定义一个搜索框 二:调用: 调用的代码.非常easy,直接init就能够,以后加功能自己加入即可了. - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框 NYSearchBar *searchBar = [[NYSearchBar alloc] initWithFrame

Srping Boot FreeMarker获取ContextPath-自定义ViewResolver以及超简单内置方法

最近想用spring boot+freemarker做个新项目,在学习的过程中有一个地方真是把我坑惨了.那就是contextPath的获取.这个之前在jsp里实在是太简单了,然后我以为在ftl中也一样(最终结果告诉我确实也一样),但是中间的过程实在有点,,浪费时间. 不过还好自己尝试加上搜索解决了这个问题.有两个方法: 一,自定义ViewResolver 百度freemarker + contextPath,大多数人都会告诉你在配置文件中配置 <property name="request

Qt之自定义检索框

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

EasyUI基础入门之searchbox&amp;progressbar(搜索框和进度条)

easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar.tooltip了,有点小激动呢.本偏文章将对searchbox和pargressbar做一个学习.鉴于两者的内容都不会太多,这里就直接将之合并在一起啦! searchbox 不用过多解释,只要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单按钮. searchbox提示用户输入搜索值.它可以设定一个类别菜单,允许用户选择不同的搜索类别.当用户点击确认按钮时将

自定义webkit搜索框样式

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

EasyUI基础searchbox&amp;amp;progressbar(搜索框,进度条)

easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar.tooltip该,有一点兴奋.本文将偏向searchbox和pargressbar做一个探讨.鉴于双方的内容不会太多,在这里,直接此事合并! searchbox 不用过多解释,仅仅要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单button. searchbox提示用户输入搜索值.它能够设定一个类别菜单,同意用户选择不同的搜索类别.当用户点击确认bu

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").bind("input  propertychange",function(){ console.log("aaaaa"); }): MUI 清除按钮的点击的监听:

城市选择之搜索框

新项目要做城市选择,效果图出来,用系统的搜索框达不到效果图的效果,设置searchBarStyle属性时,UISearchBarStyleDefault时设置barTintColor后边框会有黑线,设置UISearchBarStyleMinimal时无黑线单文本框颜色不符合要求.所以就自定义了下.先看下效果图 上面两个效果图的区别就是下面的图有个城市和图片.所以就封装到一个类中.只是TextField的LeftView变化.还有个问题就是城市名长短不一,设置城市的时候要进行重绘,所以我在set城