Qt 搜索框

一、前言

　　用戶需要輸入文本時，可使用QLineEdit控件進行編輯輸入，缺點是樣式相對單一。

　　在使用百度搜索輸入框時，發覺比較人性化，故采用QLineEdt+QPushButton通過css樣式實現自定義搜索框控件，包含如下功能：

　　1、可設置占位符文本

　　2、可設置搜索按鈕顯示字符內容、文本顏色

　　3、可設置搜索按鈕為圖標形式或文本形式

　　4、可設置背景色、邊框顏色、邊框圓角角度

　　5、支持回車發送當前文本信號

　　6、支持獲取當前編輯文本內容

　　7、支持設置當前文本內容

　　8、鼠標移入/移出到搜索按鈕上，切換鼠標狀態

二、搜索框實現

　　1、運行環境Qt5.5 VS2013

　　2、自定義搜索框

　　1）繼承QWidget，定義搜索框類SearchLineEdit

　　2）采用水平無間距布局

//用於輸入搜索文本,左對齊
    m_LineEdit = new QLineEdit;
    m_LineEdit->setObjectName("SearchText");
    m_LineEdit->setPlaceholderText(" 請輸入搜索字符");
    m_LineEdit->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
    m_LineEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    connect(m_LineEdit, SIGNAL(editingFinished()), this, SLOT(searchSlot()));

    m_Button = new QPushButton;
    m_Button->setObjectName("SearchButton");
    m_Button->setText(buttonText);
    m_Button->setIconSize(QSize(28, 28));
    m_Button->setFixedWidth(55);
    m_Button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    connect(m_Button, SIGNAL(clicked(bool)), this, SLOT(searchSlot()));
    m_Button->installEventFilter(this);

    m_BgFrame = new QFrame;
    m_BgFrame->setObjectName("frameSearch");

    //設置樣式
    setStyle();

    QVBoxLayout *verticalLayout = new QVBoxLayout(this);
    verticalLayout->setMargin(0);
    verticalLayout->setSpacing(0);
    verticalLayout->addWidget(m_BgFrame);

    //將控件按照橫向布局排列
    QHBoxLayout *layout = new QHBoxLayout(m_BgFrame);
    layout->setMargin(0);
    layout->setSpacing(0);
    layout->addWidget(m_LineEdit);
    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、控件效果如下