pyqt5控件自适应窗口知识点汇总(超详细讲解,持续更新中…)

这篇具有很好参考价值的文章主要介绍了pyqt5控件自适应窗口知识点汇总(超详细讲解,持续更新中…)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文涉及:Windows操作系统,Python,PyQt5,Qt Designer,PyCharm

目录

一、自适应原理 

二、基础布局示例

三、高级布局示例:布局嵌套布局

四、其它特殊控件自适应补充

1. tableWidget

 2. 未完待续…

五、结语


一、自适应原理 

        自适应其实很简单,只要搞懂原理,你就能随心所欲地去布置你的页面了。

        它的基础是布局,有了布局,再在布局中放置各种控件,我们就能让控件实现自适应的效果,即:不管是点击最大化按钮之前还是之后,控件的大小比例都能跟随窗口大小的变化而变化。

        先了解一下布局,主要有以下3种:

水平布局(H) 里面的控件会水平排布,即从左到右放置
垂直布局(V) 里面的控件会垂直排布,即从上到下放置
栅格布局(G) 控件呈网格排布,上下左右都可以放置

        还有其它布局,但是用的不多,本文暂且不提。

二、基础布局示例

         打开Qt Designer,新建一个窗口,拖进一个frame控件,然后通过布局来让其自适应窗口。如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         从右侧的对象查看器中我们可以看到,有2个图标的右下角是打了红色的禁止符号,这就代表当前对象是没有使用布局的。前面我们说到,如果控件没有在布局中,那么它就不能自适应窗口。

        那我们如何让这个frame控件自适应窗口呢?其实很简单,因为我们的目的是让这个frame去自适应窗口,那么我们就将整个窗口作为一个布局容器就行了。

        具体做法就是,将鼠标点击窗口中没有控件的空白处,再点击右键,设置水平布局就可以了。注意:不是灰色区域!步骤如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         设置完成后,你就会发现,frame的大小直接和窗口大小一致了。再观察右侧对象查看器中,frame对象上面的centralwidget的布局图标是正常显示了,刚刚的红色禁止标志已经消失了。如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         是不是这样就结束了?理论上是的,但是还不够完美。如果你仔细观察就会发现,frame的边缘和窗口的蓝色边缘并不是完全贴合的,这就会导致边缘会有一定的空隙,也是比较影响美观的。

        因为在Qt Designer中,布局里是会默认留出空隙的,需要我们自己手动调整一下,调整步骤如下:

        第1步,我们鼠标单击对象查看器中的centralwidget,再单击属性编辑器(或者按组合键:Ctrl + I,字母i,不是1),对centralwidget进行具体的设置。

        第2步,将centralwidget的属性栏滑到最底部,我们会看到有个名叫Layout的属性,然后将里面的数值全部改成0即可。

        如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         属性含义我给大家翻译一下,对照上图了解一下即可,不需要死记硬背:

layoutName(布局名称) horizontalLayout(水平布局)
layoutLeftMargin(布局左边距) 9
layoutTopMargin(布局上边距) 9
layoutRightMargin(布局右边距) 9
layoutBottomMargin(布局底边距) 9
layoutSpacing(布局间距) 6
layoutStretch(布局拉伸) 0
layoutSizeConstraint(布局尺寸约束) SetDefaultConstraint(设置默认约束)

        在Qt Designer中,按组合键:Ctrl + R预览设计,再点击右上角的最大化按钮测试一下,frame也完美和窗口大小保持一致了。如果不方便观察,可以先将frame的背景色设置成任意彩色就能很清楚地去观察了。

        至此,我们的基础示例就完成了。 

