PyQt5实现UI自适应屏幕大小且可缩放

最新推荐文章于 2024-04-15 23:00:21 发布
最新推荐文章于 2024-04-15 23:00:21 发布
阅读量2.7w 收藏 233
点赞数 34
分类专栏： 代码实现 实用工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lavinia_chen007/article/details/118606477
版权

文章目录

代码已上传，欢迎自取：https://blog.csdn.net/lavinia_chen007/article/details/118606477

本文主要的出发点是，开发者本人在24寸大屏幕使用PyQt5开发的UI界面，由于使用了固定的尺寸，在用户14寸的小屏无法显示完全。

解决办法是：能够实现UI根据屏幕分辨率自动计算适合屏幕大小的初始尺寸。这也就意味着，不止界面本身的大小不能够固定尺寸，包括界面中的所有尺寸，都不应该固定尺寸，而应该根据请情况做自适应的调整。

固定尺寸UI

下面我们先实现一个UI界面大小和Widget大小和位置都固定的界面。
这里界面包含了：菜单栏，QListWidget和QLabel
我们通过.resize设置大小，.move设置Widget的位置。

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.title = "固定尺寸UI"
        self.height = 800
        self.width = 1080

        self.resize(self.width,self.height)
        self.wid = QWidget(self)
        self.setCentralWidget(self.wid)
        self.setWindowTitle(self.title)
        self.initUI()

    def initUI(self):
        self.initMenu()
        self.initBrowser()
        self.initImageWindow()

    def initMenu(self):
        openImageFolderAct = QAction("打开",self)
        openImageFolderAct.setStatusTip("选择一个文件夹，开始标注")
        openImageFolderAct.setShortcut("Ctrl+O")

        menubar = self.menuBar()
        fileMenu = menubar.addMenu('&文件')
        fileMenu.addAction(openImageFolderAct)

    def initBrowser(self):
        self.imageBrowser = QListWidget(self)
        self.imageBrowser.resize(200,750)
        self.imageBrowser.move(20,30)
        
    def initImageWindow(self):
        self.imageWindow = QLabel("Hello World!",self)
        self.imageWindow.resize(800,750)
        self.imageWindow.move(250,30)
        self.imageWindow.setStyleSheet("background-color: darkgray;border: 1px solid black;")

获得如下效在这里插入图片描述
看起来没啥问题。

注意，因为所有尺寸位置都是写定了，开发过程中不会发现任何问题，但如果，使用者用的是小屏幕，就很有可能出现显示不全的问题。

好，下面一步一步来改。

要实现不同屏幕大小的自适应，首先要知道屏幕大小。

PyQt5检测屏幕分辨率

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.title = "固定尺寸UI"
        self.height = 800
        self.width = 1080

        #获取显示器分辨率
        self.desktop = QApplication.desktop()
        self.screenRect = self.desktop.screenGeometry()
        self.screenheight = self.screenRect.height()
        self.screenwidth = self.screenRect.width()

        print("Screen height {}".format(self.screenheight))
        print("Screen width {}".format(self.screenwidth))

        self.resize(self.width,self.height)
        self.wid = QWidget(self)
        self.setCentralWidget(self.wid)
        self.setWindowTitle(self.title)
        self.initUI()

添加了一段检测屏幕分辨率并打印的代码，输出为：
在这里插入图片描述
也就是说，在每次初始化的时候，这段代码会自动获取当前屏幕的分辨率，那么下面我们就可以根据这个结果来做想要的自适应了。

PyQt5界面自适应屏幕大小并居中显示

UI界面的宽和高，在想做自适应屏幕大小的时候，可以将其设置为屏幕宽和高的一定比例。假设都按0.7的比例来设置。

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.title = "自适应屏幕大小UI"
        
        #获取显示器分辨率
        self.desktop = QApplication.desktop()
        self.screenRect = self.desktop.screenGeometry()
        self.screenheight = self.screenRect.height()
        self.screenwidth = self.screenRect.width()
		
		self.height = int(self.screenheight * 0.7)
        self.width = int(self.screenwidth * 0.7)

        print("Screen height {}".format(self.screenheight))
        print("Screen width {}".format(self.screenwidth))

        self.resize(self.width,self.height)
        self.wid = QWidget(self)
        self.setCentralWidget(self.wid)
        self.setWindowTitle(self.title)
        self.initUI()

在这里插入图片描述界面是按照屏幕宽和高的0.7来设置了UI界面的宽和高。但我们发现，了这时候Widgets的显示都出了问题。下面就做QWidgets的自适应。

PyQt5部件QWidgets自适UI界面大小

