PyQt5桌面应用开发（4）：界面设计

已于 2024-07-23 08:17:04 修改
阅读量6.1k 收藏 72
点赞数 8
分类专栏： PyQt5界面设计 Python 文章标签： qt python 开发语言 pyqt5 界面设计
于 2023-03-23 19:49:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/withstand/article/details/129736172
版权

本文目录

PyQt5桌面应用系列

前言

经过需求分析、事件循环和并行设计的介绍，终于还是要写一篇界面设计的内容。很不情愿，因为我这个部分很不擅长，设计的界面很丑很丑。

其实丑并不可怕，关了灯都一样……

首先，我们再回到需求分析的话题。

为什么又是需求分析？

需求分析，这条内裤，始终是要穿上的。

那么界面设计的内裤大概是什么样的呢，有很多人是从美观的角度出发设计出漂亮的界面。我们搬砖的找了一堆支持的理论，还是只能设计出巨丑的界面。一般而言，我们是从用户体验的角度出发，结合软件需求分析的过程来确定界面。
用户体验设计的蜂巢模型
从用户需求这里，基本上就能确定数据报表，从功能需求分析这里，就能确定用户交互。这两个部分最终构成用户界面的开发需求。

  1. 报表界面；
  2. 交互界面。

软件用户界面设计的分析过程
等到报表界面和交互界面确定后，就是利用PyQt5提供的工具来实现。

PyQt5的界面设计元素

在采用PyQt5设计界面时，我们常用和标准的工具就是Designer。如何安装和使用Designer，我实在不耐烦讲。网上教程（视频）和参考貌似比较多。就只是在CSDN上，就一大堆，CSDN搜索pyqt5 designer即可。如果英语好，也有更多参考内容，随便举个栗子。我就大概拉一拉界面设计元素，以作参考。

界面设计元素分类

在Designer里面，PyQt5的界面设计元素分为8个大类：

  1. Layouts：界面布局
  2. Spacers：空间间隔
  3. Buttons：动作按钮
  4. Item Views：数据视图
  5. Item Widgets：数据控件
  6. Containers：空间容器
  7. Input Widgets：输入控件
  8. Display Widgets：显示控件

直接使用的话，就大概是按照这这八类来布置。这个分类，基本上是按照控件的功能来分的。使用的时候，我们还应该根据前面所讲的开发需求来进行进一步的分类。
PyQt的UI设计元素
所以我们的分类是这样的：
a.报表功能类（共18个控件）
b.输入功能类（共22个控件）
c.布局功能类（共16个控件）

控件功能分类
各个具体的控件功能，已经一些教程进行详细的指导。

编译为Python代码使用

转换命令行

我们很随意的假设要展示三组数据（报表1：树表列），然后用Designer画了一个控件。

在这里插入图片描述
然后很随意的存成文件tree_data_view.ui，用下面的命令，就可以把界面文件转化成Python文件。这里增加一个参数-x，就给输出的文件增加一个运行的例子。

pyuic5 .\tree_data_view.ui -o .\tree_data_view.py -x

接下来就能运行，显示界面示例。

python .\tree_data_view.ui -o .\tree_data_view.py -x

在这里插入图片描述
跟我们在Designer里面画的界面一模一样。ui文件的源代码也很简单，很容易看懂。

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>1106</width>
    <height>584</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Item Widgets Demo</string>
  </property>
  <layout class="QHBoxLayout" name="horizontalLayout" stretch="0,0,0">
   <item>
    <widget class="QTreeWidget" name="treeWidget">
     <column>
      <property name="text">
       <string notr="true">1</string>
      </property>
     </column>
    </widget>
   </item>
   <item>
    <widget class="QTableWidget" name="tableWidget"/>
   </item>
   <item>
    <widget class="QListWidget" name="listWidget"/>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

