一、前言
用户需要输入文本时,可使用QLineEdit控件进行编辑输入,缺点是样式相对单一。
在使用百度搜索输入框时,发觉比较人性化,故采用QLineEdt+QPushButton通过css样式实现自定义搜索框控件,包含如下功能:
1、可设置占位符文本
2、可设置搜索按钮显示字符内容、文本颜色
3、可设置搜索按钮为图标形式或文本形式
4、可设置背景色、边框颜色、边框圆角角度
5、支持回车发送当前文本信号
6、支持获取当前编辑文本内容
7、支持设置当前文本内容
8、鼠标移入/移出到搜索按钮上,切换鼠标状态
二、搜索框实现
1、运行环境Qt5.5 VS2013
2、自定义搜索框
1)继承QWidget,定义搜索框类SearchLineEdit
2)采用水平无间距布局
//用于输入搜索文本,左对齐
m_LineEdit = new QLineEdit;
m_LineEdit->setObjectName("SearchText");
m_LineEdit->setPlaceholderText(" 请输入搜索字符");
m_LineEdit->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
m_LineEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
connect(m_LineEdit, SIGNAL(editingFinished()), this, SLOT(searchSlot()));
m_Button = new QPushButton;
m_Button->setObjectName("SearchButton");
m_Button->setText(buttonText);
m_Button->setIconSize(QSize(28, 28));
m_Button->setFixedWidth(55);
m_Button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
connect(m_Button, SIGNAL(clicked(bool)), this, SLOT(searchSlot()));
m_Button->installEventFilter(this);
m_BgFrame = new QFrame;
m_BgFrame->setObjectName("frameSearch");
//设置样式
setStyle();
QVBoxLayout *verticalLayout = new QVBoxLayout(this);
verticalLayout->setMargin(0);
verticalLayout->setSpacing(0);
verticalLayout->addWidget(m_BgFrame);
//将控件按照横向布局排列
QHBoxLayout *layout = new QHBoxLayout(m_BgFrame);
layout->setMargin(0);
layout->setSpacing(0);
layout->addWidget(m_LineEdit);
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、控件效果如下