Qt之自定义搜索框

转自http://blog.csdn.net/liang19890820/article/details/50357523

简述

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

这里写图片描述

这里写图片描述

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

  • 方案一:调用QLineEdit现有接口

    • void addAction(QAction * action, ActionPosition position) 
      在QLineEdit的前/后添加部件,ActionPosition表示部件所在方位。

    • QAction * addAction(const QIcon & icon, ActionPosition position) 
      重载函数。

枚举:QLineEdit::ActionPosition

常量描述
QLineEdit::LeadingPosition0当使用布局方向Qt::LeftToRight时,部件显示在文本左侧,使用Qt::RightToLeft则显示在右侧。
QLineEdit::TrailingPosition1当使用布局方向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));
    }
}

 

源码下载

提示:QAction * QLineEdit::addAction(const QIcon & icon, ActionPosition position)也可实现此功能

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QIcon icon(":/res/search.png");
    QAction *searchAction=new QAction(this);
    searchAction->setIcon(icon);
    m_pLineEdit=new QLineEdit();
    m_pLineEdit->setFixedSize(200,22);
    m_pLineEdit->addAction(searchAction,QLineEdit::LeadingPosition);
    m_pLineEdit->setPlaceholderText(QStringLiteral("请输入搜索内容"));
    //this->setCentralWidget(m_pLineEdit);

    m_pHBLayout=new QHBoxLayout();
    m_pHBLayout->addWidget(m_pLineEdit);

    ui->centralWidget->setLayout(m_pHBLayout);
    connect(searchAction,SIGNAL(triggered(bool)),this,SLOT(search()));

}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::search()
{
    QString text=m_pLineEdit->text();
    if(!text.isEmpty())
    {
        QMessageBox::information(this,QStringLiteral("搜索"),QStringLiteral("搜索内容为%1").arg(text));
    }
}

 

版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣、好玩、靠谱。。。作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值