pyqt5制作简单的视频播放器(一):界面制作

刚学不久的pyqt,试着做了个简单又随便还略带一点点low的视频播放器

一、使用Qt designer制作界面(Qt designer安装方法参开别人的博客)

打开Qt designer,会自动弹出图中的弹框,选择了widget,然后直接点击创建即可

pyqt5制作简单的视频播放器(一):界面制作_第1张图片

 

 

进入主界面后再左边的display widget拖一个openGL widge(黑色的那个长方形)到中间来,用于播放视频(这个是最主要的),其余可选择一些按钮,滑动条(用于记录视频播放进度和音量),文本框,下拉框等等,看个人喜好决定吧

pyqt5制作简单的视频播放器(一):界面制作_第2张图片

 把自己需要的元件拖window以后,还要用布局固定好,不然做出来的界面没办法跟着窗口一起伸缩。比较好的布局方法是从单个元件开始,能整体形成一个横框或者竖框的先布局。比如,下图红色框内的五个元件可以形成一排,那么这几个元件一起组成一个水平布局,点击右键>>布局>>水平布局

pyqt5制作简单的视频播放器(一):界面制作_第3张图片

 

 选择了水平布局之后,五个元件久形成了一个整体,没办法直接调整大小。假如需要调整大小,需要在右边的对象查看器找到这个布局(layout),点击上面的horizon layout,再点击对象查看器旁边的属性编辑器。这个时候可以通过调整这个horizon layout的属性来调整里面五个元件之间的大小

pyqt5制作简单的视频播放器(一):界面制作_第4张图片

 

进入属性编辑器之后,粉色部分列表就是这个horizon layout的属性,1表示整个元件整体在上下左右到边界的距离,2表示layout里面各个元件之间的间距,3表示各个元件占layout的水平比例(可通过比例调整每个小元件的大小)

pyqt5制作简单的视频播放器(一):界面制作_第5张图片

 

 如果要改变每个小元件的其他属性,可以点击小元件,点击右边的属性查看器,这时候的属性就会变成小元件的属性(黄色部分),红色框里面可以限制每个元件在被调整的过程中的最大和最小尺寸。

pyqt5制作简单的视频播放器(一):界面制作_第6张图片

 

 属性编辑器往下翻,在stylesheet可以设置每个小元件的其他属性,如字体,填充颜色,填充图片,字体大小等等pyqt5制作简单的视频播放器(一):界面制作_第7张图片

 

 设置好一个水平布局,接下来界面上相当于有一个水平布局,一个水平滑动条和一个widget,刚好组成一个垂直布局,于是重复各个水平布局的操作,最后一步换成垂直布局,结果如下,

pyqt5制作简单的视频播放器(一):界面制作_第8张图片

 接下来通过右边调整垂直布局的属性,在layoutstretch中将比例设置为10,1,1(看个人喜好而定)

pyqt5制作简单的视频播放器(一):界面制作_第9张图片

 这样适应播放器的基础界面就出来了。很多复杂的界面都是通过一个个水平布局个垂直布局慢慢堆叠成复杂的界面的,堆叠完成之后需要设置整体布局。操作如下:点击右边对象查看器,找到最上层的QWidget,这里命名为From,右击选择则布局,再点击垂直布局(因为最后一个布局是垂直布局),此时的布局基本调整好了,播放器的界面填充了大部分窗口,见右图。

pyqt5制作简单的视频播放器(一):界面制作_第10张图片       pyqt5制作简单的视频播放器(一):界面制作_第11张图片

 博主最后制作的播放器界面如下:

pyqt5制作简单的视频播放器(一):界面制作_第12张图片

 (布局的详细内容可以去B站看视频,当时我看的是这个视频:https://www.bilibili.com/video/BV1cJ411R7bP?from=search&seid=6290472405782300250)

界面做好之后点击保存,记得保存在视频播放器py主文件的目录下。

pyqt5制作简单的视频播放器(一):界面制作_第13张图片

好了,界面制作部分先到这里,下一篇再说代码部分吧。

原创文章,禁止转载!

你可能感兴趣的:(Python,pyqt5,qt,dedigner,python,pycharm,pyqt5)