当然转换得到的Python文件更容易读懂。

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file '.\tree_data_view.ui'
#
# Created by: PyQt5 UI code generator 5.15.7
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(1106, 584)
        self.horizontalLayout = QtWidgets.QHBoxLayout(Form)
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.treeWidget = QtWidgets.QTreeWidget(Form)
        self.treeWidget.setObjectName("treeWidget")
        self.treeWidget.headerItem().setText(0, "1")
        self.horizontalLayout.addWidget(self.treeWidget)
        self.tableWidget = QtWidgets.QTableWidget(Form)
        self.tableWidget.setObjectName("tableWidget")
        self.tableWidget.setColumnCount(0)
        self.tableWidget.setRowCount(0)
        self.horizontalLayout.addWidget(self.tableWidget)
        self.listWidget = QtWidgets.QListWidget(Form)
        self.listWidget.setObjectName("listWidget")
        self.horizontalLayout.addWidget(self.listWidget)

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Item Widgets Demo"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

一般而言，我们使用这个代码时，有一个原则：不更改由pyuic5生成的代码。

界面设计信息唯一保存于ui文件中。

大概见到的使用这个报表的方法有3种。

组合使用

我们先看pyuic5 -x定义的使用方法，声明一个Ui_Form，默认的名字总是这个；把一个QWidget作为参数调用Ui_Form.setupUi。

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

要正经的使用我们的报表，可以设计一个按钮，按按钮就显示报表。

from tree_data_view import Ui_Form
from PyQt5 import QtWidgets, QtCore

