Qt 搜索框
Posted 凉天满月
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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、控件效果如下
以上是关于Qt 搜索框的主要内容,如果未能解决你的问题,请参考以下文章