Qt之自定义搜索框

    关于搜索框，大家都经常接触！Qt如何实现一个搜索框？It's so easy!

 

    Google浏览器

    Windows计算机

 

直接上代码：

 

QLabel *forward_path = new QLabel();
QLineEdit *forward_line_edit = new QLineEdit();
QLineEdit *search_line_edit = new QLineEdit();
QToolButton *forward_button = new QToolButton(this);
QToolButton *search_button = new QToolButton(this);

 

forward_button->setToolTip(tr("forward"));
search_button->setToolTip(tr("search"));
forward_line_edit->setPlaceholderText(tr("computer"));
search_line_edit->setPlaceholderText(tr("search"));

forward_path->setPixmap(QPixmap(":/icon/path"));
forward_path->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

 

QIcon forward_icon = QIcon(":/icon/gobtn");
forward_button->setFixedSize(25, 24);
forward_button->setIcon(forward_icon );
forward_button->setIconSize(QSize(16, 16));
forward_button->setAutoRaise(true);
forward_button->setCursor(Qt::ArrowCursor);
forward_button->setStyleSheet("background:transparent;");

 

QIcon search_icon = QIcon(":/icon/search");
search_button ->setFixedSize(25, 24);
search_button ->setIcon(search_icon );
search_button ->setIconSize(QSize(16, 16));
search_button ->setAutoRaise(true);
search_button ->setCursor(Qt::ArrowCursor);
search_button ->setStyleSheet("background:transparent;");

 

forward_path->setFixedSize(20, 24);
forward_line_edit->setMinimumSize(100, 25);
search_line_edit->setMinimumSize(50, 25);

 

QSplitter *search_splitter = new QSplitter(this);
search_splitter->setFrameShape(QFrame::NoFrame);
search_splitter->setHandleWidth(1);

 

QHBoxLayout *forward_layout = new QHBoxLayout();
forward_layout->addWidget(forward_path);
forward_layout->addStretch();
forward_layout->addWidget(forward_button);
forward_layout->setSpacing(0);
forward_layout->setContentsMargins(0, 0, 0, 0);
forward_line_edit->setLayout(forward_layout);

//防止文本框输入内容位于按钮之下
forward_line_edit->setTextMargins(forward_path->width(), 0, forward_button->width(), 0);

 

QHBoxLayout *search_layout = new QHBoxLayout();
search_layout->addStretch();
search_layout->addWidget(search_button);
search_layout->setSpacing(0);
search_layout->setContentsMargins(0, 0, 0, 0);
search_line_edit->setLayout(search_layout);
search_line_edit->setTextMargins(0, 0, search_button->width(), 0);

 

search_splitter->addWidget(forward_line_edit);
search_splitter->addWidget(search_line_edit);
search_splitter->setStretchFactor(0, 8);
search_splitter->setStretchFactor(1, 2);
search_splitter->setChildrenCollapsible(false);

forward_line_edit->setStyleSheet("QLineEdit{border-style:outset; border-top-width:1px; border-left-width:1px; border-bottom-width:1px;border-top-color:gray; border-left-color:gray; border-bottom-color:gray; background:white;}");
search_line_edit->setStyleSheet("QLineEdit{border-style:outset; border-top-width:1px; border-right-width:1px; border-bottom-width:1px;border-top-color:gray; border-right-color:gray; border-bottom-color:gray; background:white;}");
search_splitter->setStyleSheet("QSplitter::handle{background:lightgray;}");

 

效果如下：

OK,关于输入框与按钮的事件就不再多说，实现槽函数，连接对应的信号和槽就行！

注：

    技术在于交流、沟通，转载请注明出处并保持作品的完整性。

    作者：╰☆奋斗ing❤孩子`  原文：http://blog.sina.com.cn/s/blog_a6fb6cc90101dmox.html。