三、高级布局示例:布局嵌套布局

        上面的基础示例中只添加了1个布局,但是只要我们的程序稍微复杂一些,都会用到很多控件,每个控件在窗口中的位置也不同。

        比如现在非常大众化的左侧菜单,右侧工作区的布局模式,如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         这种布局模式很经典,也很直观。我们从Qt的角度去看这张图,左侧黑色是一个treeWidget,右侧是一个stackedWidget,然后stackedWidget里面还有很多控件。

        那么以此为例,因为treeWidget和stackedWidget是左右放置的,那么我们就可以用水平布局来设置。

        根据上面的基础示例,我们分别拖拽1个treeWidget和1个stackedWidget进来,然后单击窗口空白处,鼠标右键设置水平布局,最后把Layout属性下的数值全部设置为0,结果如下图所示:(为了便于大家观察,我把stackedWidget的背景设置成浅灰色)

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

        从图中我们看到,菜单栏和工作区在窗口中对半展示了,这个结果并不是我们想要的。所以我们还需要设置一下这2个控件的显示比例,设置方法同上:我们还是单击centralwidget,然后找到Layout属性下的layoutStretch(布局拉伸),默认是“0,0”,现在我们将其设置为“1,3”。

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

          这里的布局拉伸,你可以理解为拉伸比例,00就是对半展示,13就是1比3展示。修改数值后,我们惊喜地发现界面变成了下面这样:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

        展示的比例是基本符合我们的要求了,但是按组合键Ctrl + R预览,再点击最大化按钮后发现,界面变成了下面这样:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

        还是不对劲,最大化之后虽然菜单栏和工作区的比例还是1比3,但是这个比例对于菜单来讲还是太宽了,显得菜单上的字很密很小。当然,菜单上的字体大小和间距我们也是可以调整的,但是1比3的比例对于菜单栏上最长只有4个字的项来说,还是太宽了。

        所以我们的目的就很明显了,就是要将菜单栏的宽度再缩小一些。宽度缩小,这就涉及到具体数值的修改了,而刚刚的比例修改只能是整数,不能精确到小数点后几位。

        那么具体怎么做呢?方法如下:

         因为我们只是对菜单栏修改,所以在对象查看器中,我们鼠标单击选中treeWidget,按组合键Ctrl + I或者单击底部的属性编辑器进入treeWidget的具体属性界面,找到一项名为maximumSize(最大尺寸)下的宽度后面的16777215修改成180。如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         修改好菜单栏的最大宽度之后,我们再预览一下,发现菜单栏的宽度被固定了,只有垂直高度是随窗口大小的变化而变化的。这样的结果就基本符合我们的预期了。

        看到这里,可能有小伙伴会问:哎,不对呀角角,你这第三个标题上不是写着布局嵌套布局吗?怎么只是比基础示例多了个控件而已?

        别急哈~ 我下面要讲的才是重点哦~

        通过刚刚的例子,相信大家对水平布局已经很熟悉了。现在呢,咱们可以思考一下:是否可以将某一个布局作为控件再放到窗口的水平布局中去呢?答案是肯定的。

        我们可以看到,上面我放的一张网图中,工作区中是有很多大大小小的控件在其中的。所以我们在工作区即stackedWidget中,还要再加布局才行。

        我们再拖拽3个frame到stackedWidget中,然后按Ctrl键不放依次选中3个frame并设为水平布局,如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         预览一下我们发现,窗口最大化之后底部的2个菜单栏和工作区的大小是正常变化的,但是这3个frame却是纹丝不动。

        动脑筋想想,是不是哪里少了一步?

        噢!对了,之前在设置底部2个控件的时候是不是在窗口的空白处又设置了一下水平布局?那我们依样画葫芦再在stackedWidget的空白处鼠标右键加一个水平布局,发现结果变成下面这样……

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         这肯定不是我们想要的,那是不是因为控件太少了,所以这3个frame才把stackedWidget里面全占满了呢?并不是,如果我们再拖拽控件进去,依然是这样排布,因为这3个frame外面最邻近的布局是水平布局,只要在水平布局里面,放再多控件也还是从左到右排布的。

        那么现在有2种解决办法:

        第1种,是选中frame外的水平布局右键修改成栅格布局,这样上下左右就都能放控件了,也能正常随着窗口大小自适应了,这个也算是布局嵌套布局了,但是只嵌套了一层而已。

        第2种,是打破布局,即删除当前窗口中所有的布局,然后再重新布局。操作方法:鼠标单击窗口空白处,点击鼠标右键,单击布局,找到打破布局再点击即可。如下图所示:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         这样,所有的布局就会被一键全部删除,控件也会被随机摆放在窗口中,大小也有所变化。但是别慌,打破布局之后,我们先观察一下下面这张网图:

pyqt5控件随窗口变化,PyQt 必知必会,qt,python,pycharm,pyqt,前端

         区域①是一个菜单,这是单独的1个treeWidget控件,由于它的高度是和窗口的宽度是相等的,所以我们是不是就可以将区域②③④看做一个整体和区域①做一个水平布局?

        然后再观察②③④,这3个是不是上下排布的?所以我们把这3个设置成垂直布局。再然后,我们看到区域③里面是不是又有3个frame是水平排布,那再把这3个设置到一个水平布局中。

        因为左边只有1个菜单,右边的控件是很多的,所以我们先把右边的控件从上到下依次设置进布局中,然后选中②③④的布局,再右键给外面套一个垂直布局。

        最后我们选中菜单栏,然后再选中工作区最外面的垂直布局,再右键套一个水平布局,这样就大功告成啦!

        需要注意的是:如果窗口中需要多层布局时,一定要按照从里到外、从小到大的顺序设置布局。

四、其它特殊控件自适应补充

1. tableWidget

        这个是表格控件,我之前在使用时,发现它在设置布局之后,控件的大小虽然是跟随窗口大小改变的,但是表格里的数据却不是自适应控件体的,这个需要在业务逻辑代码中加一句如下代码:

