首页 > 其他分享 >Qt编写网易云界面 （2） -----搜索栏及播放控件

Qt编写网易云界面 （2） -----搜索栏及播放控件

时间：2023-08-21 18:34:12浏览次数：39  
标签：控件 Qt image ui images ----- SearchItem border png

今天主要实现网易云界面的下面一行播放器内容，并且完善了搜索框功能，效果如图：

image-20230820073712617

播放音乐用的是Qt原身的内置播放，如果以后学了FFmpeg，可以回来重构一下这部分代码，搜索框等也是写死了的，后期可以换成从服务器上查询，当然目前这个项目大多部分都是写死的，只是为了快速熟悉一下Qt开发。

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

    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 界面设计：

image-20230820100605983

然于后对SearchItem界面设计：

image-20230820100631763

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);
    }
 
 
}

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);
}

这是目前的项目工程：

image-20230820072744086

核心的qss:

/*标题输入框*/
QLineEdit#line_Search
{
    
	background: rgb(225,62,62);
	border-radius: 10px;
	padding: 0px 0px 0px 30px;
	font-size: 14;
	font-family: "微软雅黑";
	color: rgb(241,120,120);
}
 
QLineEdit::pressed#line_Search
{
	font-size: 14;
	font-family: "微软雅黑";
	color:rgb(255,255,255);
	
}
 
 
/*搜索按钮*/
QPushButton#pushButton_search
{
	border-image:url(images/搜索.png);
}
 
 
QPushButton#pushButton_like
{
	border-image:url(images/心动.png);
}
 
QPushButton::pressed#pushButton_like
{
	border-image:url(images/心动2.png);
}
 
/*音乐播放条*/
QSlider::add-page:Horizontal#horizontalSlider_music
{
	background-color: rgb(205,205,205);height:4px;
}
QSlider::sub-page:Horizontal#horizontalSlider_music
{
	background-color: rgb(255,78,78);height:4px;
}
QSlider::handle:Horizontal#horizontalSlider_music
{
	width:14px;border-image: url(images/point_music.png);margin:-4 px -4px;
}
QSlider::groove:Horizontal#horizontalSlider_music
{
	background:rgb(0, 255, 0);height:4px;
}
 
QWidget#widget_tail
{  
 
	border-top-style: solid;
	border-top-color:  rgb(205,205,205);
	border-top-width: 1;
}
 
QPushButton#pushButton_bz
{
	border-image:url(images/标准.png);
}
 
QPushButton#pushButton_voice
{
	border-image:url(images/voice.png);
}
 
QPushButton#pushButton_voice2
{
	border-image:url(images/voice2.png);
}
 
QPushButton#pushButton_listen_all
{
	border-image:url(images/all.png);
 
}
 
QPushButton#pushButton_list
{
	border-image:url(images/listall.png);
	
}
 
QPushButton#pushButton_ci
{
	border-image:url(images/词.png);
	
}
/*上一曲*/
QPushButton#pushButton_life_music
{
	border-image:url(images/上一曲1.png);
}
 
QPushButton::hover#pushButton_life_music
{
	border-image:url(images/上一曲2.png);
}
 
QPushButton::pressed#pushButton_life_music
{
	border-image:url(images/上一曲1.png);
}
 
/*下一曲*/
QPushButton#pushButton_right_music
{
	border-image:url(images/下一曲1.png);
}
 
QPushButton::hover#pushButton_right_music
{
	border-image:url(images/下一曲2.png);
}
 
QPushButton::pressed#pushButton_right_music
{
	border-image:url(images/下一曲1.png);
}
 
/*暂停*/
QPushButton#pushButton_stop
{
	border-image:url(images/暂停.png);
}
 
QLabel#label_pro
{
	border-image:url(images/pro1.png);
}
 
/*音乐条时间*/
QLabel#label_time
{
	color: rgb(175, 175, 175);
}
/*音乐条总时间*/
QLabel#label_time_long
{
	color: rgb(175, 175, 175);
}

标签：控件,Qt,image,ui,images,-----,SearchItem,border,png
From： https://www.cnblogs.com/dwinternet/p/17646764.html