要实现部件自适应UI界面大小，就需要用到PyQt5的layout。
PyQt5有几种layout选择:

  • QHBoxLayout 将部件按照横向排列
  • QVBoxLayout 将部件按照横向排列
  • QGridLayout 在网格布局中排列部件
  • QFormLayout 在两列中排列部件

个人感觉QGridLayout可定制的空间比较大，这边就选用QGridLayout。

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.title = "自适应屏幕大小UI"

        #获取显示器分辨率
        self.desktop = QApplication.desktop()
        self.screenRect = self.desktop.screenGeometry()
        self.screenheight = self.screenRect.height()
        self.screenwidth = self.screenRect.width()

        print("Screen height {}".format(self.screenheight))
        print("Screen width {}".format(self.screenwidth))

        self.height = int(self.screenheight * 0.7)
        self.width = int(self.screenwidth * 0.7)

        self.resize(self.width,self.height)
        self.wid = QWidget(self)
        self.setCentralWidget(self.wid)
        self.setWindowTitle(self.title)
        self.initUI()

    def initUI(self):
        self.layout = QGridLayout()
        #预览四个边都预留20pixs的边界
        self.layout.setContentsMargins(20, 20, 20, 20)
        #网格之间设置10pixs的间隔
        self.layout.setSpacing(10)

        self.initMenu()
        self.initBrowser()
        self.initImageWindow()

        self.statusBar().showMessage("准备就绪")
        self.wid.setLayout(self.layout)

    def initMenu(self):
        openImageFolderAct = QAction("打开",self)
        openImageFolderAct.setStatusTip("选择一个文件夹，开始标注")
        openImageFolderAct.setShortcut("Ctrl+O")

        menubar = self.menuBar()
        fileMenu = menubar.addMenu('&文件')
        fileMenu.addAction(openImageFolderAct)

    def initBrowser(self):
        self.imageBrowser = QListWidget(self)
        # self.imageBrowser.resize(200,750)
        # self.imageBrowser.move(20,30)
        #将imageBrowser放置到网格的第0行，第0列
        self.layout.addWidget(self.imageBrowser,0,0)

    def initImageWindow(self):
        self.imageWindow = QLabel("Hello World!",self)
        # self.imageWindow.resize(800,750)
        # self.imageWindow.move(250,30)
        self.imageWindow.setStyleSheet("background-color: darkgray;border: 1px solid black;")
        #将imageBrowser放置到网格的第0行，第1列
        self.layout.addWidget(self.imageWindow,0,1)

在这里插入图片描述这个效果明显不是我们想要的。下面修改一下设置

def initBrowser(self):
        self.imageBrowser = QListWidget(self)
        # self.imageBrowser.resize(200,750)
        # self.imageBrowser.move(20,30)
        #设置最小的大小，还是以界面大小为基准
        self.imageBrowserWidth = self.width*0.1
        self.imageBrowserHeight = self.height 
        self.imageBrowser.setMinimumSize(self.imageBrowserWidth,self.imageBrowserHeight)
        #将imageBrowser放置到网格的第0行，第0列
        self.layout.addWidget(self.imageBrowser,0,0)

    def initImageWindow(self):
        self.imageWindow = QLabel("Hello World!",self)
        # self.imageWindow.resize(800,750)
        # self.imageWindow.move(250,30)
        self.imageWindow.setStyleSheet("background-color: darkgray;border: 1px solid black;")
    
        #设置最小的大小，还是以界面大小为基准
        self.imageWindowWidth = self.width*0.9
        self.imageWindowHeight = self.height 
        self.imageWindow.setMinimumSize(self.imageWindowWidth,self.imageWindowHeight)
        #将imageBrowser放置到网格的第0行，第1列
        self.layout.addWidget(self.imageWindow,0,1)

在这里插入图片描述这样就能保证UI界面和里面的部件都能根据屏幕分辨率做自适应了。

