QT搜索框联想功能之自定义联想下拉框。

86 篇文章 1 订阅

在这里插入图片描述

在开发的过程中,我们可能会遇到搜索框联想的功能。但是怎么联想,且联想下拉框的qss样式怎么设置,和下拉框中是否可以放入自己的控件等问题。
废话不多说,直接上代码。
头文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtWidgets>

class ULineEdit : public QLineEdit
{
    Q_OBJECT

public:
    explicit ULineEdit(QWidget *parent = 0);
    ~ULineEdit();

    QToolButton *btnSearchIcon();             //搜索按钮
    QToolButton *btnInputCleanIcon();         //清除按钮
private slots:
    void slotcompleter(QString str);
//    void sloteditchange(QString text);
private:
    QCompleter  *m_MyInfor;
    QToolButton *m_btnSearchIcon;
    QToolButton *m_btnInputCleanIcon;
    QPushButton *m_btn;
};

#endif // MAINWINDOW_H

cpp文件:

#include "ulineedit.h"
#include <QCompleter>

//联想下拉框四边间距
#define ITEM_LEFT_MARGIN 10
#define ITEM_RIGHT_MARGIN 10
#define ITEM_TOP_MARGIN 20
#define ITEM_BOTTOM_MARGIN 20

ULineEdit::ULineEdit(QWidget *parent) :
    QLineEdit(parent)
{
    //使输入框具有初始化提示语句
    this->setPlaceholderText( "搜索" );
    this->setFixedSize(200,24);
    this->setWindowFlag(Qt::FramelessWindowHint);
    this->move(300,300);

    //布局设置搜索按钮
    m_btnSearchIcon = new QToolButton(this);
    m_btnSearchIcon->setFixedSize(24,24);
    m_btnSearchIcon->setIcon(QIcon("/home/yjd/searchdrop/搜索.png"));
    m_btnSearchIcon->setIconSize(QSize(24,24));

    //布局设置清除按钮
    m_btnInputCleanIcon = new QToolButton(this);
    m_btnInputCleanIcon->setFixedSize(16,16);
    m_btnInputCleanIcon->setIcon(QIcon("/home/yjd/searchdrop/删除.png"));

    QHBoxLayout* layout = new QHBoxLayout;
    layout->addWidget(m_btnSearchIcon);
    layout->addSpacing(this->width()-m_btnSearchIcon->width()-m_btnInputCleanIcon->width());
    layout->addWidget(m_btnInputCleanIcon);
    layout->setContentsMargins(0,0,0,0);
    this->setLayout(layout);

    //设置起始输入位置
    this->setTextMargins(m_btnSearchIcon->width(), 0, m_btnInputCleanIcon->width(), 0);

    //设置输入联想下拉框
    QStringList  word_list;
    word_list<< "1"<<"12"<<"213"<<"123"<<"231"<<"321"<<"Java" << "C++" << "C#" << "PHP" << "Perl" << "Python" << "Delphi" << "Ruby" ;
    m_MyInfor  = new QCompleter (word_list);
    m_MyInfor->setFilterMode(Qt::MatchContains);
    m_MyInfor->setCaseSensitivity(Qt::CaseInsensitive);

    //创建想下拉框自定义widget
    QWidget* w = new QWidget;
//    w->setStyleSheet("background:black");   //测试代码
    w->setFixedSize(this->width()-ITEM_LEFT_MARGIN-ITEM_RIGHT_MARGIN,m_MyInfor->popup()->height());
    m_MyInfor->popup()->setViewport(w);

    QAbstractItemView *popup = m_MyInfor->popup();
    connect(m_MyInfor,SIGNAL(activated(QString)),this,SLOT(slotcompleter(QString)));
//    connect(this,SIGNAL(textChanged(QString)),this,SLOT(sloteditchange(QString)));

    //设置联想下拉框代理,这个关乎qss的是否生效
    QStyledItemDelegate* d = new QStyledItemDelegate(this);
    popup->setItemDelegate(d);
    popup->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    //设置联想下拉框样式
    QString stylestr = QString("QAbstractItemView::item:selected{background:blue;height:20px;border-radius:5px;}"
                       "QAbstractItemView::item{color:white;background:red;min-height:30px;border-radius:5px;border-bottom:1px solid #DDDDDD;margin-bottom:%1px;/*边缘间隔*/}"
                       "QAbstractItemView{background:rgb(81, 81, 81);outline:none;border-radius:10px;padding-left:%2px;padding-right:%3px;padding-top:%4px;/*拓展距离*/}")
            .arg(ITEM_BOTTOM_MARGIN).arg(ITEM_LEFT_MARGIN).arg(ITEM_RIGHT_MARGIN).arg(ITEM_TOP_MARGIN);
    popup->setStyleSheet(stylestr);

    //设置Eidt的模糊查询对象
    this->setCompleter(m_MyInfor);
}

ULineEdit::~ULineEdit()
{
}

//返回搜索按钮,给其他类自定义设置
QToolButton* ULineEdit::btnSearchIcon()
{
    return m_btnSearchIcon;
}

//返回清除按钮,给其他类自定义设置
QToolButton* ULineEdit::btnInputCleanIcon()
{
    return m_btnInputCleanIcon;
}

//记录选择的联想内容
void ULineEdit::slotcompleter(QString str)
{
    qDebug()<<str<<m_MyInfor->completionCount();
}

//动态调整联想下拉框,下拉框存在自定义btn时可以使用该调整。
//void ULineEdit::sloteditchange(QString text)
//{
//    m_MyInfor->popup()->setFixedHeight(m_MyInfor->completionCount()*50+ITEM_LEFT_MARGIN+ITEM_RIGHT_MARGIN);
//}
  • 4
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
搜索框下拉框是一种常见的用户界面元素,在Qt框架中可以很方便地实现。 在Qt中,可以使用QComboBox类来创建一个下拉框。默认情况下,QComboBox是一个普通的下拉框,用户可以通过点击下拉按钮来选择其中的选项。但如果需要添加搜索功能,可以通过QComboBox的子类QLineEdit添加一个搜索框,实现搜索下拉框的效果。 具体的实现方法如下: 1. 导入Qt的相关类和模块: ``` from PyQt5.QtWidgets import QApplication, QComboBox, QLineEdit from PyQt5.QtCore import Qt ``` 2. 创建一个QComboBox对象并设置搜索框: ``` combo_box = QComboBox() search_box = QLineEdit() combo_box.setEditable(True) # 允许编辑 combo_box.setLineEdit(search_box) # 设置搜索框 ``` 3. 添加选项到下拉框: ``` combo_box.addItem("选项1") combo_box.addItem("选项2") combo_box.addItem("选项3") ``` 4. 添加搜索功能: ``` def search_text_changed(text): combo_box.clear() for option in options: if text.lower() in option.lower(): combo_box.addItem(option) search_box.textChanged.connect(search_text_changed) ``` 在上面的代码中,search_text_changed函数会在搜索框中的文本发生变化时被调用。在这个函数中,我们先清空下拉框中的选项,然后根据搜索框中的文本筛选出符合条件的选项,并添加到下拉框中。 通过Qt的这些简单的API,我们就可以实现一个带有搜索框下拉框。这种下拉框可以方便地让用户搜索和选择选项,提升用户体验和交互性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方忘忧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值