Python GUI 编程 | QWidget 窗口控件详解 — 层级关系操作

想系统化学习 GUI 编程？看看这个：[Python GUI 编程] PySide & PyQt - 学习手册-CSDN博客

0x01：QWidget 控件层级关系 — 概念简介

“控件的层级” 关系，你可以简单理解为哪个控件在哪个控件的上面，看下图：

上图中的两个控件，蓝色的是我最先创建的，黄色的是我最后创建的，可以发现，后创建的窗口遮住了先创建的窗口，所以，后创建的窗口比较靠近我们，它的层级比较高。

0x02：QWidget 控件层级关系 — 相关方法

基础传送门 ：QWidget 窗口控件详解 — 父子关系扩充

0x0201：lower()

QWidget 提供的 lower() 方法可以将控件的层级降低到最底层。看下面示例代码，“点谁谁下去“：

import sys
from PyQt5.Qt import *
​
class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QWidget Study")
        self.resize(800, 800)
        self.init_ui()
        
    def init_ui(self):
        label1 = QLabel("Welcome to PyQt5", self)
        label1.resize(200, 200)
        label1.setStyleSheet("background-color: red;")
​
        label2 = QLabel("I'm Blue17", self)
        label2.resize(200, 200)
        label2.move(150, 150)
        label2.setStyleSheet("background-color: cyan;")
​
    
    def mousePressEvent(self, event):
        """
        当鼠标点下时，对应位置的子控件层级下降
        """
        if self.childAt(event.pos()) != None: # 如果鼠标点击的位置有子控件
            self.childAt(event.pos()).lower()
​
# 1. 创建一个应用程序对象
app = QApplication(sys.argv)
# 2. 创建窗口控件
window = MyWidget()
# 3. 显示窗口
window.show()
# 4. 应用程序的执行，进入到消息循环
sys.exit(app.exec_())

0x0202：raise_()

QWidget 提供的 raise_() 方法可以将控件的层级提升到最高层。看下面示例代码，“点谁谁上去“：

import sys
from PyQt5.Qt import *
​
class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QWidget Study")
        self.resize(800, 800)
        self.init_ui()
        
    def init_ui(self):
        label1 = QLabel("Welcome to PyQt5", self)
        label1.resize(200, 200)
        label1.setStyleSheet("background-color: red;")
​
        label2 = QLabel("I'm Blue17", self)
        label2.resize(200, 200)
        label2.move(150, 150)
        label2.setStyleSheet("background-color: cyan;")
​
    
    def mousePressEvent(self, event):
        """
        当鼠标点下时，对应位置的子控件层级下降
        """
        if self.childAt(event.pos()) != None: # 如果鼠标点击的位置有子控件
            self.childAt(event.pos()).raise_()
​
# 1. 创建一个应用程序对象
app = QApplication(sys.argv)
# 2. 创建窗口控件
window = MyWidget()
# 3. 显示窗口
window.show()
# 4. 应用程序的执行，进入到消息循环
sys.exit(app.exec_())

和前面演示的，点谁谁下去类似，建议读者自行运行查看结果（笔者节约本地存储就不录 GIF 了，这玩意占的空间比较大）。

0x0203：a.stackUnder(b)

QWidget 的 .stackUnder() 方法可以让控件放于指定控件的下方，看下面这个示例：

import sys
from PyQt5.Qt import *
​
class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QWidget Study")
        self.resize(800, 800)
        self.init_ui()
        
    def init_ui(self):
        label1 = QLabel("Label1", self)
        label1.resize(200, 200)
        label1.setStyleSheet("background-color: red;")
​
        label2 = QLabel("Label2", self)
        label2.resize(200, 200)
        label2.move(150, 150)
        label2.setStyleSheet("background-color: cyan;")
​
        label2.stackUnder(label1)
​
# 1. 创建一个应用程序对象
app = QApplication(sys.argv)
# 2. 创建窗口控件
window = MyWidget()
# 3. 显示窗口
window.show()
# 4. 应用程序的执行，进入到消息循环
sys.exit(app.exec_())