QT实现DockWidget内部组件自动换行布局

主要功能概述

当DockWidget窗口大小改变时，内部的按钮能够自动重新排列，以最佳方式利用可用空间。具体表现为：

1. 当水平空间足够时，按钮排成一行

2. 当水平空间不足时，按钮自动换行

程序环境

Python 3.8.9
pyside6==6.1.3

1. pip install pyside6==6.1.3

复制代码

设计结构图解

实现效果

demo代码获取

Gitee：dockwidget-demo

百度网盘：https://pan.baidu.com/s/1PRAjVGBtLQFZkWnZsJ2f2A?pwd=eiti

代码实现

以下是完整的实现代码：

1. import re
2. import sys
3. from PySide6.QtWidgets import QApplication
4. from ui_main_windowtest import *
6. class MainWindow(QMainWindow, Ui_MainWindow):
7.     def __init__(self):
8.         super().__init__()
9.         self.setupUi(self)
10.         self.row = 0    # 行
11.         self.col = 0    # 列
12.         self.buttons_per_row = 0    # 每行按钮数量
13.         self.scrollArea.widget().installEventFilter(self)
15.         # 获取布局参数
16.         self.h_spacing = self.gridLayout_2.horizontalSpacing()
17.         self.v_spacing = self.gridLayout_2.verticalSpacing()
18.         self.margins = self.gridLayout_2.contentsMargins()
20.         # 获取第一个按钮的参考尺寸
21.         if self.gridLayout_2.count() > 0:
22.             first_button = self.gridLayout_2.itemAt(0).widget()
23.             self.button_width = first_button.sizeHint().width() + self.h_spacing
24.             self.button_height = first_button.sizeHint().height() + self.v_spacing + 10 # 根据测试这里+10容差可以防止出现程序无限执行rearrangeButtons方法的情况
26.     def eventFilter(self, obj, event):
27.         """监控ScrollArea内widget的resize事件"""
28.         if event.type() == QEvent.Resize:
29.             # 获取当前可用宽高
30.             available_height = self.scrollArea.widget().size().height()
31.             available_width = self.scrollArea.widget().size().width()
33.             # 检查是否需要重新排列按钮
34.             if available_height > (self.row + 1) * self.button_height and available_width > self.button_width:
35.                 self.rearrangeButtons()
36.             elif available_width > (self.buttons_per_row + 1) * self.button_width and available_height > self.button_height:
37.                 self.rearrangeButtons()
38.         return super().eventFilter(obj, event)
40.     def rearrangeButtons(self):
41.         """重新排列按钮以适应新的窗口大小"""
42.         # 计算新的每行按钮数量
43.         available_width = self.scrollArea.widget().width() - self.margins.left() - self.margins.right()
44.         new_buttons_per_row = max(1, available_width // self.button_width)
46.         # 如果每行按钮数量没有变化，则不需要重新排列
47.         if new_buttons_per_row != self.buttons_per_row:
48.             self.buttons_per_row = new_buttons_per_row
49.         else:
50.             return
52.         # 收集所有按钮
53.         buttons = []
54.         for i in range(self.gridLayout_2.count()):
55.             item = self.gridLayout_2.itemAt(i)
56.             if item.widget():
57.                 buttons.append(item.widget())
59.         # 按按钮名称自然排序（1, 2, 3, ..., 10, 11），不排序每次重启程序顺序都会不一样
60.         buttons.sort(key=lambda btn: [
61.             int(text) if text.isdigit() else text.lower()
62.             for text in re.split('([0-9]+)', btn.objectName())
63.         ])
65.         # 清除当前布局
66.         while self.gridLayout_2.count():
67.             item = self.gridLayout_2.takeAt(0)
68.             if item.widget():
69.                 item.widget().setParent(None)
71.         # 重新排列按钮
72.         for i, button in enumerate(buttons):
73.             self.row = i // self.buttons_per_row
74.             self.col = i % self.buttons_per_row
75.             self.gridLayout_2.addWidget(button, self.row, self.col)
77. if __name__ == "__main__":
78.     app = QApplication(sys.argv)
79.     window = MainWindow()
80.     window.show()
81.     sys.exit(app.exec())

复制代码

代码解析

1. 初始化布局参数

获取了布局的关键参数,这些参数用于准确计算可用空间和按钮尺寸：

1. self.h_spacing = self.gridLayout_2.horizontalSpacing()
2. self.v_spacing = self.gridLayout_2.verticalSpacing()
3. self.margins = self.gridLayout_2.contentsMargins()

复制代码

2. 计算按钮尺寸

我们以scrollArea第一个Qwidget为参考，计算Qwidget的宽度和高度(所有Qwidget宽高必须统一)：

ps:这里变量名写成了button，其实获取的是Qwidget的宽度和高度

1. first_button = self.gridLayout_2.itemAt(0).widget()
2. self.button_width = first_button.sizeHint().width() + self.h_spacing
3. self.button_height = first_button.sizeHint().height() + self.v_spacing + 10

复制代码

注意这里加了10像素的容差，这是为了避免在某些边界情况下出现无限循环的问题。

3. 事件过滤器

通过eventFilter监控ScrollArea内widget的resize事件：

1. def eventFilter(self, obj, event):
2.     if event.type() == QEvent.Resize:
3.         # 获取当前可用宽高
4.         available_height = self.scrollArea.widget().size().height()
5.         available_width = self.scrollArea.widget().size().width()
7.         # 检查是否需要重新排列
8.         if available_height > (self.row + 1) * self.button_height and available_width > self.button_width:
9.             self.rearrangeButtons()
10.         elif available_width > (self.buttons_per_row + 1) * self.button_width and available_height > self.button_height:
11.             self.rearrangeButtons()
12.     return super().eventFilter(obj, event)

复制代码

4. 重新排列按钮

rearrangeButtons方法是核心逻辑所在：

1. def rearrangeButtons(self):
2.     # 计算新的每行按钮数量
3.     available_width = self.scrollArea.widget().width() - self.margins.left() - self.margins.right()
4.     new_buttons_per_row = max(1, available_width // self.button_width)
6.     # 如果每行按钮数量没有变化，则不需要重新排列
7.     if new_buttons_per_row != self.buttons_per_row:
8.         self.buttons_per_row = new_buttons_per_row
9.     else:
10.         return
12.     # 收集并排序按钮
13.     buttons = []
14.     for i in range(self.gridLayout_2.count()):
15.         item = self.gridLayout_2.itemAt(i)
16.         if item.widget():
17.             buttons.append(item.widget())
19.     # 使用正则表达式实现按钮名称的自然排序,可以通过命名的方式强制规定Qwidget组件顺序
20.     buttons.sort(key=lambda btn: [
21.         int(text) if text.isdigit() else text.lower()
22.         for text in re.split('([0-9]+)', btn.objectName())
23.     ])
25.     # 清除当前布局
26.     while self.gridLayout_2.count():
27.         item = self.gridLayout_2.takeAt(0)
28.         if item.widget():
29.             item.widget().setParent(None)
31.     # 重新排列
32.     for i, button in enumerate(buttons):
33.         self.row = i // self.buttons_per_row
34.         self.col = i % self.buttons_per_row
35.         self.gridLayout_2.addWidget(button, self.row, self.col)

复制代码

注意事项

• 按钮尺寸：DockWidget下的所有Qwidget应具有相同的尺寸，否则布局可能会不均匀
  
• 容差设置：代码中的+10像素容差是经验值，可能需要根据实际情况调整
  

END
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！