PyQt5 Dock Widget 布局修改实现 - 解决空白区域问题

问题分析

根据您提供的图片，执行代码后出现了一个空白区域。这个布局显示了四个表格区域（table A、B、C、D）和一个中间的空白区域。这种情况通常是因为在使用QMainWindow和QDockWidget时，中央区域（central widget）没有被充分利用，或者dock widget的布局没有完全覆盖窗口区域。

解决方案

我将修改代码，使用四个独立的dock widget，并调整它们的布局，以消除中间的空白区域。新的布局将确保四个表格完全覆盖窗口区域，没有空白。

import sys
from PyQt5.QtWidgets import (QApplication, QMainWindow, QDockWidget, 
                             QTableWidget, QTableWidgetItem, QVBoxLayout, 
                             QWidget, QLabel)
from PyQt5.QtCore import Qt, QSize

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        
        # 设置窗口标题和大小
        self.setWindowTitle("四表格Dock Widget布局")
        self.setMinimumSize(800, 600)
        
        # 创建一个透明的中央部件
        central_widget = QWidget()
        central_widget.setMaximumSize(0, 0)  # 最小化中央部件
        self.setCentralWidget(central_widget)
        
        # 创建四个dock widget
        self.create_table_a_dock()
        self.create_table_b_dock()
        self.create_table_c_dock()
        self.create_table_d_dock()
        
        # 设置dock widget的初始位置
        self.setup_dock_layout()
    
    def create_table_a_dock(self):
        """创建表格A的dock widget"""
        # 创建dock widget
        self.dock_a = QDockWidget("表格A", self)
        self.dock_a.setObjectName("TableA")
        self.dock_a.setAllowedAreas(Qt.AllDockWidgetAreas)
        self.dock_a.setFeatures(QDockWidget.DockWidgetMovable | QDockWidget.DockWidgetFloatable)
        
        # 创建表格
        table_a = QTableWidget(10, 5)  # 10行5列的表格
        table_a.setHorizontalHeaderLabels(["列1", "列2", "列3", "列4", "列5"])
        
        # 添加一些示例数据
        for row in range(10):
            for col in range(5):
                table_a.setItem(row, col, QTableWidgetItem(f"A-{row},{col}"))
        
        # 将表格设置为dock widget的内容
        self.dock_a.setWidget(table_a)
        
        # 将dock widget添加到主窗口
        self.addDockWidget(Qt.TopDockWidgetArea, self.dock_a)
    
    def create_table_b_dock(self):
        """创建表格B的dock widget"""
        # 创建dock widget
        self.dock_b = QDockWidget("表格B", self)
        self.dock_b.setObjectName("TableB")
        self.dock_b.setAllowedAreas(Qt.AllDockWidgetAreas)
        self.dock_b.setFeatures(QDockWidget.DockWidgetMovable | QDockWidget.DockWidgetFloatable)
        
        # 创建表格
        table_b = QTableWidget(8, 4)  # 8行4列的表格
        table_b.setHorizontalHeaderLabels(["名称", "数量", "单价", "总价"])
        
        # 添加一些示例数据
        for row in range(8):
            table_b.setItem(row, 0, QTableWidgetItem(f"产品{row+1}"))
            table_b.setItem(row, 1, QTableWidgetItem(f"{row+2}"))
            table_b.setItem(row, 2, QTableWidgetItem(f"{(row+1)*10}"))
            table_b.setItem(row, 3, QTableWidgetItem(f"{(row+1)*(row+2)*10}"))
        
        # 将表格设置为dock widget的内容
        self.dock_b.setWidget(table_b)
        
        # 将dock widget添加到主窗口
        self.addDockWidget(Qt.BottomDockWidgetArea, self.dock_b)
    
    def create_table_c_dock(self):
        """创建表格C的dock widget"""
        # 创建dock widget
        self.dock_c = QDockWidget("表格C", self)
        self.dock_c.setObjectName("TableC")
        self.dock_c.setAllowedAreas(Qt.AllDockWidgetAreas)
        self.dock_c.setFeatures(QDockWidget.DockWidgetMovable | QDockWidget.DockWidgetFloatable)
        
        # 创建表格C
        table_c = self.create_table_c_content()
        
        # 将表格设置为dock widget的内容
        self.dock_c.setWidget(table_c)
        
        # 将dock widget添加到主窗口
        self.addDockWidget(Qt.TopDockWidgetArea, self.dock_c)
    
    def create_table_c_content(self):
        """创建表格C的内容"""
        # 创建表格C
        table_c = QTableWidget(12, 3)  # 12行3列的表格
        table_c.setHorizontalHeaderLabels(["日期", "事件", "状态"])
        
        # 添加一些示例数据到表格C
        for row in range(12):
            table_c.setItem(row, 0, QTableWidgetItem(f"2023-{row+1}-01"))
            table_c.setItem(row, 1, QTableWidgetItem(f"事件{row+1}"))
            table_c.setItem(row, 2, QTableWidgetItem("完成" if row % 2 == 0 else "进行中"))
        
        return table_c
    
    def create_table_d_dock(self):
        """创建表格D的dock widget"""
        # 创建dock widget
        self.dock_d = QDockWidget("表格D", self)
        self.dock_d.setObjectName("TableD")
        self.dock_d.setAllowedAreas(Qt.AllDockWidgetAreas)
        self.dock_d.setFeatures(QDockWidget.DockWidgetMovable | QDockWidget.DockWidgetFloatable)
        
        # 创建表格D
        table_d = self.create_table_d_content()
        
        # 将表格设置为dock widget的内容
        self.dock_d.setWidget(table_d)
        
        # 将dock widget添加到主窗口
        self.addDockWidget(Qt.BottomDockWidgetArea, self.dock_d)
    
    def create_table_d_content(self):
        """创建表格D的内容"""
        # 创建表格D
        table_d = QTableWidget(6, 6)  # 6行6列的表格
        table_d.setHorizontalHeaderLabels(["A", "B", "C", "D", "E", "F"])
        
        # 添加一些示例数据到表格D
        for row in range(6):
            for col in range(6):
                table_d.setItem(row, col, QTableWidgetItem(f"D-{row},{col}"))
        
        return table_d
    
    def setup_dock_layout(self):
        """设置dock widget的布局，形成2x2网格，没有空白区域"""
        # 将dock_c放在dock_a的右侧
        self.splitDockWidget(self.dock_a, self.dock_c, Qt.Horizontal)
        
        # 将dock_b放在dock_a的下方
        self.splitDockWidget(self.dock_a, self.dock_b, Qt.Vertical)
        
        # 将dock_d放在dock_c的下方
        self.splitDockWidget(self.dock_c, self.dock_d, Qt.Vertical)
        
        # 设置初始大小比例
        self.resizeDocks([self.dock_a, self.dock_b], [300, 300], Qt.Vertical)
        self.resizeDocks([self.dock_c, self.dock_d], [300, 300], Qt.Vertical)
        self.resizeDocks([self.dock_a, self.dock_c], [400, 400], Qt.Horizontal)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