class TreeData_View(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(TreeData_View, self).__init__(parent)
        # 设置界面
        self.ui = Ui_Form()
        self.ui.setupUi(self)
		
		# 重新定义变量，为了更好地获得IDE的支持，更容易编写程序
        self.treeWidget: QtWidgets.QTreeWidget = self.ui.treeWidget
        self.listWidget: QtWidgets.QListWidget = self.ui.listWidget
        self.tableWidget: QtWidgets.QTableWidget = self.ui.tableWidget
		
		# fake data
        self._init_tree()
        self._init_table()
        self._init_list()

    def _init_tree(self):
        # prepare data for QTreeWidget
        self.treeWidget.setHeaderLabels(["Name", "Value"])
        self.treeWidget.setColumnCount(2)
        self.treeWidget.setColumnWidth(0, 200)
        self.treeWidget.setColumnWidth(1, 200)
        self.treeWidget.setSortingEnabled(True)
        self.treeWidget.setAlternatingRowColors(True)
        self.treeWidget.setSelectionBehavior(QtWidgets.QAbstractItemView.SelectRows)
        self.treeWidget.setSelectionMode(QtWidgets.QAbstractItemView.SingleSelection)
        self.treeWidget.setEditTriggers(QtWidgets.QAbstractItemView.NoEditTriggers)

        root = QtWidgets.QTreeWidgetItem(self.treeWidget)
        root.setText(0, "Root")
        root.setText(1, "Root Value")
        child1 = QtWidgets.QTreeWidgetItem(root)
        child1.setText(0, "Child 1")
        child1.setText(1, "Child 1 Value")
        child2 = QtWidgets.QTreeWidgetItem(root)
        child2.setText(0, "Child 2")
        child2.setText(1, "Child 2 Value")

        grandchild1 = QtWidgets.QTreeWidgetItem(child1)
        grandchild1.setText(0, "Grandchild 1")
        grandchild1.setText(1, "Grandchild 1 Value")
        grandchild2 = QtWidgets.QTreeWidgetItem(child1)
        grandchild2.setText(0, "Grandchild 2")
        grandchild2.setText(1, "Grandchild 2 Value")
        
        self.treeWidget.addTopLevelItem(root)
        self.treeWidget.expandAll()

    def _init_table(self):
        # prepare data for QTableWidget
        self.tableWidget.setColumnCount(2)
        self.tableWidget.setRowCount(3)
        self.tableWidget.setHorizontalHeaderLabels(["Name", "Value"])
        self.tableWidget.setColumnWidth(0, 200)
        self.tableWidget.setColumnWidth(1, 200)
        self.tableWidget.setSortingEnabled(True)
        self.tableWidget.setAlternatingRowColors(True)
        self.tableWidget.setSelectionBehavior(QtWidgets.QAbstractItemView.SelectRows)
        self.tableWidget.setSelectionMode(QtWidgets.QAbstractItemView.SingleSelection)
        self.tableWidget.setEditTriggers(QtWidgets.QAbstractItemView.NoEditTriggers)
        self.tableWidget.setContextMenuPolicy(QtCore.Qt.CustomContextMenu)

        for row in range(3):
            for col in range(2):
                item = QtWidgets.QTableWidgetItem(f"Item {row}, {col}")
                self.tableWidget.setItem(row, col, item)

    def _init_list(self):
        # prepare data for QListWidget
        self.listWidget.setSortingEnabled(True)
        self.listWidget.setAlternatingRowColors(True)
        self.listWidget.setSelectionBehavior(QtWidgets.QAbstractItemView.SelectRows)
        self.listWidget.setSelectionMode(QtWidgets.QAbstractItemView.SingleSelection)
        self.listWidget.addItems([f"Item {i}" for i in range(10)])


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    win = QtWidgets.QMainWindow()
    Form = TreeData_View()

    button = QtWidgets.QPushButton("Show TreeData_View")
    button.clicked.connect(lambda: Form.show())
    win.setCentralWidget(button)

    win.show()
    sys.exit(app.exec_())

这个也是相当直观的。

继承使用方式

我们还可以采用继承的方式，仅有小小的不同。

class TreeData_View(QtWidgets.QWidget, Ui_Form):
    def __init__(self, parent=None):
        super(TreeData_View, self).__init__(parent)
        self.setupUi(self)

        self.treeWidget: QtWidgets.QTreeWidget
        self.listWidget: QtWidgets.QListWidget
        self.tableWidget: QtWidgets.QTableWidget

此时，代码稍微简单一点点，可读性也没有变差。

直接使用ui文件的方法

直接使用ui的方法也很简单，也只要更改一点点代码。

from PyQt5 import QtWidgets, QtCore, uic

class TreeData_View(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(TreeData_View, self).__init__(parent)
        uic.loadUi("tree_data_view.ui", self)
        self.treeWidget: QtWidgets.QTreeWidget
        self.listWidget: QtWidgets.QListWidget
        self.tableWidget: QtWidgets.QTableWidget

这里的loadUi函数的第二个参数是一个QWidget对象，如果不输入这个参数，就直接新建一个QWidget。这里值得注意的是，ui文件中定义的控件，直接就赋给了QWidget对象，与组合方式中略有不同，更类似与多继承的方式。

总结

  1. 8类控件可以分为3大类；
  2. 三种使用ui文件的方式；
  3. 每种方式都差不多，为了IDE支持代码，可以把控件的类型都声明一遍。
大福是小强
关注
  • 8
    点赞
  • 踩
  • 72
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Python+HTML+PyQT5进行桌面开发应用
04-09
PyQT5是Python的一个图形用户界面工具包，它提供了QWebEngineView组件，允许开发者将网页技术融入到桌面应用中，同时通过QWebChannel实现了Python与JavaScript之间的高效交互。 QWebEngineView是PyQT5中的一个关键...
开发第一个基于PyQt5的桌面应用
12-23
在PyQt5中，开发桌面应用的基本步骤是导入必要的模块，实例化`QApplication`，创建`QWidget`窗口，设置窗口属性，添加控件，并进入主事件循环。下面我们将详细探讨这些步骤。 首先，导入所需的模块是至关重要的。在...
PyQt5桌面应用开发（15）：界面动画
withstand的博客
05-18 1881
如果设计的软件用户，其注意力非常需要被吸引，而且他们的注意力是非常有限的，所以动画是非常有必要的。如果是开发者，那么动画就是浪费时间，因为他们的注意力是非常集中的，而且他们的注意力是可以被控制的，所以动画是非常不必要的。QVariantAnimation大概是这样处理插值过程的，用一个QVariant来表达各种值，然后提供一个注册插值函数的接口，每种具体的类型，调用插值函数，就可以得到插值的结果。但是业界老大告诉我，能用动画就用动画，不能用动画的用图片，不能用图片的用条目文字，最后的选择才是公式。
PyQt5| 界面设计 |利用Qt Designer实现简单界面交互
weixin_67437706的博客
06-23 2484
利用qt designer做一个简单的实现交互的小程序
PyQt5桌面应用开发（20）：界面设计结果自动测试（一）
withstand的博客
06-11 913
QTest的职责是模拟UI中的事件，例如鼠标点击、键盘输入等。QSignalSpy可用于监听信号的发射，然后获取信号的参数。unittest测试框架组织自动化测试。HTMLTestRunner将测试结果输出到HTML文件中。下一章将完整编写一个PyQt5程序的测试驱动的开发。
PyQt5桌面应用开发（3）：并行设计
withstand的博客
03-13 910
对一个桌面应用程序来说，有一个无法回避的主题就是并行设计。其主要的原因就是在计算机读取数据或者运行耗时计算时，用户界面必须避免“卡死”的状态。粗略分析，有两种情况。第一种情况是跟IO相关的操作。第二种情况是要消耗大量CPU计算的操作。IO密集型直接用线程（协程）来并行；CPU密集型用进程来并行；QObject对象没法在Python进程库中传递。
PyQt5桌面应用开发（5）：对话框
withstand的博客
05-02 1608
这样可以避免一系列的危险bug（例如，当对话框通过。等方法来显示对话框，这不是PyQt5推荐的方法，官方文档中专门针对这个进行了说明。PyQt5提供了一些内置的对话框，也可以自定义对话框。对话框在GUI中是一个常见的组件，用于和用户进行交互。，所以可以使用通用的布局组件来放置所有的控件，并有所有属性操作，例如。综合上面的例子，可以整一个综合的例子，包括。方法显示对话框，这种情况下，就应该连接。槽，这样就可以在点击按钮时关闭对话框。打开时，删除对话框的父窗口）。信号，以便在对话框关闭时得到通知。
PyQt5桌面应用开发（21）：界面设计结果自动测试（二）
withstand的博客
06-17 322
上一篇简单说了下什么是测试驱动开发（TDD）。这在软件开发行业是比较常规的做法，因为只要不是完美主义强迫症的TDD，对于软件开发的质量管理是很有帮助的，因为TDD把软件开发的质量管理（计划-执行-检查-改进）的循环变得更加可用。但是加上UI后，这个问题就变得微妙起来了。UI是一种与人相关的内容，最好的做法当然是用人作为测试，常规开发过程中，也的确是依靠人力来进行测试。那么采用TDD来开发UI，是否能行呢？答案是肯定的。软件行业，如果说有什么事情是不可行的，那么就只有说别的事情是不可行这个事情是不可行的。万物
PyQt5桌面应用开发（18）：自定义控件界面设计与实现
withstand的博客
05-24 855
本文介绍了重载paintEvent方法，绘制自定义控件的方法。本文再次复习了属性动画的实现方法。自定义控件中需要注意的是，信号与槽函数是比较重要的外部接口。
PyQt5桌面应用开发（19）：事件过滤器
withstand的博客
06-03 841
事件过滤器是一种可以在运行时改变的事件处理机制；只需要实现接口eventFilter函数，就能作为过滤器安装和卸载；Gradient渐变画刷还是不要用了……会被打。
PyQt5桌面应用开发（2）：事件循环
withstand的博客
02-28 2076
坏的用户界面像根本不好笑的笑话，需要解释一下才能让人假笑。（匿名大佬）能看；能用。所以，GUI程序有两个关键部分。显示给用户交互的界面；响应用户输入的机制。能看先放在一边，作为一个攻城狮，最关心还是能用。计算机系统与人类的交互，从计算机系统的发明一开始就是一个非常重要的研究方向。从UI/UX（用户界面/用户体验）这么多年的探索，从纸带/磁带/显示器，到键盘、轨迹球、鼠标、AR、VR，交互方式越来越丰富。
PyQt5的可视化的windows桌面应用程序开发具备完整功能的源代码
05-21
PyQt5的可视化的windows桌面应用程序开发具备完整功能的源代码 最基础的，包括： 界面的设计、事件的响应和绑定、代码的扩展和测试。 具体可以查看对应的博客文章： ...欢迎关注、收藏、下载学习。...
pyqt5 Python 桌面应用程序源码 带数据库
11-16
PyQt5是Python中的一个图形用户界面（GUI）工具包，它提供了丰富的组件和功能来创建复杂的桌面应用。以下是对每个文件及涉及知识点的详细解释： 1. **operation_ui.py**：这个文件可能包含了应用程序的主要操作界面...
python实现好看的GUI界面pyqt5
04-30
PyQT5是其中的一个流行库，它提供了丰富的功能和组件，使得开发者能够创建出美观且功能强大的桌面应用程序。本资源集合了使用PyQT5实现的GUI界面示例，包括不同样式和布局的界面设计，通过提供的截图和代码，可以...
QT--线程
m0_51830537的博客
07-24 1170
【代码】QT--线程。
Qt触摸事件开发总结
最新发布
漫步者
07-24 633
在触摸设备中，触摸屏的触摸事件发送到系统中后，qt系统默认会将触摸事件转换为鼠标事件，但是这并不以为意味着触摸事件消失了，而是在系统中触摸事件、鼠标事件同时存在，如果某个控件打开了手势开关，那么系统将同时存在触摸事件、鼠标事件和手势事件。第一个问题，首先说qt系统中的触摸事件、鼠标事件和手势事件是否可以共存，答案是肯定的，默认情况下qt系统会将触摸事件（touch事件）转换为鼠标事件，也就是说。最近对触摸事件比较感兴趣，研究了一下触摸相关的事件，并在此进行整理，不准确的地方希望大家斧正。
C++客户端Qt开发——Qt窗口（菜单栏）
m0_63596031的博客
07-24 558
Qt窗口是通过类来实现的。是一个为用户提供主窗口程序的类，继承自QWidget类，并且提供了一个预定义的布局。包含一个菜单栏(menu bar)、多个工具栏(tool bars)、多个浮动窗口（铆接部件)(dock widgets、一个状态栏(status bar)和一个中心部件(central widget),它是许多应用程序的基础，如文本编辑器，图片编辑器等。
7、Qt5开发及实列（笔记3-系统操作）
oDuanYanGuHong的博客
07-23 368
说明：此示例包含了基本的常使用的系统操作。
pyqt5界面开发
05-27
好的，我可以为您提供一些关于PyQt5界面开发的基础知识。 PyQt5是一个用于创建GUI应用程序的Python库，它是Qt C++应用程序框架的Python接口。通过PyQt5，您可以使用Python语言创建漂亮和交互式的桌面应用程序。 下面是一些关于PyQt5界面开发的基础知识： 1. 安装PyQt5库 您可以使用pip命令来安装PyQt5库。在终端中输入以下命令： ``` pip install PyQt5 ``` 2. 创建PyQt5应用程序 创建PyQt5应用程序的第一步是创建一个应用程序对象。以下是一个简单的PyQt5应用程序： ```python import sys from PyQt5.QtWidgets import QApplication, QWidget app = QApplication(sys.argv) window = QWidget() window.show() sys.exit(app.exec_()) ``` 3. 使用Qt Designer创建GUI Qt Designer是一个可视化工具，可用于创建GUI应用程序的用户界面。您可以使用它来创建和编辑PyQt5应用程序的用户界面。创建GUI的步骤如下： - 安装Qt Designer - 创建GUI文件 - 在Python中加载GUI文件 4. PyQt5的主要模块 PyQt5包含许多模块，其中一些主要模块包括： - QtWidgets：包含所有标准的Qt GUI部件，如按钮、文本框、标签等。 - QtCore：包含非GUI功能，如时间、文件和目录操作、定时器等。 - QtGui：包含所有与图形相关的功能，如绘图API、颜色、字体等。 以上是关于PyQt5界面开发的一些基础知识，希望对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大福是小强

除非你钱多烧得慌……

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值