1. 程式人生 > >qt自己定義搜索框(超簡單,帶效果圖)

qt自己定義搜索框(超簡單,帶效果圖)

clu blog button jsb 搜索 代碼 source fix color

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,所以那個搜索button設置為固定大小13*13,代碼中的

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

這裏設置的8個長度是圖標左邊的寬度,這樣圖標就不會緊挨著搜索框的邊框了。

另一句

setTextMargins(13+8+2,0,0,0);
這裏13是圖標的寬度。8是布局的left margin,也就是上面設置的那個,2是額外的留白,主要是為了美觀。

好了。代碼就是那麽簡單。

qt自己定義搜索框(超簡單,帶效果圖)