self.tableWidget.horizontalHeader().setSectionResizeMode(QHeaderView.Interactive | QHeaderView.Stretch)

 2. 未完待续…

 

五、结语

        文章总字数近4000字,全部纯手打,难免有缺漏之处,还请大家见谅。

        如果对你有用,期待你一个随手的小赞,角角感激不尽~

        如果你对文章的内容仍存在疑惑和不解,欢迎你在评论区留言,角角会第一时间回复哦~文章来源地址https://www.toymoban.com/news/detail-782840.html

到了这里,关于pyqt5控件自适应窗口知识点汇总(超详细讲解,持续更新中…)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JVM知识点汇总(2)

    目录 一. 垃圾回收的优点和原理. 并考虑两种回收机制 二. 垃圾回收器的基本原理是什么? 垃圾回收器可以马上回收内存吗? 有什么办法主动通知虚拟机进行垃圾回收? 三. Java 中会存在内存泄露嘛? 请简单描述 四.Ststem.gc() 和 Runtime.gc() 会做什么事情 五. finalize() 方法是什么时候

    2024年02月12日
    浏览(41)
  • CSS知识点汇总(四)

    避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。 避免!important,可以选择其他选择器 尽可能的精简规则,合并不同类里的重复规则 1. 概念: 将多个小图片拼接到一个图片中。通过 backgro

    2024年02月11日
    浏览(35)
  • react知识点汇总一

    以下是一些React中经典的知识点: React是一个由Facebook开发的UI框架,用于构建单页面应用程序。它的特点和优势包括: 组件化 :React的应用程序主要由多个组件组成,每个组件都封装了自己的逻辑和状态,使得代码结构更加清晰。 虚拟DOM :React使用虚拟DOM来提高渲染效率和

    2024年02月10日
    浏览(89)
  • Vue知识点汇总【持更】

    目录 1 vue的两个特性 1.1 数据驱动视图 1.2 双向数据绑定  2 MVVM工作原理 3 vue 的指令 3.1 内容渲染指令 3.2 属性绑定指令 3.3 事件绑定指令 3.4 事件修饰符  3.5 按钮修饰符 3.6 双向数据绑定指令 3.7 条件渲染指令 3.8 列表渲染指令  4 vue 的生命周期和生命周期函数  4.1 生命

    2024年02月15日
    浏览(23)
  • C语言知识点汇总

    C语言知识点保姆级总结,这不得进你的收藏夹吃灰?! 拖了很久的C语言所学知识的简单小结,内容有点多,第一次总结也可能有错误或者不全面,欢迎随时补充说明! ​ 用不同数据类型所定义的变量所占空间大小不一样,定义的变量不是保存于数据类型中,而是因为只有

    2024年01月23日
    浏览(35)
  • CSS知识点汇总(二)

    选择器有: 可继承: font-size font-family color, ul li dl dd dt ; 不可继承 : border、 padding、 margin、 width、 height ; 优先级: 优先级就近原则,样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !importantidclasstag, impoertant比内联优先级高 CSS3新增伪类举例: p:first-of-

    2024年02月11日
    浏览(29)
  • CSS知识点汇总(五)

    什么是 Fouc(文档样式短暂失效)? 在引用 css 的过程中,如果方法不当或者位置引用不对,会导致某些页面在 windows 下的 ie 出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称 FOCU。 原因大致为: 使用 import 方法导入样式表 将样

    2024年02月11日
    浏览(34)
  • 计算机基础知识点汇总

    1、指令是指示计算机执行某种操作的命令,包括操作码和地址码两部分。 2、目前常见的指令系统有复杂指令系统(CISC)和精简指令系统(RISC)。 3、计算机的工作过程:取指令、分析指令、执行指令。 4、未配置任何软件的计算机叫裸机,注意不是指安装过操作系统的计算

    2024年02月10日
    浏览(37)
  • iOS练手项目知识点汇总

    Objective-C是一种面向对象的编程语言,它支持元编程。元编程是指编写程序来生成或操纵其他程序的技术。 Objective-C中,元编程可以使用Objective-C的动态特性来实现。例如可以使用Objective-C的运行时函数来动态地创建类、添加属性和方法等等。 Objective-C是一种动态编程语言,它

    2024年02月10日
    浏览(43)
  • 系统分析师知识点汇总

    目录 1.计算机组成 1.1计算机组成与分类 1.1.1计算机的组成 1.2.1主存储器(内存) 1.2.2辅助存储器(外存磁盘如硬盘) 1.2.3Cache缓存 1.3输入输出接口 1.3.1输入输出方式 1.3.2总线和接口 1.4各种体系结构 1.4.2流水线技术 1.4.3并行处理 1.4.4互联网络 2.操作系统 2.1操作系统的类型与结

    2023年04月08日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包