---

一．前言

播客二连发，本次使用PyQt5模仿b站网页端的一些组件，如：首页banner、一般视频组件、排行榜，撰写本篇，记录下UI设计过程以及一些细节，小组件均已打包好放在了文末，大家一定要看到最后呀~

二．展示

1.banner

本次尽最大程度模仿了b站的banner，学了个几分样。后面有详细介绍banner的设计思路。

1.静图

2.动图

2.一般视频组件

1.静图

默认状态

hover状态

2.动图

3.排行榜

1.静图

默认状态

hover状态

2.动图

三．设计心得(顺序由简到难)

1.排行榜

为什么我把排行榜放在了最简单的呢？是因为这个组件比其他两个组件都简单/笑哭。

这个组件由两部分组成，分别是主体列表和上方悬浮窗口，先说主体：主体由一个QListWidget构成，每个列表项放置自定义的列表组件，列表组件为一个显示排行的QLabel和一个显示标题的QLable组成，把列表组件放置在QListWidgetItem中，最后将每个组件放置到列表中即可。上方悬浮窗口：在创建列表项时，已经创建好每个上方悬浮窗口了，即有几行列表项就有几个上方悬浮窗口，每个悬浮窗口的布局为垂直布局，局部为水平布局，使用QToolButton设置QIcon显示每个图标，使用QLabel配合QPixmap显示图片，这样每个上方悬浮窗口就实例化好了，默认隐藏。UI绘制好后，绑定每个列表组件的enterEvent、leaveEvent方法，比如当鼠标放置在排行为“1”的列表项时，所在的列表项会发出item_hovered_signal信号到主界面，主界面收到此信号后，使用槽函数接收，通过索引确认要展示的悬浮窗口，再通过相对位置计算悬浮窗口要显示的位置，最后把悬浮窗口显示出来，相关代码如下：

2.一般视频组件

这个组件在b站上是支持鼠标移入后播放视频的，本次简化了此组件，鼠标移入后展示相关数据消失、待看按钮展示。

这个组件整体由主封面和hover面板构成，主封面是一个QLabel，放置在一个自定义的QFrame中，QFrame将一个信号绑定了enterEvent、leaveEvent中，即每当鼠标移入或移出QLabel后，都会发射一个信号，这个信号使得我们的hover面板展示。hover面板指的是悬浮在主封面上方的一个固定区域，此区域由上下两部分组成，整体是放在一个QFrame中，右上角放置“待看”按钮，支持点击切换样式的交互，下方则是一个区域叫做信息面板，此区域背景色为黑色透明渐变，方向是自下而上，区域的上方为三个信息分别是播放数量、弹幕数量和视频时长，每当鼠标移入hover面板后，信息面板通过透明度变化的动画进行隐藏，这时状态为隐藏的“待看”按钮透明度发生变化，展示到主界面上，动画的持续时间为450ms，当鼠标移出组件时，动画反向播放。设置动画的相关代码如下：

3.banner

本次banner设计最耗时，因为整体布局没有拿捏好，造成了许多时间的浪费。

banner整体布局为垂直布局，是由主封面和hover面板构成，主封面为QLabel，通过放置QPixmap的方式展示封面。hover面本由背景QFrame和hover区域构成，先说hover区域，它的布局为垂直布局，上方为水平布局，左侧放置banner标题，右侧放置可点击切换的按钮，布局下方放置“点点”，有多少个banner主封面，就生成几个这样的组件，再说背景QFrame，这里涉及到一个问题，如何才能根据主封面设置背景QFrame的背景颜色呢？相关代码附在了下方，大概思路是：将当前QPixmap转化成Image，由于每个QPixmap的大小是固定的，所以可以指定一个QPoint提取这个位置所在像素的颜色，最后转化成RGB格式，通过改变QSS的方式改变背景QFrame的颜色。

四．总结

本次使用PyQt5模仿了B站的一些WEB端小组件，像不像三分样，撰写本篇记录下开发的流程，与大家分享我在设计UI上的心得与体会，办法总比困难多，解决问题的方法也不仅仅只有一个，如果觉得本篇博文对你有帮助，能点个赞么？

五．下载地址

1.一般视频组件
2.排行榜
3.banner