苏州移动网站建设,html网站免费下载,wordpress 本地ajax,济南历山北路网站建设文章目录 一#xff0e;前言二#xff0e;展示1.banner1.静图2.动图 2.一般视频组件1.静图2.动图 3.排行榜1.静图2.动图 三#xff0e;设计心得(顺序由简到难)1.排行榜2.一般视频组件3.banner 四#xff0e;总结五#xff0e;下载地址 一#xff0e;前言
播客二连发前言二展示1.banner1.静图2.动图 2.一般视频组件1.静图2.动图 3.排行榜1.静图2.动图 三设计心得(顺序由简到难)1.排行榜2.一般视频组件3.banner 四总结五下载地址 一前言
播客二连发本次使用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
