qt编写网易云界面（5）----搜索框的实现

我们知道当我们点击网易云的搜索框的时候，会出现对应的搜索内容。

如下图：

 滑块可以滑动，选择对应的模块

我实现的部分：

 

 gif显示的还是不是那么好。下面简单实现过程：

主页面使用过滤器，构造函数中：

    ui->line_Search->installEventFilter(this);
    ui->line_Search->setMouseTracking(true);
    searchForm = new SearchForm(); //创建一个新的搜索框
    searchForm->installEventFilter(this);
    searchForm->setMouseTracking(true);
    searchForm->hide();

过滤器

bool AllMain::eventFilter(QObject *watched, QEvent *event)
{
    //当点击查询按钮
    if(watched == ui->line_Search)
    {
        if(event->type() == QEvent::MouseButtonPress)
        {

            int x = ui->line_Search->x();
            int y = ui->line_Search->y();
            int hight = ui->line_Search->height();
            searchForm->setGeometry(x-45+this->x(),y+hight+2+this->y(),searchForm->width(),searchForm->height());
            searchForm->show();
            return true;
        }
        else {
            return false;
        }

    }
    else if (watched == searchForm)
    {
        //当鼠标离开时候，界面隐藏
        if(event->type() == QEvent::Leave)
        {
            searchForm->hide();
            return true;
        }
        else {
            return false;
        }

    }

    return QWidget::eventFilter(watched,event);
}

然于后对SearchForm 界面设计：

 然于后对SearchItem界面设计：

 searchItem.h

#ifndef SEARCHITEM_H
#define SEARCHITEM_H

#include <QWidget>

namespace Ui {
class SearchItem;
}

class SearchItem : public QWidget
{
    Q_OBJECT

public:
    explicit SearchItem(QWidget *parent = nullptr);
    ~SearchItem();
    void setLabNumColor(bool bo); //设置样式
    void setLabNumText(QString str);

    void setLabNameText(QString str);
    void setLabrankingText(QString str);
    void setLabMessageText(QString str);
private:
    Ui::SearchItem *ui;
};

#endif // SEARCHITEM_H

 searchItem.cpp

#include "searchitem.h"
#include "ui_searchitem.h"

SearchItem::SearchItem(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SearchItem)
{
    ui->setupUi(this);
//    ui->lab_num->setFont()
    this->setStyleSheet("QLabel{background:transparent;}"
                        );
    ui->lab_name->setStyleSheet("QLabel{color:rgb(51,51,51);}");
    ui->lab_ranking->setStyleSheet("QLabel{color:rgb(204,204,204);}");
    ui->lab_message->setStyleSheet("QLabel{color:rgb(153,153,153);}");

}

SearchItem::~SearchItem()
{
    delete ui;
}

void SearchItem::setLabNumColor(bool bo)
{
    if(bo == false)
    {
        ui->lab_num->setStyleSheet("QLabel{color:rgb(255,61,61)}");
    }
    else {
        ui->lab_num->setStyleSheet("QLabel{color:rgb(222,222,222)}");
    }
}

void SearchItem::setLabNumText(QString str)
{
    ui->lab_num->setText(str);
}

void SearchItem::setLabNameText(QString str)
{
    ui->lab_name->setText(str);
}

void SearchItem::setLabrankingText(QString str)
{
    ui->lab_ranking->setText(str);
}

void SearchItem::setLabMessageText(QString str)
{
    ui->lab_message->setText(str);
}

searchForm.h

#ifndef SEARCHFORM_H
#define SEARCHFORM_H

#include <QWidget>
#include "searchitem.h"
namespace Ui {
class SearchForm;
}

class SearchForm : public QWidget
{
    Q_OBJECT

public:
    explicit SearchForm(QWidget *parent = nullptr);
    ~SearchForm();
    void setListItem();
private:
    Ui::SearchForm *ui;
};

#endif // SEARCHFORM_H

searchForm.cpp

#include "searchform.h"
#include "ui_searchform.h"

SearchForm::SearchForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SearchForm)
{
    ui->setupUi(this);
    this->setWindowFlag(Qt::FramelessWindowHint);
    this->setStyleSheet("QWidget{border:1px; background:white; border-radius:5px;}"
                        "QScrollBar:vertical{background:transparent; width:8px;}"
                        "QScrollBar::handle:vertical{background:rgb(224,224,224); width:5px; border-radius:3px;}"
                        "QScrollBar::up-arrow:vertical{border:none;}"
                        "QScrollBar::sub-line:vertical{background:transparent;}"
                        "QScrollBar::add-line:vertical{background:transparent;}"
                        );
    ui->label->setStyleSheet("QLabel#label{padding-left:15px;color:rgb(102,102,102);}");
    ui->listWidget->setStyleSheet("QListWidget{border:1px;background:blue;border-radius:5px;}"
                                  "QListWidget::Item{ background:white; height:60px;}"
                                  "QListWidget::Item:hover{background:rgb(246,246,247);}"
                                  );

    setListItem(); //设置样式  ，这里也可以根据搜索的东西，反馈数据

}

SearchForm::~SearchForm()
{
    delete ui;
}

void SearchForm::setListItem()
{
    //这里添加
    QListWidgetItem * newWidget = new QListWidgetItem(ui->listWidget);
    SearchItem * addNew = new SearchItem();
    addNew->setLabNumColor(false);  //设置红色
    ui->listWidget->setItemWidget(newWidget,addNew);

    QStringList num;
    for (int i =0; i<21; i++) {
        num.append(QString::number(i+1));
    }

    QStringList music = {"Lover Song","消愁","请笃信一个梦","摆脱",
                        "不灭的心","深夜一角","假摔","海底",
                        "乌鸦","春风十里","车站","姜子牙",
                        "能解答一切的答案","我的那些年","起风了","一荤一素",
                        "乌鸦","深夜一角","摆脱","消愁"};

    for (int i = 0;i<20;i++) {
        QListWidgetItem * newWidget = new QListWidgetItem(ui->listWidget);
        SearchItem * addNew = new SearchItem();
        addNew->setLabNumText(num[i+1]);
        addNew->setLabNameText(music[i]);
        addNew->setLabrankingText(QString::number(1245321-i*26));
        if(i<2)
        {
            addNew->setLabNumColor(false);  //设置红色
        }
        else {
            addNew->setLabNumColor(true);  //设置黑色
        }
        ui->listWidget->setItemWidget(newWidget,addNew);
    }


}

这就是目前实现的功能，只是简单写qss，后期更加完善的时候，我会把源码给出来。喜欢就关注我博客吧。