森尼嫩豆腐
关注
  • 34
    点赞
  • 踩
  • 233
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
基于PyQt5实现界面控件自适应大小
CJW的博客
08-01 2万+
PyQt5 My Environment PyCharm 2019.2 Qt Desinger PyUIC 实现效果 界面控件自适应大小，点击窗口放大后，界面控件大小随之发生变化。 实例1 点击窗口放大后： 实例2 点击窗口放大后： 实现过程 首先需要利用Qt Desinger设计大致的控件布局； 点击窗口layout选择栅格布局（局部和全局自适应均适用，局部自适应最好把控件放到一个frame中，之后进行布局）； 点击minnumsize和maxnumsize调整控件大小，有时候需要利用一
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
09-19
今天小编就为大家分享一篇在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
PyQt5实现UI界面及内部控件自适应屏幕大小显示
08-05
PyQt5实现UI界面及内部控件自适应屏幕大小显示
PyQt5中设置支持高分辨率屏幕自适应
最新发布
weixin_45067242的博客
04-15 273
能让界面上的控件随窗口大小任意缩放的代码
04-19
能让界面上的控件随窗口大小任意缩放的代码onsize,就可以随心所遇的放大与缩小你的对话框了，控件也跟着比例缩小放大。
Pyqt5自适应布局实例
01-20
在pyqt5中要做到自适应布局，必须应用Layout类 下面列出类似于 html 中 float 功能的布局方法： 实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout # 垂直居中 def vcenter_layout(*widgets): vbox = QVBoxLayout() vbox.addStretch() for widget in widgets: vbox.addWidget(widge
PyQt GUI开发初学者：固定尺寸还是全屏自适应？
2301_80794191的博客
01-22 641
在进行PyQt GUI开发时，面对界面尺寸的设计，开发者通常会在固定尺寸和全屏自适应两种方式之间做选择。本文将探讨两者的原理、好处，并提供详细的操作教程，同时指出可能遇到的问题以及解决策略。对于PyQt GUI开发初学者来说，固定尺寸可以快速上手，少有布局问题，是学习阶段的好选择。在实际开发过程中，需要综合考虑目标用户的设备多样性、应用的功能复杂度以及未来的维护和扩展情况。布局管理：在不同的尺寸下保持良好的布局可能需要使用更复杂的布局管理器。用户体验一致：每个用户看到的界面都是一样的，方便操作指导和支持。
pyqt5-F11(其他键位同理)设置全屏
m0_62653695的博客
07-20 453
【代码】pyqt5-F11(其他键位同理)设置全屏。
QtDesigner和pyqt5编程
kessity的博客
10-10 3183
目录一 graphics view简单使用1 概述2 图形视图架构3 场景(The Scene)4 视图(The View)5 图元(The Item)6 Graphics View Framework中的类7 Graphics View 的坐标体系8 图元坐标(Item Coordinates)9 场景坐标(Scene Coordinates)10 视图坐标(View Coordinates)11 坐标映射(Coordinate Mapping)12 主要特点13 常用函数14 使用案例二 QTable
PyQt实现控件随窗口缩放自适应
weixin_52101154的博客
07-04 9301
在pyqt中使用布局时，要想让控件所占布局的比例发生变化，要将尺寸策略sizepolicy改为expending，然后将水平策略或者垂直策略改为对应尺寸，例如两个控件的水平策略改为2:1的比例。 要想整体的控件随窗口缩放实现自适应大小的功能，就要在窗口空白处（即在没有选中控件的地方）单击右键，点击布局，选择水平布局或者垂直布局。这样所有的控件自动和窗口以前实现了统一的布局，所以就实现了窗口控件自适应的功能。 ...
Qt6教程之二(1) 布局 Layouts
世界需要程序员，而我就是其中一员！
02-12 4487
Qt教程之控件篇
PyQt5 实现字体大小自适应分辨率的方法
09-19
今天小编就为大家分享一篇PyQt5 实现字体大小自适应分辨率的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
01-20
from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QLabel, QApplication) from PyQt5.QtGui import QPixmap class Example (QWidget): def __init__(self): super ().__init__ () self.initUI () def initUI...
【pyqt5】纯代码绘制UI界面（基础篇）
sazass的博客
05-19 2万+
首先，我们设计一下我们的UI界面： 界面设计介绍 这是一个简化版的，简单介绍下： 点击一级菜单上的不同按钮，二级菜单会出现相应的按钮，而二级菜单上的按钮就是我们选择的功能。 （1）一级菜单采用QWidget作为主体。在QWidget内添加水平布局，再添加对应按钮。 （2）二级菜单会根据一级菜单的选择出现不同的内容。因此我们采用QStackedWidget多分页窗口作为主体，每一个分页代表着一级菜单中的一个按钮，分页内部添加水平布局，再添加对应功能按钮。 （3）属性栏也会以QStackedWidget为主体
Python QT5设计UI界面教程
yue200403的博客
03-05 2万+
简介：PyQT5开发常用知识，零基础上手，需配合我之前写的博文，配置好QT设计工具和ui文件转py文件的工具。
QT 常用部件 之窗体篇 widget 属性（一）
热门推荐
专注的力量
11-21 5万+
这里介绍的是widget 窗体的属性 最完整的属性请查看qt自带的帮助文档，这里之拿了一部分做说明 窗体属性: object name：物件名称 qwidget：enable 使能本部件 geometry：窗口位置和大小设置 sizepolicy： 1. Fixed: 大小不能改变 2. Minimum: 已经是最小, 不能再被缩小, 但能放大. 3.
python PyQt5学习笔记 Hello World 菜单和工具栏 布局管理 有注释 p1
m0_61634551的博客
05-22 1499
这个按钮是默认选中的。返回值在变量。
pyqt5实现ui自适应屏幕大小且可缩放
07-16
### 回答1： 在PyQt5中实现UI自适应屏幕大小且可缩放，可以通过调整布局和使用相对大小来实现。 首先，我们可以使用Qt的布局管理器来自动调整部件的大小和位置。常用的布局管理器有QHBoxLayout和QVBoxLayout，可以根据需要嵌套使用。通过将部件添加到布局管理器中，然后将布局管理器设置给窗口，窗口将自动根据窗口大小调整部件的大小和位置。 例如，可以使用QVBoxLayout来垂直排列部件，然后使用QHBoxLayout来水平排列部件。通过在布局管理器中添加部件，并将布局管理器设置给窗口，窗口将根据窗口大小调整部件的大小和位置。 其次，可以使用QSizePolicy来设置部件的大小策略。QSizePolicy有很多选项，例如设置部件在水平和垂直方向上的大小是否可伸缩、是否能够自动填充空间等。通过设置适当的大小策略，可以使部件根据窗口大小自动调整大小。 最后，可以实现窗口的缩放功能。可以通过重新实现窗口的resizeEvent()方法来捕捉窗口大小变化的事件，并在事件发生时根据窗口的大小来调整部件的大小。 综上所述，通过适当地使用布局管理器、大小策略和事件处理，可以实现PyQt5中的UI自适应屏幕大小且可缩放的效果。 ### 回答2： 要实现PyQt5的UI自适应屏幕大小且可缩放，可以使用QGridLayout和QHBoxLayout等布局管理器，并且根据窗口大小的变化进行动态调整。 首先，你可以创建一个主窗口，并设置它的布局管理器为QGridLayout。然后，在布局内添加各种控件，比如按钮、文本框等。然后使用setSizePolicy方法来设置控件的尺寸策略，使其在窗口大小变化时能够自动跟随调整。 接下来，可以重写主窗口类的resizeEvent方法，在窗口大小发生变化时进行布局的调整。在该方法中，可以使用QDesktopWidget类来获取屏幕的宽度和高度，并根据当前屏幕的大小动态调整控件的尺寸和位置。 另外，还可以为主窗口添加一个滚动条，以便在窗口过小的情况下，用户可以通过滚动条来查看完整的内容。在布局管理器中添加一个QScrollArea，并将其作为子窗口添加到主窗口中。 此外，你还可以通过添加一个缩放功能来实现UI的缩放。可以使用QGraphicsView来展示界面，并使用QGraphicsView的scale方法来进行缩放。在主窗口中添加一个QGraphicsView，并在resizeEvent中根据窗口大小的变化来调整缩放比例。 通过上述方法，你可以实现PyQt5的UI自适应屏幕大小且可缩放的功能。当窗口大小发生变化时，控件会根据窗口的大小进行自动调整，并且当窗口过小时，可以通过滚动条进行查看。 ### 回答3： 使用PyQt5实现UI自适应屏幕大小并可缩放的方法如下： 1. 设置UI控件的相对大小：在设计UI界面时，使用相对大小来设置控件的尺寸，而不是使用固定的像素值。可以通过设置控件的大小策略（size policy）来实现，如设置为最小尺寸（QSizePolicy.Minimum），即可使控件根据可用空间自动调整大小。 2. 监听窗口大小变化事件：使用`resizeEvent`方法，可以在窗口大小发生变化时触发相应的事件。通过在该方法中重新计算并设置控件的大小，从而实现UI自适应。 ```python def resizeEvent(self, event): # 获取当前窗口大小 window_size = event.size() # 根据窗口大小重新计算并设置控件的大小 # ... # 调用父类的resizeEvent方法 super().resizeEvent(event) ``` 3. 支持缩放功能：可以使用QGraphicsView或QScrollArea等容器控件作为UI界面的根控件，从而实现缩放功能。在该容器控件上加入需要缩放的控件，并使用`setViewportUpdateMode`方法设置为自动更新视口模式，即可允许用户通过手势或鼠标滚轮来进行缩放操作。 ```python # 使用QGraphicsView作为根控件 self.view = QGraphicsView() # 设置自动更新视口模式 self.view.setViewportUpdateMode(QGraphicsView.FullViewportUpdate) # 加入需要缩放的控件 # ... # 设置根控件 self.setLayout(QVBoxLayout()) self.layout().addWidget(self.view) ``` 通过上述方法，可以实现PyQt5的UI自适应屏幕大小且可缩放的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值