qt自定义搜索框（超简单，带效果图）

最新推荐文章于 2023-07-10 17:14:19 发布

一尺丈量

最新推荐文章于 2023-07-10 17:14:19 发布

阅读量1.1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Qt 文章标签： qt qwidget c++ 搜索框 qt自定义

本文链接：https://blog.youkuaiyun.com/u010155023/article/details/50731034

Qt 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Qt自定义带有搜索按钮的搜索框的方法。通过设置按钮样式和布局间距等细节，实现了美观且实用的搜索组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 什么也不要说，先上效果图：

2. 代码

头文件：

#ifndef APPSEARCHLINE_H
#define APPSEARCHLINE_H

#include <QLineEdit>

class AppSearchLine : public QLineEdit
{
    Q_OBJECT
public:
    AppSearchLine(QWidget *parent = 0);
};

#endif // APPSEARCHLINE_H

源文件

#include "appsearchline.h"
#include <QHBoxLayout>
#include <QPushButton>
AppSearchLine::AppSearchLine(QWidget *parent)
    :QLineEdit(parent)
{
    QHBoxLayout *mainLayout = new QHBoxLayout;
    QPushButton *searchBtn = new QPushButton;
    searchBtn->setFixedSize(13,13);
    searchBtn->setCursor(Qt::PointingHandCursor);
    searchBtn->setToolTip(tr("搜索"));
    searchBtn->setStyleSheet("QPushButton{border-image:url(:/image/resources/image/search-icon.png);"
                             "background:transparent;cursor:pointer;}");
    setPlaceholderText(tr("搜索"));
    mainLayout->addWidget(searchBtn);
    mainLayout->addStretch();
    //mainLayout->setContentsMargins(8,8,8,8);
    mainLayout->setContentsMargins(8,0,0,0);
    setTextMargins(13+8+2,0,0,0);
    setContentsMargins(0,0,0,0);
    setLayout(mainLayout);
    setStyleSheet("height:29px;border:1px solid #eaeaea;border-radius:14px;");
}

简单讲一下代码，这里用到的搜索图标大小为13*13，所以那个搜索按钮设置为固定大小13*13，代码中的

mainLayout->setContentsMargins(8,0,0,0);

这里设置的8个长度是图标左边的宽度，这样图标就不会紧挨着搜索框的边框了。还有一句

setTextMargins(13+8+2,0,0,0);

这里13是图标的宽度，8是布局的left margin，也就是上面设置的那个，2是额外的留白，主要是为了美观。

好了，代码就是那么简单。