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_OBJECTpublic: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_OBJECTpublic: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，后期更加完善的时候，我会把源码给出来。喜欢就关注我博客吧。

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

qt编写网易云界面（7）----个性推荐界面
前段时间把qt网易云中的轮播图,写了一下,多谢谢建波大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,喜欢我博客,可以关注我,私信我可以提前得到当前代码.(看到必回) 我们目标的网易云界面 ...
qt编写网易云界面（8）----专属定制界面
前段时间把qt网易云中的简单的画廊写了一下,多谢狗哥大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,喜欢我博客,可以关注我,私信我可以提前得到当前代码.(看到必回) 我们目标的网易云界面 ...
qt编写网易云界面（3）----列表框的实现
今天完成列表框的数据,我们来看下,原版网易云部分: 我们要实现的就是左边的部分,标题栏与下面控制栏都已经写完毕.详细可以看我前面播客. 目前完成的部分: 首先要说明一下,里面会有些不同,毕竟我找不到图 ...
qt编写网易云界面（16）---- 源码与感想
前言: 网易云这个项目弄完了,不知道为何,做完后有点点失落感,当时没有考虑到后面会有小伙伴们想要学习这个代码,所以在项目开始的时候做的非常错乱,很多现在看看都是非常低级的问题. 这个项目算是刚接触qt ...
qt编写网易云界面（13）----一键换肤模块
有关一键换肤,我们可以加载不同的qss文件对应其经行改变,这里模仿网易云,一键换肤的功能,直接看写过的部分. 代码这周就上传了,想要代码的朋友,记得关注与点赞,让我们共同进步. 这里我放入了6个模块颜 ...
qt编写网易云界面（6）----个人中心的实现
我们点击网易云的个人中心的时候. 目前我实现的部分: 还是有点区别的,这部分动态图如下: 这里personform.ui布局部分: personform.h #ifndef PERSONFORM_H ...
qt编写网易云界面（10）----排行榜模块
这个模块东西感觉不是很多,其实在,开发的时候细节还是很麻烦的,本以为2个小时绝对搞定,结果搞了半天,不过也想到了很多方式去实现对应的效果,希望大家能够喜欢. 喜欢我,点赞加关注我偶,很快会把整个项目给 ...
基于qt实现网易云界面轮播效果实现
基于qt实现网易云音乐的轮播效果网易云轮播效果前言其实主要是想做点记录吧,本人比较喜欢音乐,所以在上周决定在搭建一个网易云的界面框架,不做不知道,做了才发现qt还有很多的框架是自己不太熟悉的. ...
qml之从零开始编写网易云音乐（二）
完善标题栏的搜索框,效果如下: 搜索栏:自定义组合控件 //搜索Rectangle{id:searchTextEditanchors{left:titleLabel.rightleftMargin: ...

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

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

最新文章

热门文章