Qt 之自定义搜索框QLineEdit

Qt 之自定义搜索框

2015年12月19日 10:44:14 一去丶二三里 阅读数 15126更多

分类专栏： Qt 《Qt 实战一二三》

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/u011012932/article/details/50357523

简述

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

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

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

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

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

枚举：QLineEdit::ActionPosition

常量	值	描述
QLineEdit::LeadingPosition	0	当使用布局方向Qt::LeftToRight时，部件显示在文本左侧，使用Qt::RightToLeft则显示在右侧。
QLineEdit::TrailingPosition	1	当使用布局方向Qt::LeftToRight时，部件显示在文本右侧，使用Qt::RightToLeft则显示在左侧。

• 方案二：自定义（可以实现任何组合）

下面，我们来针对自定义进行讲解。

| 版权声明：一去、二三里，未经博主允许不得转载。

效果

细节分析

实现细节需要如下步骤：

1. 组合实现，输入框+按钮
2. 事件关联
3. 获取输入文本，进行文本搜索

为了更人性、易用，这里有一些细节需要注意：

1. 输入框的文本不能处于按钮之下
2. 输入框无文本时必须给与友好性提示
3. 按钮无文本描述，一般需要给予ToolTip提示
4. 按钮样式-正常、滑过、按下，以及鼠标滑过鼠标样式手型，

这些都想清楚了，我们就能快速实现一个搜索框了。

Coding

搜索框实现

<span style="color:#000000"><code class="language-Qt">m_pSearchLineEdit <span style="color:#4f4f4f !important">=</span> <span style="color:#006666 !important">new</span> QLineEdit();
QPushButton <span style="color:#4f4f4f !important">*</span>pSearchButton <span style="color:#4f4f4f !important">=</span> <span style="color:#006666 !important">new</span> QPushButton(this);

pSearchButton<span style="color:#4f4f4f !important">-></span>setCursor(Qt<span style="color:#006666 !important">::PointingHandCursor</span>);
pSearchButton<span style="color:#4f4f4f !important">-></span>setFixedSize(<span style="color:#006666 !important">22</span>, <span style="color:#006666 !important">22</span>);
pSearchButton<span style="color:#4f4f4f !important">-></span>setToolTip(QStringLiteral(<span style="color:#009900 !important">"搜索"</span>));
pSearchButton<span style="color:#4f4f4f !important">-></span>setStyleSheet(<span style="color:#009900 !important">"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)}"</span>);

<span style="color:#880000 !important">//防止文本框输入内容位于按钮之下</span>
QMargins margins <span style="color:#4f4f4f !important">=</span> m_pSearchLineEdit<span style="color:#4f4f4f !important">-></span>textMargins();
m_pSearchLineEdit<span style="color:#4f4f4f !important">-></span>setTextMargins(margins<span style="color:#4f4f4f !important">.</span>left(), margins<span style="color:#4f4f4f !important">.</span>top(), pSearchButton<span style="color:#4f4f4f !important">-></span>width(), margins<span style="color:#4f4f4f !important">.</span>bottom());
m_pSearchLineEdit<span style="color:#4f4f4f !important">-></span>setPlaceholderText(QStringLiteral(<span style="color:#009900 !important">"请输入搜索内容"</span>));

QHBoxLayout <span style="color:#4f4f4f !important">*</span>pSearchLayout <span style="color:#4f4f4f !important">=</span> <span style="color:#006666 !important">new</span> QHBoxLayout();
pSearchLayout<span style="color:#4f4f4f !important">-></span>addStretch();
pSearchLayout<span style="color:#4f4f4f !important">-></span>addWidget(pSearchButton);
pSearchLayout<span style="color:#4f4f4f !important">-></span>setSpacing(<span style="color:#006666 !important">0</span>);
pSearchLayout<span style="color:#4f4f4f !important">-></span>setContentsMargins(<span style="color:#006666 !important">0</span>, <span style="color:#006666 !important">0</span>, <span style="color:#006666 !important">0</span>, <span style="color:#006666 !important">0</span>);
m_pSearchLineEdit<span style="color:#4f4f4f !important">-></span>setLayout(pSearchLayout);

connect(pSearchButton, SIGNAL(clicked(bool)), this, SLOT(search()));</code></span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

槽函数实现

<span style="color:#000000"><code class="language-Qt"><span style="color:#006666 !important">void</span> Widget<span style="color:#006666 !important">::search</span>()
{
    QString strText <span style="color:#4f4f4f !important">=</span> m_pSearchLineEdit<span style="color:#4f4f4f !important">-></span>text();
    <span style="color:#000088 !important">if</span> (<span style="color:#4f4f4f !important">!</span>strText<span style="color:#4f4f4f !important">.</span>isEmpty())
    {
        QMessageBox<span style="color:#006666 !important">::information</span>(this, QStringLiteral(<span style="color:#009900 !important">"搜索"</span>), QStringLiteral(<span style="color:#009900 !important">"搜索内容为%1"</span>)<span style="color:#4f4f4f !important">.</span>arg(strText));
    }
}</code></span>