相关文章

  • PostgreSQL-查询每个表的大小
    1、查询数据库中单个表的大小（不包含索引）selectpg_size_pretty(pg_relation_size('表名')); 2、查询所有表的大小并排序（包含索引）SELECTtable_schema||'.'||table_nameAStable_full_name,pg_size_pretty(pg_total_relation_size('"'||table_schema||&#......
  • IDEA-idea_pycharm等关闭双击shitf和双击ctrl的快捷方式
    IDEA-idea_pycharm等关闭双击shitf和双击ctrl的快捷键解决方法很简单全局搜索，搜索double，或者直接进入Settings>AdvancedSettingsAndroidStudio的话可以点这里：把箭头所示的复选框勾上，然后点击“ok”进行保存。这样就不会和Listary软件默认的快捷键冲突了。......
  • RISC-V公测平台发布 · 数据库在RISC-V服务器上的适配评估
    前言上一期讲到YCSB在RISC-V服务器上对MySQL进行性能测试（RISC-V公测平台发布·使用YCSB测试SG2042上的MySQL性能），在这一期文章中，我们继续深入讨论RISC-V+数据库的应用。本期就继续利用HS-2平台来测试数据库软件在RISC-V服务器上的兼容性。参与此次实验的数据库如下：RedisMongo......
  • 国外芯片五大玩家联手组建了另一家RISC-V合资企业
    原文链接：https://www.theregister.com/2023/08/04/chip_companies_risc_v/以下是正文InitialdrivestartsinGermany,pushesautomotiveblueprints最初的驱动从德国开始，推动汽车蓝图TheRISC-Vopeninstructionsetarchitecturegotaboosttodayafteritemergedtha......
  • CSAPP-Shell Lab总结
    提供的工具：parseline：获取参数列表char**argv，返回是否为后台运行命令（true）。clearjob：清除job结构。initjobs：初始化jobs链表。maxjid：返回jobs链表中最大的jid号。addjob：在jobs链表中添加jobdeletejob：在jobs链表中删除pid的job。fgpid：返回当前前台运行job的pid号。getjobp......
  • 高频SQL 50题(基础版): 学生们参加各科测试的次数 | 2023-08-21
    问题学生表:Students+---------------+---------+|ColumnName|Type|+---------------+---------+|student_id|int||student_name|varchar|+---------------+---------+在SQL中，主键为student_id（学生ID）。该表内的每一行都记录有学校一名学生......
  • BGP协议---基于RFC4271标准
    [email protected],2023DescriptionBGP协议---基于RFC4271标准。RFC4271是最新的BGPv4版本的协议。虽然直接看协议是非常晦涩难懂的，而且104页的全英文，真的很难完全阅读下来，但如果理解有出入，还是看RFC最为标准了。第1、2、3章自己就可......
  • 20天 hot 100 速通计划-day13
    回溯131.分割回文串给你一个字符串s，请你将s分割成一些子串，使每个子串都是回文串。返回s所有可能的分割方案。回文串是正着读和反着读都一样的字符串。示例1：输入：s="aab"输出：[["a","a","b"],["aa","b"]]示例2：输入：s="a"输出：[["a"]]提示：1&......
  • Kubernetes编程—— 编写 Operator 的方案 —— 2、基于 sample-controller
    编写Operator的方案——2、基于sample-controllerhttps://github.com/kubernetes/sample-controller 首先我们将基于k8s.io/sample-controller来实现cnat，通过直接使用client-go完成。 sample-controller使用k8s.io/code-generator来生成强类型的客户端、Infor......
  • 数论-同余与扩展欧几里得详解(附例题及代码)
    数论-同余与扩展欧几里得详解(附例题及代码)注意:这篇文章的信息量会有一点多，请耐心看完一.同余1.1同余的定义给定一个正整数m，如果两个整数a和b满足a-b能够被m整除，即(a-b)/m得到一个整数，那么就称整数a与b对模m同余，记作a≡b(modm)简单来说，对于x,y，若x%p=y%p，即x,y对于p的余数......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99