PyQt5--打造精美、功能强大的桌面应用程序

ui文件转换为python文件

方法一：直接使用命令行转换，demo.ui为保存的ui名，demo.py为ui转换为python的文件。

python -m PyQt5.uic.pyuic demo.ui -o demo.py

 

将py文件转换为ui文件

pyuic5 -o my_gui.py my_gui.ui

 

QLabel案例：使用信号

以下是QLabel控件的常用信号：

• linkActivated: 当控件中包含超链接时，用户单击链接时触发此信号。
• linkHovered: 当用户将鼠标悬停在超链接上时，触发此信号。

import sys
from PyQt5.QtWidgets import QApplication, QLabel
from PyQt5.QtGui import QDesktopServices
from PyQt5.QtCore import QUrl


class Example(QLabel):

    def __init__(self):
        super().__init__()

        self.setText('<a href="https://www.baidu.com/">百度</a>')
        self.setOpenExternalLinks(True)
        # 绑定到指定的事件函数。
        # 鼠标悬浮停在超链接上后触发打开链接！
        self.linkPressed.connect(self.openLink)

    def openLink(self, url):
        QDesktopServices.openUrl(QUrl(url))


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    sys.exit(app.exec_())

 

树（Tree Widget）控件

树控件的简单介绍

树控件（Tree Widget）是一种常见的用户界面控件，它可以用来展示层次化的数据结构，例如文件系统、目录结构、组织结构等等。树控件通常由多个节点（Node）组成，每个节点都可以包含多个子节点。

在PyQt5中，树控件是通过QTreeWidget类来实现的。下面是一些常用的树控件相关的概念：

节点（Node）：树控件中的基本元素，可以包含多个子节点。每个节点通常由一个图标、一段文本和一个可选的复选框组成。节点可以通过QTreeWidgetItem类来创建和操作。
根节点（Root Node）：树控件中的最顶层节点，它没有父节点。一个树控件通常只有一个根节点，但也可以有多个根节点。
子节点（Child Node）：节点的直接下级节点。
父节点（Parent Node）：节点的直接上级节点。根节点没有父节点。
叶节点（Leaf Node）：没有子节点的节点。
复选框（Checkbox）：树控件中每个节点可以包含一个可选的复选框，用来表示节点的选中状态。
项数据（Item Data）：每个节点都可以包含多个数据项，例如文本、图标、颜色等等。这些项数据可以通过QTreeWidgetItem.setData()和QTreeWidgetItem.data()方法来设置和获取。
展开（Expand）：将一个节点的所有子节点显示出来。
折叠（Collapse）：将一个节点的所有子节点隐藏起来。

树控件通常具有以下特点：

层次化结构：树控件中的节点可以是多层次的，可以有多个父节点和多个子节点。
可扩展性：树控件中的节点可以被动态地添加和删除，可以根据需要展开或折叠节点。
交互性：用户可以通过单击节点或复选框来选择或取消选择节点，可以通过双击节点或者右键菜单来进行编辑等操作。
可定制性：树控件中的节点可以设置不同的图标、颜色和字体等属性，以适应不同的需求和样式。
在PyQt5中，可以通过以下方法来操作树控件：

添加节点：可以通过QTreeWidget.addTopLevelItem()方法或QTreeWidgetItem.addChild()方法来添加节点。
删除节点：可以通过QTreeWidget.takeTopLevelItem()方法或QTreeWidgetItem.removeChild()方法来删除节点。
获取节点：可以通过QTreeWidget.topLevelItem()方法或QTreeWidgetItem.child()方法来获取节点。
设置节点属性：可以通过QTreeWidgetItem.setText()、QTreeWidgetItem.setIcon()等方法来设置节点的文本、图标等属性。
选择节点：可以通过QTreeWidget.currentItem()方法获取当前选中的节点，也可以通过QTreeWidgetItem.setSelected

 

树控件综合案例分析

在这个案例中，我们创建了一个名为"组织结构图"的主窗口，并设置了固定的大小。然后，我们创建了一个树控件（QTreeWidget），并设置了树控件的列标题为"姓名"、“职位"和"部门”。

在populateTreeWidget()方法中，我们首先创建了根节点，并将其添加到树控件中。然后，我们创建了两个部门节点（department1和department2）作为根节点的子节点，以及每个部门节点下的员工节点。

每个节点的数据由一个字符串列表表示，其中包括员工的姓名、职位和部门信息。我们使用QTreeWidgetItem类来创建节点，并将其添加为父节点的子节点。

