日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

c++?qt自定義搜索編輯框的實現方法_C 語言

作者:令狐掌門 ? 更新時間: 2022-05-23 編程語言

實現效果如下:

在這里插入圖片描述

實現方法說明:
(1)自定義QLineEdit,在編輯框里添加布局,將按鈕設置在右邊
(2)給自定義QLineEdit添加信號,當點擊按鈕搜索按鈕時發送信號到主界面做相應的操作

自定義LineEdit

csearchlineedit.h

#ifndef CSEARCHLINEEDIT_H
#define CSEARCHLINEEDIT_H

#include 
#include 
#include 
class CSearchLineEdit : public QLineEdit
{
    Q_OBJECT
public:
    CSearchLineEdit(QWidget* parent = nullptr);
signals:
    void sig_search(const QString& context);
private slots:
    void on_ClickedSearch();
private:
    QPushButton *m_pBtn = nullptr;
};
#endif // CSEARCHLINEEDIT_H

csearchlineedit.cpp

#include "csearchlineedit.h"
#include 

CSearchLineEdit::CSearchLineEdit(QWidget* parent)
    :QLineEdit(parent)
{
    m_pBtn = new QPushButton(this);
    m_pBtn->setCursor(Qt::PointingHandCursor);
    m_pBtn->setFixedSize(22, 22);
    m_pBtn->setToolTip(QStringLiteral("搜索"));
    m_pBtn->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 = this->textMargins();
    //設置文本內容左上右下的間隙
    this->setTextMargins(0, 0, m_pBtn->width() + 1, 0);
    this->setPlaceholderText(QStringLiteral("請輸入搜索內容"));
    // 給編輯框設置布局
    QHBoxLayout *pSearchLayout = new QHBoxLayout(this);
    pSearchLayout->addStretch();
    pSearchLayout->addWidget(m_pBtn);
    pSearchLayout->setSpacing(0);
    pSearchLayout->setContentsMargins(0, 0, 0, 0);
    this->setLayout(pSearchLayout);
    connect(m_pBtn, &QPushButton::clicked, this, &CSearchLineEdit::on_ClickedSearch);
}
void CSearchLineEdit::on_ClickedSearch()
    // 其它邏輯
    emit sig_search(this->text());

注意這里是在主界面接收搜索按鈕的點擊事件,槽函數的參數是搜索內容,const QString&,當然也可以在CSearchLineEdit里處理,不過一般習慣把控件代碼和邏輯代碼分開,盡量不在控件類里處理業務邏輯。

主界面代碼

#include "widget.h"
#include 
#include 
#include 
#include 
#include "csearchlineedit.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    resize(400, 300);
    setWindowTitle(QStringLiteral("自定義搜索框"));
    CSearchLineEdit *pLineEdit = new CSearchLineEdit(this);
    QVBoxLayout *pLayout = new QVBoxLayout();
    pLayout->addWidget(pLineEdit);
    pLayout->setContentsMargins(10, 10, 10, 10);
    setLayout(pLayout);
    connect(pLineEdit, &CSearchLineEdit::sig_search, this, &Widget::onSearch);
}
Widget::~Widget()
void Widget::onSearch(const QString& context)
    if (context.isEmpty())
    {
        QMessageBox::information(this, QStringLiteral("提示"), QStringLiteral("搜索內容為空"));
        return;
    }
    QMessageBox::information(this, QStringLiteral("提示"), QStringLiteral("搜索內容為%1").arg(context));

其它說明

除了可以在右邊添加按鈕,還可以在左邊添加按鈕,只要合理的設置LineEdit的文本與左右兩邊控件的間隙即可。比如下面的自定義編輯框:
優酷搜索框

在這里插入圖片描述

釘釘搜索框

在這里插入圖片描述

這些都是可以實現的,優酷則需要用qss把LineEdit的四周圓角設為高度的一半,右側按鈕的圓角也設為高度的一半,這樣就實現了;釘釘的搜索框則是搜索按鈕在左邊;二者的搜索功能都會有彈出對話框的功能,例如釘釘

在這里插入圖片描述

這個也可以做,LineEdit獲得焦點時,彈出對話框即可。

原文鏈接:https://blog.csdn.net/yao_hou/article/details/123560364

欄目分類
最近更新