Qt 搜索框
程序员文章站
2022-03-09 11:00:36
一、前言 用户需要输入文本时,可使用QLineEdit控件进行编辑输入,缺点是样式相对单一。 在使用百度搜索输入框时,发觉比较人性化,故采用QLineEdt+QPushButton通过css样式实现自定义搜索框控件,包含如下功能: 1、可设置占位符文本 2、可设置搜索按钮显示字符内容、文本颜色 3、 ......
一、前言
用户需要输入文本时,可使用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、控件效果如下