欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

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)采用水平无间距布局

Qt 搜索框
 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的显示样式

Qt 搜索框
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 搜索框