代码说明

1. 主要修改点：

   • 将中央部件（central widget）的大小设置为最小（0,0），这样它就不会占用空间。
   • 使用四个独立的dock widget，每个表格一个。
   • 修改了dock widget的特性，只允许移动和浮动，防止用户关闭它们。
   • 调整了dock widget的布局方式，确保它们完全覆盖窗口区域。

2. 布局策略：

   • 首先将dock_a和dock_c水平分割，占据窗口的上半部分。
   • 然后将dock_b放在dock_a下方，dock_d放在dock_c下方。
   • 这样形成了一个完整的2x2网格，没有空白区域。

3. 表格内容创建：

   • 将表格C和表格D的内容创建分别放在了create_table_c_content()和create_table_d_content()方法中。
   • 这样保持了代码的模块化，同时确保每个dock widget都有自己的创建方法。

4. Dock Widget特性：

   • 使用setFeatures()方法限制了dock widget的功能，只允许移动和浮动，防止用户关闭它们导致布局出现空白。
   • 所有dock widget仍然设置了setAllowedAreas(Qt.AllDockWidgetAreas)，允许用户将它们拖动到任何位置。

5. 大小调整：

   • 使用resizeDocks()方法设置初始大小比例，确保四个表格区域大小合适。

使用示例

运行上述代码后，将显示一个包含四个dock widget的窗口，形成2x2网格布局：

1. 左上方是表格A
2. 左下方是表格B
3. 右上方是表格C
4. 右下方是表格D

没有中间的空白区域，四个表格完全覆盖窗口区域。

用户可以：

1. 通过拖动dock widget的标题栏来重新排列它们
2. 双击dock widget的标题栏使其浮动
3. 调整dock widget之间的分隔线来改变它们的大小

优化建议

1. 状态保存与恢复：添加功能来保存和恢复dock widget的布局状态，使用户可以在下次启动应用时恢复自定义布局。

2. 表格样式统一：创建一个通用的表格样式设置方法，应用于所有表格，确保界面风格统一。

3. 表格功能增强：为表格添加排序、筛选、搜索等功能，提高用户体验。

4. 布局锁定选项：添加一个选项，允许用户锁定布局，防止意外改变。

5. 响应式设计：优化界面在不同屏幕尺寸下的表现，确保良好的用户体验。