最后，我们展开了根节点，以便在组织结构图中显示默认的部门和员工关系。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QTreeWidget, QTreeWidgetItem

class OrganizationChart(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("组织结构图")
        self.resize(500, 400)

        self.treeWidget = QTreeWidget()
        self.treeWidget.setHeaderLabels(["姓名", "职位", "部门"])

        self.populateTreeWidget()

        self.setCentralWidget(self.treeWidget)

    def populateTreeWidget(self):
        # 创建根节点
        root = QTreeWidgetItem(self.treeWidget, ["总经理", "总经理", ""])

        # 创建部门节点1
        department1 = QTreeWidgetItem(root, ["市场部", "部门经理", ""])
        employee1 = QTreeWidgetItem(department1, ["张三", "销售经理", "市场部"])
        employee2 = QTreeWidgetItem(department1, ["李四", "市场专员", "市场部"])

        # 创建部门节点2
        department2 = QTreeWidgetItem(root, ["技术部", "部门经理", ""])
        employee3 = QTreeWidgetItem(department2, ["王五", "技术总监", "技术部"])
        employee4 = QTreeWidgetItem(department2, ["赵六", "开发工程师", "技术部"])

        # 展开根节点
        self.treeWidget.expandItem(root)

if __name__ == "__main__":
    app = QApplication(sys.argv)

    organizationChart = OrganizationChart()
    organizationChart.show()

    sys.exit(app.exec_())

 

图表主题动画

1.1效果展示

功能：

• 支持不同的主题和动画效果。
• 用户可以通过下拉框选择主题和动画效果，也可以勾选复选框来打开或关闭抗锯齿效果。
• 创建了多个图表，包括区域图、柱状图、折线图、饼图、散点图和样条图。

• 通过QChart，可以实现以下功能：

  创建图表对象：通过实例化QChart类，可以创建一个空的图表对象。
  添加数据系列：使用addSeries方法，可以向图表中添加数据系列。数据系列是图表的基本单位，代表一组相关的数据。
  设置图表标题和标签：使用setTitle和setLabels方法，可以设置图表的标题和标签。
  自定义轴设置：通过QValueAxis和QCategoryAxis类，可以对图表的轴进行自定义设置，包括刻度范围、标签格式、刻度间隔等。
  控制图表样式：通过setTheme方法，可以设置图表的整体样式主题，如亮色、暗色等。
  添加图例：使用legend属性，可以为图表添加图例，显示数据系列的标识和说明。
  支持交互操作：QChart提供了一些交互式操作的功能，如放大缩小、平移、数据点选取等，可以通过QChartView或其他图表视图类来实现。

import random

from PyQt5 import QtChart

try:
    from PyQt5.QtChart import (QAreaSeries, QBarSet, QChart, QChartView,
                               QLineSeries, QPieSeries, QScatterSeries, QSplineSeries,
                               QStackedBarSeries)
    from PyQt5.QtCore import pyqtSlot, QPointF, Qt
    from PyQt5.QtGui import QColor, QPainter, QPalette
    from PyQt5.QtWidgets import QApplication, QMainWindow, QCheckBox, QComboBox, QGridLayout, QHBoxLayout, \
        QLabel, QSizePolicy, QWidget
except ImportError:
    from PyQt5.QtChart import QChartView, QChart, QAreaSeries, QBarSet, QLineSeries, QPieSeries, QScatterSeries, \
        QSplineSeries, QStackedBarSeries  # 错误的导入方式，正确的导入方式在最上面

    QChartView = QtChart.QChartView
    QChart = QtChart.QChart
    QAreaSeries = QtChart.QAreaSeries
    QBarSet = QtChart.QBarSet
    QLineSeries = QtChart.QLineSeries
    QPieSeries = QtChart.QPieSeries
    QScatterSeries = QtChart.QScatterSeries
    QSplineSeries = QtChart.QSplineSeries
    QStackedBarSeries = QtChart.QStackedBarSeries


class ThemeWidget(QWidget):

    def __init__(self, parent=None):
        super(ThemeWidget, self).__init__(parent)

        self.m_charts = []
        self.m_listCount = 3  # 数据个数
        self.m_valueMax = 10  # 每个数据点的最大值
        self.m_valueCount = 7  # 每个数据点的值个数
        self.m_dataTable = self.generateRandomData(self.m_listCount,
                                                   self.m_valueMax, self.m_valueCount)  # 调用generateRandomData方法生成随机数据
        self.m_themeComboBox = self.createThemeBox()  # 主题下拉框
        self.m_antialiasCheckBox = QCheckBox("Anti-aliasing")  # 抗锯齿复选框
        self.m_animatedComboBox = self.createAnimationBox()  # 动画下拉框
        self.m_legendComboBox = self.createLegendBox()  # 图例下拉框。

        self.connectSignals()

        baseLayout = QGridLayout()
        settingsLayout = QHBoxLayout()
        settingsLayout.addWidget(QLabel("Theme:"))
        settingsLayout.addWidget(self.m_themeComboBox)
        settingsLayout.addWidget(QLabel("Animation:"))
        settingsLayout.addWidget(self.m_animatedComboBox)
        settingsLayout.addWidget(QLabel("Legend:"))
        settingsLayout.addWidget(self.m_legendComboBox)
        settingsLayout.addWidget(self.m_antialiasCheckBox)
        settingsLayout.addStretch()
        baseLayout.addLayout(settingsLayout, 0, 0, 1, 3)

        # 创建图表
        chartView = QChartView(self.createAreaChart())
        baseLayout.addWidget(chartView, 1, 0)
        self.m_charts.append(chartView)

        # 创建柱状图
        chartView = QChartView(self.createBarChart(self.m_valueCount))
        baseLayout.addWidget(chartView, 1, 1)
        self.m_charts.append(chartView)

        # 创建折线图
        chartView = QChartView(self.createLineChart())
        baseLayout.addWidget(chartView, 1, 2)
        self.m_charts.append(chartView)

        # 创建饼图
        chartView = QChartView(self.createPieChart())
        chartView.setSizePolicy(QSizePolicy.Ignored, QSizePolicy.Ignored)
        baseLayout.addWidget(chartView, 2, 0)
        self.m_charts.append(chartView)

        # 创建曲线图
        chartView = QChartView(self.createSplineChart())
        baseLayout.addWidget(chartView, 2, 1)
        self.m_charts.append(chartView)

        # 创建散点图
        chartView = QChartView(self.createScatterChart())
        baseLayout.addWidget(chartView, 2, 2)
        self.m_charts.append(chartView)

        self.setLayout(baseLayout)

        # Set the defaults.
        self.m_antialiasCheckBox.setChecked(True)
        self.updateUI()

    def connectSignals(self):
        """
        连接各种信号和槽，当主题下拉框、抗锯齿复选框、动画下拉框和图例下拉框的状态发生变化时，都会触发updateUI方法
        :return:
        """
        self.m_themeComboBox.currentIndexChanged.connect(self.updateUI)
        self.m_antialiasCheckBox.toggled.connect(self.updateUI)
        self.m_animatedComboBox.currentIndexChanged.connect(self.updateUI)
        self.m_legendComboBox.currentIndexChanged.connect(self.updateUI)

    def generateRandomData(self, listCount, valueMax, valueCount):
        random.seed()
        dataTable = []

        for i in range(listCount):
            dataList = []
            yValue = 0.0
            f_valueCount = float(valueCount)

            for j in range(valueCount):
                yValue += random.uniform(0, valueMax) / f_valueCount
                value = QPointF(
                    j + random.random() * self.m_valueMax / f_valueCount,
                    yValue)
                label = "Slice " + str(i) + ":" + str(j)
                dataList.append((value, label))

            dataTable.append(dataList)

        return dataTable

    def createThemeBox(self):
        """
        创建主题下拉框
        :return:
        """
        themeComboBox = QComboBox()

        themeComboBox.addItem("Light", QChart.ChartThemeLight)
        themeComboBox.addItem("Blue Cerulean", QChart.ChartThemeBlueCerulean)
        themeComboBox.addItem("Dark", QChart.ChartThemeDark)
        themeComboBox.addItem("Brown Sand", QChart.ChartThemeBrownSand)
        themeComboBox.addItem("Blue NCS", QChart.ChartThemeBlueNcs)
        themeComboBox.addItem("High Contrast", QChart.ChartThemeHighContrast)
        themeComboBox.addItem("Blue Icy", QChart.ChartThemeBlueIcy)

        return themeComboBox

    def createAnimationBox(self):
        """
        创建动画下拉框
        :return:
        """
        animationComboBox = QComboBox()

        animationComboBox.addItem("No Animations", QChart.NoAnimation)
        animationComboBox.addItem("GridAxis Animations", QChart.GridAxisAnimations)
        animationComboBox.addItem("Series Animations", QChart.SeriesAnimations)
        animationComboBox.addItem("All Animations", QChart.AllAnimations)

        return animationComboBox

    def createLegendBox(self):
        """
        创建图例下拉框
        :return:
        """
        legendComboBox = QComboBox()

        legendComboBox.addItem("No Legend ", 0)
        legendComboBox.addItem("Legend Top", Qt.AlignTop)
        legendComboBox.addItem("Legend Bottom", Qt.AlignBottom)
        legendComboBox.addItem("Legend Left", Qt.AlignLeft)
        legendComboBox.addItem("Legend Right", Qt.AlignRight)

        return legendComboBox

    def createAreaChart(self):
        """
        创建面积图,遍历随机数据，创建上下两个序列，并将它们组合成面积图序列添加到图表中
        :return:
        """
        chart = QChart()
        chart.setTitle("Area chart")

        lowerSeries = None
        y_points = []

        for i, data_list in enumerate(self.m_dataTable):
            upperSeries = QLineSeries(chart)
            for j, (value, _) in enumerate(data_list):
                y = value.y()

                if lowerSeries is None:
                    upperSeries.append(QPointF(j, y))
                    y_points.append(y)
                else:
                    new_y = y_points[i] + y
                    upperSeries.append(QPointF(j, new_y))
                    y_points[j] += new_y

            area = QAreaSeries(upperSeries, lowerSeries)
            area.setName("Series " + str(i))
            chart.addSeries(area)
            lowerSeries = upperSeries

        chart.createDefaultAxes()

        return chart

    def createBarChart(self, valueCount):
        chart = QChart()
        chart.setTitle("Bar chart")

        series = QStackedBarSeries(chart)

        for i, data_list in enumerate(self.m_dataTable):
            set = QBarSet("Bar set " + str(i))
            for value, _ in data_list:
                set << value.y()

            series.append(set)

        chart.addSeries(series)
        chart.createDefaultAxes()

        return chart

    def createLineChart(self):
        chart = QChart()
        chart.setTitle("Line chart")

        for i, data_list in enumerate(self.m_dataTable):
            series = QLineSeries(chart)
            for value, _ in data_list:
                series.append(value)

            series.setName("Series " + str(i))
            chart.addSeries(series)

        chart.createDefaultAxes()

        return chart

    def createPieChart(self):
        chart = QChart()
        chart.setTitle("Pie chart")

        pieSize = 1.0 / len(self.m_dataTable)

        for i, data_list in enumerate(self.m_dataTable):
            series = QPieSeries(chart)
            for value, label in data_list:
                slice = series.append(label, value.y())
                if series.count() == 1:
                    slice.setLabelVisible()
                    slice.setExploded()

            hPos = (pieSize / 2) + (i / float(len(self.m_dataTable)))
            series.setPieSize(pieSize)
            series.setHorizontalPosition(hPos)
            series.setVerticalPosition(0.5)

            chart.addSeries(series)

        return chart

    def createSplineChart(self):
        chart = QChart()
        chart.setTitle("Spline chart")

        for i, data_list in enumerate(self.m_dataTable):
            series = QSplineSeries(chart)
            for value, _ in data_list:
                series.append(value)

            series.setName("Series " + str(i))
            chart.addSeries(series)

        chart.createDefaultAxes()

        return chart

    def createScatterChart(self):
        chart = QChart()
        chart.setTitle("Scatter chart")

        for i, data_list in enumerate(self.m_dataTable):
            series = QScatterSeries(chart)
            for value, _ in data_list:
                series.append(value)

            series.setName("Series " + str(i))
            chart.addSeries(series)

        chart.createDefaultAxes()

        return chart

    @pyqtSlot()
    def updateUI(self):
        theme = self.m_themeComboBox.itemData(
            self.m_themeComboBox.currentIndex())

        if self.m_charts[0].chart().theme() != theme:
            for chartView in self.m_charts:
                chartView.chart().setTheme(QChart.ChartTheme(theme))

            pal = self.window().palette()

            if theme == QChart.ChartThemeLight:
                pal.setColor(QPalette.Window, QColor(0xf0f0f0))
                pal.setColor(QPalette.WindowText, QColor(0x404044))
            elif theme == QChart.ChartThemeDark:
                pal.setColor(QPalette.Window, QColor(0x121218))
                pal.setColor(QPalette.WindowText, QColor(0xd6d6d6))
            elif theme == QChart.ChartThemeBlueCerulean:
                pal.setColor(QPalette.Window, QColor(0x40434a))
                pal.setColor(QPalette.WindowText, QColor(0xd6d6d6))
            elif theme == QChart.ChartThemeBrownSand:
                pal.setColor(QPalette.Window, QColor(0x9e8965))
                pal.setColor(QPalette.WindowText, QColor(0x404044))
            elif theme == QChart.ChartThemeBlueNcs:
                pal.setColor(QPalette.Window, QColor(0x018bba))
                pal.setColor(QPalette.WindowText, QColor(0x404044))
            elif theme == QChart.ChartThemeHighContrast:
                pal.setColor(QPalette.Window, QColor(0xffab03))
                pal.setColor(QPalette.WindowText, QColor(0x181818))
            elif theme == QChart.ChartThemeBlueIcy:
                pal.setColor(QPalette.Window, QColor(0xcee7f0))
                pal.setColor(QPalette.WindowText, QColor(0x404044))
            else:
                pal.setColor(QPalette.Window, QColor(0xf0f0f0))
                pal.setColor(QPalette.WindowText, QColor(0x404044))

            self.window().setPalette(pal)

        checked = self.m_antialiasCheckBox.isChecked()
        for chartView in self.m_charts:
            chartView.setRenderHint(QPainter.Antialiasing, checked)

        options = QChart.AnimationOptions(
            self.m_animatedComboBox.itemData(
                self.m_animatedComboBox.currentIndex()))

        if self.m_charts[0].chart().animationOptions() != options:
            for chartView in self.m_charts:
                chartView.chart().setAnimationOptions(options)

        alignment = self.m_legendComboBox.itemData(
            self.m_legendComboBox.currentIndex())

        for chartView in self.m_charts:
            legend = chartView.chart().legend()

            if alignment == 0:
                legend.hide()
            else:
                legend.setAlignment(Qt.Alignment(alignment))
                legend.show()


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = QMainWindow()
    widget = ThemeWidget()
    window.setCentralWidget(widget)
    window.resize(900, 600)
    window.show()

    sys.exit(app.exec_())

 

PyQt5的动画框架

PyQt5的动画框架是QAbstractAnimation，它是一个抽象类，不能直接使用，需要使用它的子类。它的类结构如下：

QAbstractAnimation：抽象动画，是所有动画的基类，不能直接使用。
QVariantAnimation：值动画，用于改变控件的属性，比如改变控件的位置、大小、颜色等。
QPropertyAnimation：属性动画，用于改变控件的属性，比如改变控件的位置、大小、颜色等。
QAnimationGroup：动画组，可以包含多个动画，可以包含子动画组。
QSequentialAnimationGroup：顺序动画组，按照添加的顺序依次执行动画。
QParallelAnimationGroup：并行动画组，所有动画一起执行。
我们常用的，就是三个子类。

QPropertyAnimation
这个类的作用就是在一个Qt属性上定义一段动画。比如，我们可以在一个按钮上定义一个动画，让它的位置从(0, 0)移动到(100, 100)
。那么这里的属性就是按钮的位置，动画的起始值是(0, 0)，结束值是(100, 100)
。这个属性在PyQt5里面定义的方式是采用@pyqtProperty(type signiture)和@property_name.setter


QAnimationGroup
这个类的两个子类，一个是QSequentialAnimationGroup，一个是QParallelAnimationGroup。前者是顺序执行动画，后者是并行执行动画。

pyqtProperty与插值
其实定义Qt Property在Python里面非常简单，只需要使用@pyqtProperty(type signiture)和@property_name.setter

当前，Qt内置了一些类的插值函数：

• Int
• UInt
• Double
• Float
• QLine
• QLineF
• QPoint
• QPointF
• QSize
• QSizeF
• QColor
• QRectF
• QRect

如果你需要插值其他的类型，包括自定义类型，你必须自己实现插值。你可以注册一个插值函数，这个函数有三个参数：起始值，结束值，当前的进度。

最后就是一个动画的播放速度的，这个在Qt中称为QEasyCurve，它定义了在动画的播放过程中，时间和进度的关系。Qt内置了一些常用的曲线，比如：

Linear：线性
InQuad：初始点附近二次方
OutQuad：结束点二次方
InOutQuad：二次方
也可以我们自己定义

————————————————

原文链接：https://blog.csdn.net/withstand/article/details/130744774

案例：

import sys

from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *


class ParentBackgroundAnimation(QObject):

    def __init__(self, parent: QWidget = None):
        super(ParentBackgroundAnimation, self).__init__(parent)
        self._color = QColor(Qt.transparent)

    @pyqtProperty(QColor)
    def color(self):
        return self._color

    @color.setter
    def color(self, color):
        self._color = color
        self.update()

    def update(self):
        if self.parent is not None:
            win: QWidget = self.parent()
            win.setPalette(QPalette(self._color))


def make_animation_button(win: QWidget, layout: QLayout, animation_group: QAnimationGroup, params):
    x0, y0, w0, h0, x1, y1, w1, h1, curve, label, time_ms = params
    button = QPushButton(label, win)
    if layout is not None:
        layout.addWidget(button)

    animation = QPropertyAnimation(button, b"geometry")
    animation.setDuration(time_ms)
    animation.setStartValue(QRect(x0, y0, w0, h0))
    animation.setEndValue(QRect(x1, y1, w1, h1))

    animation.setEasingCurve(curve)

    button.clicked.connect(animation_group.start)

    animation_group.addAnimation(animation)

    return button, animation


def color_animation(win, animation_group):
    ti = ParentBackgroundAnimation(win)

    animation = QPropertyAnimation(ti, b"color")
    animation.setDuration(2000)
    animation.setStartValue(QColor(255, 0, 0, 100))
    animation.setEndValue(QColor(0, 255, 0, 100))

    animation_group.addAnimation(animation)


if __name__ == "__main__":
    app = QApplication([])

    win = QWidget()

    layout = None

    animation_group = QSequentialAnimationGroup()

    # 包含不同的缓动曲线类型（如线性、五次曲线等）
    curves = [QEasingCurve.Linear, QEasingCurve.OutQuint, QEasingCurve.OutBounce, QEasingCurve.OutElastic,
              QEasingCurve.OutBack, QEasingCurve.OutExpo]
    # 
    curve_labels = ["Linear", "OutQuint", "OutBounce", "OutElastic", "OutBack", "OutExpo"]

    for i, (c, l) in enumerate(zip(curves, curve_labels)):
        sub_animation_group = QParallelAnimationGroup()
        make_animation_button(win, layout, sub_animation_group, (
            100 + i * 200, 10, 150, 80, 100 + i * 200, 600, 150, 80, c, l, 2000
        ))
        color_animation(win, sub_animation_group)
        animation_group.addAnimation(sub_animation_group)

    animation_group.start()

    win.setWindowTitle("Animate buttons.")

    win.resize(1400, 700)

    win.show()

    sys.exit(app.exec_())

很好玩的动画下过，自己复制代码试试吧！！！！！！！！！！！！！！！！

 

界面布局基本支持

布局

布局是设计报表和交互中的重要工作。但是布局的内涵有两个层面上的：总体布局和界面布局。

从报表设计看，应将重要信息置于显眼处，围绕报表目的布局信息分类、汇总等功能以辅助决策。

从交互设计出发，核心功能放显眼位置，关联操作放一起，独立功能分开。实际设计可通过分组等方式实现总体布局。

较低层次是具体界面控件的定位、缩放、对齐等，可通过绝对位置布局（控件位置和尺寸）及相对位置布局（以某控件为基准转换坐标系）描述，更抽象布局可归结为相对和绝对布局算法。

 

 

import random
import sys
from functools import partial
from typing import Union

from PyQt5.QtCore import Qt, QTimer
from PyQt5.QtGui import QFont
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout, \
    QStackedLayout, QComboBox, QLabel, QMainWindow, QDockWidget

# module shared variables
colors = ['yellow', 'red', 'cyan', 'green', 'white',
          'gray', 'orange', 'darkgray', 'transparent']
name_layouts = {'vbox': QVBoxLayout,
                'hbox': QHBoxLayout,
                'grid': QGridLayout,
                'form': QFormLayout,
                'stacked': QStackedLayout}

timer: Union[QTimer, None] = None


# module shared functions
def show_layout(parent: QMainWindow, layout_short_name: str):
    random.shuffle(colors)

    widgets = [QLabel(c, win) for c in colors]

    for i, (c, w) in enumerate(zip(colors, widgets)):
        w.setStyleSheet(f"background-color: {c}")
        w.setAlignment(Qt.AlignCenter)
        w.setFont(QFont("SimHei", 24))

    widget = QWidget(parent)

    if not (layout_short_name in name_layouts):
        raise ValueError(
            f"{layout_short_name} not in {list(name_layouts.keys())}")
    layout = name_layouts[layout_short_name]()

    for i, w in enumerate(widgets):
        if layout_short_name == 'grid':
            layout.addWidget(w, i // 3, i % 3)
        elif layout_short_name == 'form':
            layout.addRow(w.text() + ":", w)
        else:
            layout.addWidget(w)

    global timer
    if timer is not None:
        timer.stop()
        timer = None

    if layout_short_name == 'stacked':
        timer = QTimer(parent)

        def change_layout():
            try:
                layout.setCurrentIndex((layout.currentIndex() + 1) % layout.count())
            except Exception as e:
                pass

        timer.timeout.connect(change_layout)
        timer.start(1000)

    widget.setLayout(layout)
    parent.setCentralWidget(widget)


class QCycleComboBox(QComboBox):
    """
    A combobox that cycles through its items when the mouse wheel is used, or the up/down keys are pressed.
    """

    def __init__(self, parent: QWidget = None) -> None:
        super(QCycleComboBox, self).__init__(parent)

    def wheelEvent(self, event):
        if event.angleDelta().y() > 0:
            self.setCurrentIndex((self.currentIndex() - 1) % self.count())
        else:
            self.setCurrentIndex((self.currentIndex() + 1) % self.count())

    def keyPressEvent(self, e) -> None:
        if e.key() == Qt.Key_Up:
            self.setCurrentIndex((self.currentIndex() - 1) % self.count())
        if e.key() == Qt.Key_Down:
            self.setCurrentIndex((self.currentIndex() + 1) % self.count())
        else:
            return super(QCycleComboBox, self).keyPressEvent(e)


if __name__ == '__main__':
    app = QApplication([])
    win = QMainWindow()
    
    choice = QCycleComboBox(win)
    choice.addItems(name_layouts.keys())
    dock = QDockWidget('Layouts selection', win)
    dock.setWidget(choice)
    dock.setFeatures(QDockWidget.NoDockWidgetFeatures)
    win.addDockWidget(Qt.TopDockWidgetArea, dock)
    choice.currentTextChanged.connect(partial(show_layout, win))
    show_layout(win, 'vbox')

    win.setWindowTitle("Layouts")
    win.setGeometry(100, 100, 800, 600)
    win.show()

    sys.exit(app.exec_())

 

 

定制控件-界面设计

QWidget是Qt中所有界面控件的基类，它提供了一些基本的功能，比如绘图、事件处理、布局管理等。我们可以通过继承QWidget来实现自己的界面控件

要实现一个自定义的界面，就需要做下面几件事情：

继承QWidget类，实现自己的界面控件
重写paintEvent函数，实现绘图
重写resizeEvent函数，实现界面大小变化时的处理，或者设置sizePolicy和sizeHint函数，实现界面大小的控制
重写mousePressEvent、mouseMoveEvent、mouseReleaseEvent函数，实现鼠标事件的处理
重写keyPressEvent函数，实现键盘事件的处理
重写timerEvent函数，实现定时器事件的处理
重写其他事件处理函数，比如focusInEvent、focusOutEvent、enterEvent、leaveEvent等
重写函数showEvent、hideEvent、closeEvent等
重写函数setGeometry、setFixedSize、setMinimumSize、setMaximumSize等
重写函数setStyleSheet、setCursor、setToolTip等
重写setFocusPolicy、setFocus、clearFocus等

功能案例

这个控件，我们希望有两个方面的功能：

1. 显示一个按百分比描述的量，例如电量，体现一种焦虑感;
2. 通过鼠标交互来设置一个百分比显示的量，例如设置电量，体现一种控制感。
3. 能够提供别的控件来设置这个百分比，例如滑块，体现一种便捷感。
4. 能够构成动画，例如电量充电，体现一种活力感。

 

绘制方形图案
这里我们需要绘制一个方形的图案，这个图案的大小是根据控件的大小来自适应的，而且图案的颜色也是根据当前值来自适应的。这里我们需要用到QPainter的几个函数：

QPainter::fillRect：填充矩形
QPainter::setBrush：设置画刷
QPainter::setPen：设置画笔
QPainter::setFont: 设置字体
QPainter::drawText: 绘制字符串

import sys

from PyQt5 import QtCore, QtGui
from PyQt5.QtCore import Qt, pyqtSlot, pyqtProperty, pyqtSignal, QRectF, QSize, QPropertyAnimation
from PyQt5.QtGui import QColor, QBrush, QPainter
from PyQt5.QtWidgets import QWidget, QSizePolicy, QApplication


class PowerBar(QWidget):
    """
    Custom Qt Widget to show a power bar.
    Demonstrating compound and custom-drawn widget.
    """

    def __init__(self, steps=5, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self._value = 0
        self._minimum = 0
        self._maximum = 100

        self.setSizePolicy(
            QSizePolicy.MinimumExpanding,
            QSizePolicy.MinimumExpanding
        )

        if isinstance(steps, list):
            # list of colors.
            self.n_steps = len(steps)
            self.steps = steps

        elif isinstance(steps, int):
            # int number of bars, defaults to red.
            self.n_steps = steps
            self.steps = ['red'] * steps

        else:
            raise TypeError('steps must be a list or int')

        self._bar_solid_percent = 0.8
        self._background_color = QColor('black')
        self._padding = 4.0  # n-pixel gap around edge.

    def paintEvent(self, e):
        painter = QPainter(self)

        brush = QBrush()
        brush.setColor(self._background_color)
        brush.setStyle(Qt.SolidPattern)
        rect = QtCore.QRect(0, 0, painter.device().width(), painter.device().height())
        painter.fillRect(rect, brush)

        # Get current state.
        vmin, vmax = self._minimum, self._maximum
        value = self.value

        # Define our canvas.
        d_height = painter.device().height() - (self._padding * 2)
        d_width = painter.device().width() - (self._padding * 2)

        # Draw the bars.
        step_size = d_height / self.n_steps
        bar_height = step_size * self._bar_solid_percent
        bar_spacer = step_size * (1 - self._bar_solid_percent) / 2

        # Calculate the y-stop position, from the value in range.
        pc = (value - vmin) / (vmax - vmin)
        n_steps_to_draw = int(pc * self.n_steps)

        for n in range(n_steps_to_draw):
            brush.setColor(QtGui.QColor(self.steps[n]))
            rect = QtCore.QRectF(
                self._padding,
                self._padding + d_height - ((1 + n) * step_size) + bar_spacer,
                d_width,
                bar_height
            )
            painter.fillRect(rect, brush)

        # draw text in the midddle of the bar
        painter.setPen(QColor('white'))
        rect = QRectF(
            self._padding,
            self._padding,
            d_width - self._padding,
            d_height - self._padding
        )
        # change font size to 20
        font = painter.font()
        font.setPointSize(18)
        font.setFamily("Arial")
        font.setBold(True)
        painter.setFont(font)
        painter.drawText(rect, Qt.AlignCenter, f"{value}%")
        painter.end()

    def sizeHint(self):
        return QSize(30, 120)

    def _trigger_refresh(self):
        self.update()

    def _calculate_clicked_value(self, e):
        min_val, max_val = self._minimum, self._maximum
        d_height = self.size().height() + (self._padding * 2)
        step_size = d_height / self.n_steps
        click_y = e.y() - self._padding - step_size / 2

        pc = (d_height - click_y) / d_height
        value = min_val + pc * (max_val - min_val)
        if value > self._maximum:
            value = self._maximum
        if value < self._minimum:
            value = self._minimum
        self.value = int(value)

    def mouseMoveEvent(self, e):
        self._calculate_clicked_value(e)

    def mousePressEvent(self, e):
        self._calculate_clicked_value(e)

    def setColor(self, color):
        self.steps = [color] * self.n_steps
        self.update()

    def setColors(self, colors):
        self.n_steps = len(colors)
        self.steps = colors
        self.update()

    def setBarPadding(self, i):
        self._padding = int(i)
        self.update()

    def setBarSolidPercent(self, f):
        self._bar_solid_percent = float(f)
        self.update()

    def setBackgroundColor(self, color):
        self._background_color = QColor(color)
        self.update()

    # signal and slots framework
    valueChanged = pyqtSignal(int)

    @pyqtSlot(int)
    def setValue(self, value):
        self.value = value

    @pyqtProperty(int)
    def value(self):
        return self._value

    @value.setter
    def value(self, value):
        self._value = value
        self.update()
        self.valueChanged.emit(value)


if __name__ == '__main__':
    app = QApplication([])
    volume = PowerBar([QColor(255, 255 - i, 0) for i in range(0, 255, 15)])

    # set volume window without minimize and maximize button
    volume.setWindowFlags(Qt.WindowCloseButtonHint)

    volume.resize(100, 500)
    anim = QPropertyAnimation(volume, b"value")
    anim.setDuration(5000)
    anim.setStartValue(0)
    anim.setKeyValueAt(0.8, 100)
    anim.setEndValue(0)

    volume.show()

    anim.finished.connect(lambda: volume.valueChanged.connect(lambda: volume.setWindowTitle(f"{volume.value}%")))

    anim.start()

    sys.exit(app.exec_())