Qt 搜索框

一、前言

  用户需要输入文本时,可使用QLineEdit控件进行编辑输入,缺点是样式相对单一。

  在使用百度搜索输入框时,发觉比较人性化,故采用QLineEdt+QPushButton通过css样式实现自定义搜索框控件,包含如下功能:

  1、可设置占位符文本

  2、可设置搜索按钮显示字符内容、文本颜色

  3、可设置搜索按钮为图标形式或文本形式

  4、可设置背景色、边框颜色、边框圆角角度

  5、支持回车发送当前文本信号

  6、支持获取当前编辑文本内容

  7、支持设置当前文本内容

  8、鼠标移入/移出到搜索按钮上,切换鼠标状态

二、搜索框实现

  1、运行环境Qt5.5 VS2013

  2、自定义搜索框

  1)继承QWidget,定义搜索框类SearchLineEdit

  2)采用水平无间距布局

 1 //用于输入搜索文本,左对齐
 2     m_LineEdit = new QLineEdit;
 3     m_LineEdit->setObjectName("SearchText");
 4     m_LineEdit->setPlaceholderText(" 请输入搜索字符");
 5     m_LineEdit->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
 6     m_LineEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
 7     connect(m_LineEdit, SIGNAL(editingFinished()), this, SLOT(searchSlot()));
 8 
 9     m_Button = new QPushButton;
10     m_Button->setObjectName("SearchButton");
11     m_Button->setText(buttonText);
12     m_Button->setIconSize(QSize(28, 28));
13     m_Button->setFixedWidth(55);
14     m_Button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
15     connect(m_Button, SIGNAL(clicked(bool)), this, SLOT(searchSlot()));
16     m_Button->installEventFilter(this);
17 
18     m_BgFrame = new QFrame;
19     m_BgFrame->setObjectName("frameSearch");
20 
21     //设置样式
22     setStyle();
23 
24     QVBoxLayout *verticalLayout = new QVBoxLayout(this);
25     verticalLayout->setMargin(0);
26     verticalLayout->setSpacing(0);
27     verticalLayout->addWidget(m_BgFrame);
28 
29     //将控件按照横向布局排列
30     QHBoxLayout *layout = new QHBoxLayout(m_BgFrame);
31     layout->setMargin(0);
32     layout->setSpacing(0);
33     layout->addWidget(m_LineEdit);
34     layout->addWidget(m_Button);
控件布局

  3)设置QLineEdit与QPushButton的显示样式

void SearchLineEdit::setStyle()
{
    QStringList qss;

    qss.append(QString("QFrame#%1{border:none;border-radius:%2px;}")
               .arg(m_BgFrame->objectName()).arg(borderRadius));
    qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));
    qss.append(QString("QLineEdit{border-top-left-radius:%1px;border-bottom-left-radius:%1px;border:2px solid %2;}")
               .arg(borderRadius).arg(borderColor));
    qss.append(QString("QPushButton{background-color:%1;border:none;color:%2;}")
               .arg(borderColor).arg(buttonTextColor));
    qss.append(QString("QPushButton{border-top-right-radius:%1px;border-bottom-right-radius:%1px;}")
               .arg(borderRadius));

    m_BgFrame->setStyleSheet(qss.join(""));
}
样式设置

  3、控件效果如下