探究方式

# 基于 PyQt5 实现分组列表滚动吸顶效果
在很多应用场景中，例如 QQ 好友列表，我们都需要展示大量分组数据，同时希望在滚动时分组标题始终固定显示在顶部，提升用户体验。本文将详细介绍如何利用 PyQt5 实现类似效果——在滚动区域中，当前分组标题始终显示在最上面，当滚动到下一个分组时，自动切换为新的标题。

![示例效果](https://blog.lc044.love/static/img/cd8fb2f344ff20e153cdba66e6e4ba72.demo2.gif)

---

## 一、背景与需求
在实际项目中，我们经常会遇到展示大量控件的情况，尤其是需要按照分组进行展示时。如果直接将所有控件堆叠在一个固定高度的窗口中，很容易导致信息密集、查找困难。为此，我们常常采用 `QScrollArea` 来实现内容的滚动展示。

**需求主要包括：**

1. **标题吸顶效果**  
当用户向下滚动页面时，分组标题始终固定在窗口上方，让用户清楚当前所在分组。
2. **分组切换交互**  
当滚动到下一个分组时，当前分组的标题自动消失，替换为新分组的标题。

为此，我们需要：

+ 获取当前滚动区域的左上角坐标；
+ 监听滚动事件，动态判断各个分组的可见情况；
+ 根据可见性更新吸顶标题的内容和显示状态。

---

## 二、设计思路
整个实现主要分为两部分：

1. **分组控件设计**  
每个分组由一个按钮（显示分组标题）和一个 `QListWidget`（展示分组中的项）组成。按钮具备展开/折叠功能，通过调整 `QListWidget` 的高度实现显示或隐藏分组内容。
2. **吸顶逻辑处理**  
主窗口中，所有分组控件放置于一个 `QScrollArea` 内。利用滚动条的 `valueChanged` 信号捕捉滚动事件，计算各分组控件在 `viewport` 中的位置，并判断哪个分组处于顶部。当检测到顶部分组后，更新一个单独的固定按钮（吸顶控件）的文本显示当前分组标题。

这种设计既能满足吸顶效果，又兼顾了分组数据的展开与折叠需求。

---

## 三、代码解析
下面对关键代码进行详细说明：

### 1. 分组控件类 `FriendGroupWidget`
```python
class FriendGroupWidget(QWidget):
    def __init__(self, group_name, friends):
        super().__init__()
        self.group_name = group_name
        self.friends = friends
        self.expanded = False  # 默认折叠状态

        # 布局包含一个按钮和一个列表
        self.layout = QVBoxLayout(self)
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.button = QPushButton(group_name)
        self.button.setCheckable(True)
        self.button.setChecked(False)
        self.button.clicked.connect(self.toggle_list)

        # 创建 QListWidget 存储好友，并关闭其滚动条
        self.list_widget = QListWidget()
        self.list_widget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        for friend in friends:
            self.list_widget.addItem(friend)
        self.list_widget.setFixedHeight(0)
        self.layout.addWidget(self.button)
        self.layout.addWidget(self.list_widget)
        self.list_widget.setVerticalScrollMode(QtWidgets.QAbstractItemView.ScrollPerPixel)

    def toggle_list(self):
        if self.expanded:
            # 折叠：高度设为 0
            self.list_widget.setFixedHeight(0)
            self.expanded = False
        else:
            # 展开：计算 QListWidget 展开所需的总高度
            count = self.list_widget.count()
            if count > 0:
                rowHeight = self.list_widget.sizeHintForRow(0)
                totalHeight = rowHeight * count + 2 * self.list_widget.frameWidth()
            else:
                totalHeight = 0
            self.list_widget.setFixedHeight(totalHeight)
            self.expanded = True
```

**说明：**

+ 每个分组包含一个按钮和一个 `QListWidget`。按钮点击时调用 `toggle_list` 方法，控制列表的展开和折叠。
+ 为了更好的滚动体验，列表的垂直滚动条被关闭，通过计算列表项总高度来动态设置 `QListWidget` 的高度。

### 2. 主窗口类 `MainWindow`
```python
class MainWindow(QWidget, Ui_Form):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.setWindowTitle("QQ好友分组")
        self.resize(300, 500)
        self.layout = QVBoxLayout(self)
        # 用于存储所有好友分组的容器 widget

        # 模拟多个好友分组，每个分组包含多个好友
        groups = {
            "家人": [f'家人{i}' for i in range(15)],
            "朋友": [f'朋友{i}' for i in range(15)],
            "同学": [f'同学{i}' for i in range(15)],
            "陌生人": [f'陌生人{i}' for i in range(15)],
        }
        self.group_widgets = []
        self.group_widgets_dic = {}
        # 为每个分组创建一个 FriendGroupWidget，并加入主窗口布局中
        for group_name, friends in groups.items():
            group_widget = FriendGroupWidget(group_name, friends)
            self.group_widgets.append(group_widget)
            self.verticalLayout_2.addWidget(group_widget)
            self.group_widgets_dic[group_name] = group_widget

        self.verticalLayout_2.addStretch()
        self.scrollArea.verticalScrollBar().valueChanged.connect(self.handleScroll)
        self.button.setVisible(False)
        self.button.clicked.connect(self.click_handel)
```

**说明：**

+ 主窗口使用 `QScrollArea` 展示所有分组，通过遍历模拟数据构建多个 `FriendGroupWidget`。
+ 利用 `verticalScrollBar().valueChanged` 信号监听滚动事件，在 `handleScroll` 方法中实时计算当前处于顶部的分组。
+ 窗口中还存在一个独立的按钮控件（吸顶控件），用于在滚动时显示当前分组标题，点击该按钮可以切换对应分组的展开状态。

### 3. 滚动吸顶逻辑 `handleScroll`
```python
def handleScroll(self, value):
    """滚动时检测当前顶部可见的分组，并打印分组名称"""
    viewport = self.scrollArea.viewport()
    top_visible_group = None
    top_offset = None
    for group_widget in self.group_widgets:
        # 将每个分组的坐标转换到 viewport 坐标系中
        pos_y = group_widget.list_widget.mapTo(viewport, QPoint(0, 0)).y()
        print(pos_y, group_widget.list_widget.height())
        if not group_widget.expanded:
            continue
        # 判断分组是否至少部分可见（即 bottom > 0）
        if pos_y < 10:
            # 如果分组的顶部在 viewport 之上或正好位于顶部，则选择离顶部最近的
            if pos_y <= 0:
                if top_offset is None or pos_y > top_offset:
                    top_offset = pos_y
                    top_visible_group = group_widget
            else:
                # 如果当前没有处于顶部的分组，则选择顶部位置最小的
                if top_offset is None or pos_y < top_offset:
                    top_offset = pos_y
                    top_visible_group = group_widget
    if top_visible_group:
        print("当前最上面可见的分组:", top_visible_group.group_name)
        self.button.setText(top_visible_group.group_name)
        self.button.setVisible(True)
    else:
        self.button.setVisible(False)
```

**说明：**

+ 该方法通过 `mapTo` 方法将每个分组的坐标转换为 `viewport` 坐标系，计算各分组控件相对于滚动区域的位置。
+ 根据各分组在 `viewport` 中的垂直坐标，判断哪个分组处于顶部，并将吸顶控件更新为当前分组标题。
+ 如果没有分组符合条件，则隐藏吸顶控件。

## 四、总结
通过以上实现，我们利用 PyQt5 的控件与信号机制，实现了一个分组列表的滚动吸顶效果。具体优势在于：

+ **交互体验提升**  
用户在滚动时能够实时了解当前分组信息，无论列表项数量如何变化，都能保持良好的导航体验。
+ **模块化设计**  
分组控件与吸顶逻辑分离，各自职责明确，便于后续扩展或功能修改。

这种基于事件监听与控件坐标映射的方法，不仅适用于 QQ 好友分组，还可以推广到其他需要吸顶效果的场景。希望本文的讲解能为你的 PyQt5 项目开发提供新的思路和灵感！

---

欢迎大家留言讨论，如有任何问题或改进建议，也可以在评论区交流。Happy coding!



## 完整代码
```python
"""
## PyQt5实现分组列表滚动吸顶效果

> 有时候一个展示页面内的控件数量展示较多，固定高度下放置不了，那么自然就会把控件放置到QScrollArea中，可能滚动区域中放置的好几块分类的数据，那么在滚动的时候我想知道当前属于哪个分类，我就需要往上滚动，交互体验不佳。

### 需求：

1. 滚动到详细内容的时候，我希望分类标题是一直展示的（类似列表和列表头的效果）
2. 一个QScrollArea中能支持多个标题吸顶，也就是滚动到第二个标题的时候，第一个标题自动消失，开始第二个标题吸顶

### 设计分析：

1. 如果要实现吸顶效果，需要知道QScrollArea当前左上角坐标、待吸顶控件坐标
2. 需要能监听到滚动发生后的事件，用于更新吸顶控件坐标
3. 用label显示标题、QListWidget显示分组项
3、准备一个和分组标题一样的label2控件，判断当前所在的分组，将label2的内容显示为当前分组。不需要显示的时候label2隐藏，需要显示的时候label2显示
"""

import sys

from PyQt5 import QtWidgets
from PyQt5.QtCore import Qt, QPoint
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QListWidget, QScrollArea

from test import Ui_Form


class FriendGroupWidget(QWidget):
    def __init__(self, group_name, friends):
        super().__init__()
        self.group_name = group_name
        self.friends = friends
        self.expanded = False  # 默认折叠状态

        # 布局包含一个按钮和一个列表
        self.layout = QVBoxLayout(self)
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.button = QPushButton(group_name)
        self.button.setCheckable(True)
        self.button.setChecked(False)
        self.button.clicked.connect(self.toggle_list)

        # 创建 QListWidget 存储好友，并关闭其滚动条
        self.list_widget = QListWidget()
        self.list_widget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        for friend in friends:
            self.list_widget.addItem(friend)
        self.list_widget.setFixedHeight(0)
        self.layout.addWidget(self.button)
        self.layout.addWidget(self.list_widget)
        self.list_widget.setVerticalScrollMode(QtWidgets.QAbstractItemView.ScrollPerPixel)

    def toggle_list(self):
        if self.expanded:
            # 折叠：高度设为 0
            self.list_widget.setFixedHeight(0)
            self.expanded = False
        else:
            # 展开：计算 QListWidget 展开所需的总高度
            count = self.list_widget.count()
            if count > 0:
                rowHeight = self.list_widget.sizeHintForRow(0)
                totalHeight = rowHeight * count + 2 * self.list_widget.frameWidth()
            else:
                totalHeight = 0
            self.list_widget.setFixedHeight(totalHeight)
            self.expanded = True


class MainWindow(QWidget, Ui_Form):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.setWindowTitle("QQ好友分组")
        self.resize(300, 500)
        self.layout = QVBoxLayout(self)
        # 用于存储所有好友分组的容器 widget

        # 模拟多个好友分组，每个分组包含多个好友
        groups = {
            "家人": [f'家人{i}' for i in range(15)],
            "朋友": [f'朋友{i}' for i in range(15)],
            "同学": [f'同学{i}' for i in range(15)],
            "陌生人": [f'陌生人{i}' for i in range(15)],
        }
        self.group_widgets = []
        self.group_widgets_dic = {}
        # 为每个分组创建一个 FriendGroupWidget，并加入主窗口布局中
        for group_name, friends in groups.items():
            group_widget = FriendGroupWidget(group_name, friends)
            self.group_widgets.append(group_widget)
            self.verticalLayout_2.addWidget(group_widget)
            self.group_widgets_dic[group_name] = group_widget

        self.verticalLayout_2.addStretch()
        self.scrollArea.verticalScrollBar().valueChanged.connect(self.handleScroll)
        self.button.setVisible(False)
        self.button.clicked.connect(self.click_handel)

    def handleScroll(self, value):
        """滚动时检测当前顶部可见的分组，并打印分组名称"""
        viewport = self.scrollArea.viewport()
        top_visible_group = None
        top_offset = None
        for group_widget in self.group_widgets:

            # 将每个分组的坐标转换到 viewport 坐标系中
            pos_y = group_widget.list_widget.mapTo(viewport, QPoint(0, 0)).y()
            print(pos_y, group_widget.list_widget.height())
            if not group_widget.expanded:
                continue
            # 判断分组是否至少部分可见（即 bottom > 0）
            if pos_y<10:
                # 如果分组的顶部在 viewport 之上或正好位于顶部，则选择离顶部最近的
                if pos_y <= 0:
                    if top_offset is None or pos_y > top_offset:
                        top_offset = pos_y
                        top_visible_group = group_widget
                else:
                    # 如果当前没有处于顶部的分组，则选择顶部位置最小的
                    if top_offset is None or pos_y < top_offset:
                        top_offset = pos_y
                        top_visible_group = group_widget
        if top_visible_group:
            print("当前最上面可见的分组:", top_visible_group.group_name)
            self.button.setText(top_visible_group.group_name)
            self.button.setVisible(True)
        else:
            self.button.setVisible(False)

    def click_handel(self):
        group_name = self.button.text()
        self.group_widgets_dic[group_name].toggle_list()

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

```



基于 PyQt5 实现分组列表滚动吸顶效果

在日常的照片管理中，我们常会遇到 EXIF 信息中的拍摄日期不准确或者缺失的情况。有些图片（截图、程序生成、去除隐私的拍摄照片）的元数据中没有图片的拍摄日期，从网盘或者其他地方下载的图片的创建日期会变成下载时候的日期，导入相册中无法正确识别到图片的日期，导致相册按时间混乱。

这些图片的文件名大都含有时间信息，这篇文章将分享一个完整的 Python 脚本，用于根据图片文件名自动提取日期，并将其写入图片的 EXIF 元数据中，便于照片管理和排序。

---

## 主要功能
这段代码实现了以下功能：

1. **提取文件名中的日期时间**：支持多种常见的日期格式，包括时间戳。
2. **校验日期有效性**：确保提取到的日期在合理范围内（如 1970 年到 2035 年之间）。
3. **修改 EXIF 元数据**：将提取的日期写入 `DateTimeOriginal` 字段，并设置其他相关字段。
4. **灵活的修改逻辑**：可选择强制使用给定日期，或者自动选择最早日期进行更新。

---

## 核心代码解析
### 1. 提取文件名中的日期
代码首先通过正则表达式从文件名中提取日期时间，支持的格式包括：

+ `YYYYMMDD_HHMMSS` 格式，例如 `20201231_200936`
+ 时间戳格式（10 位秒级或 13 位毫秒级时间戳）
+ 混合格式，例如 `YYYYMMDD-HHMMSS` 或 `YYYYMMDD_HHMMSS[附加内容]`

以下是提取日期时间的核心代码：

```python
def extract_datetime_from_filename(filename) -> datetime | None:
    patterns = [
        r"(\d{8})_(\d{6})",  # 格式：YYYYMMDD_HHMMSS
        r"(\d{13}|\d{10})",  # 格式：TIMESTAMP
        r"(\d{8})[_|-](\d{6}).*?"  # 格式：YYYYMMDD_HHMMSS[其他内容]
    ]
    for pattern in patterns:
        match = re.search(pattern, filename)
        if match:
            if len(match.groups()) == 2:
                date_part, time_part = match.groups()
                try:
                    return datetime.strptime(date_part + time_part, "%Y%m%d%H%M%S")
                except ValueError:
                    continue
            elif len(match.groups()) == 1:
                timestamp = match.group(1)
                try:
                    if len(timestamp) == 13:
                        return datetime.fromtimestamp(int(timestamp) / 1000)
                    else:
                        return datetime.fromtimestamp(int(timestamp))
                except ValueError:
                    continue
    return None
```

### 2. 校验日期的有效性
提取到的日期可能会超出合理范围（例如系统错误生成的无效时间戳）。因此，我们用以下代码确保日期在合理范围内：

```python
start_time = datetime(1970, 1, 1, 0, 0, 0)
end_time = datetime(2035, 1, 1, 0, 0, 0)

def valid_time(dt):
    if start_time <= dt <= end_time:
        return dt
    else:
        return None
```

### 3. 修改 EXIF 信息
代码使用了 [piexif](https://github.com/hMatoba/Piexif) 库来加载和修改图片的 EXIF 元数据。以下是核心逻辑：

+ 获取 `DateTimeOriginal`，与提取的日期比较，取较早者。
+ 如果 EXIF 数据不存在，则创建并插入新的日期信息。
+ 更新 EXIF 中的品牌信息（如 `Make` 和 `Model`）。

以下是主要代码段：

```python
def modify_image(image_file: ImageFile, given_date, is_force):
    try:
        exif_dict = piexif.load(image_file.file_path)
        date_time_original = get_exif_date(exif_dict, piexif.ExifIFD.DateTimeOriginal, 'Exif', None)
        if is_force:
            dates = [d for d in [date_time_original, given_date] if d is not None]
            earliest_date = min(dates)
        else:
            earliest_date = given_date

        if date_time_original != earliest_date:
            exif_dict["Exif"][piexif.ExifIFD.DateTimeOriginal] = earliest_date.strftime("%Y:%m:%d %H:%M:%S").encode("utf-8")
            exif_dict["0th"][piexif.ImageIFD.Make] = 'MemoTrace'.encode("utf-8")
            exif_dict["0th"][piexif.ImageIFD.Model] = 'EasyBox'.encode("utf-8")

        exif_bytes = piexif.dump(exif_dict)
        piexif.insert(exif_bytes, image_file.save_path)
        print(f"DateTimeOriginal 已更新为最早日期：{earliest_date}")
    except Exception as e:
        print(f"处理图片时出错：{e} {traceback.format_exc()}")
```

### 4. 示例运行
以下是代码的运行示例：

```python
if __name__ == '__main__':
    img_path = './dist/图片/Screenshot_20201231_200936.jpg'
    new_path = 'IMG_20201007_150144(3).jpg'
    image_file = ImageFile(img_path)
    image_file.save_path = new_path
    modify_image(image_file, None, False)
```

运行结果如下：

```plain
DateTimeOriginal 已更新为最早日期：2020-12-31 20:09:36
```

![image.png](https://blog.lc044.love/static/img/01192a9a40403b39489a47bcf663c3cf.image.webp)
---

## 运行环境和依赖
+ Python 版本：`>=3.9`
+ 依赖库：`piexif`

安装依赖：

```bash
pip install piexif
```

---

## 完整代码
完整代码如下：

```python
"""
根据文件名获取图片的日期，修改图片exif元数据里的拍摄日期
"""

import os.path
import re
import shutil
import traceback
from datetime import datetime

import piexif


def get_exif_date(exif_dict, field, key='Exif', default="Unknown"):
    """
    安全获取 EXIF 字段的日期，如果字段不存在或解析失败，返回默认值。
    """
    try:
        date_str = exif_dict[key].get(field, b"").decode("utf-8")
        return datetime.strptime(date_str, "%Y:%m:%d %H:%M:%S")
    except (KeyError, ValueError, UnicodeDecodeError):
        return default


start_time = datetime(1970, 1, 1, 0, 0, 0)
end_time = datetime(2035, 1, 1, 0, 0, 0)


def valid_time(dt):
    if start_time <= dt <= end_time:
        return dt
    else:
        return None


def extract_datetime_from_filename(filename) -> datetime | None:
    # 定义正则表达式，匹配常见的时间格式
    patterns = [
        r"(\d{8})_(\d{6})",  # 格式：YYYYMMDD_HHMMSS
        r"(\d{13}|\d{10})",  # 格式：TIMESTAMP (13位毫秒级时间戳)
        r"(\d{8})[_|-](\d{6}).*?"  # 格式：YYYYMMDD_HHMMSS[其他内容]
    ]
    result = None
    for pattern in patterns:
        match = re.search(pattern, filename)
        if match:
            if len(match.groups()) == 2:  # 包含日期和时间
                date_part, time_part = match.groups()
                try:
                    result = datetime.strptime(date_part + time_part, "%Y%m%d%H%M%S")
                    return valid_time(result)
                except ValueError:
                    continue
            elif len(match.groups()) == 1:  # 只包含时间戳
                timestamp = match.group(1)
                try:
                    if len(timestamp) == 13:
                        result = datetime.fromtimestamp(int(timestamp) / 1000)  # 转换为秒
                    else:
                        result = datetime.fromtimestamp(int(timestamp))  # 转换为秒
                    return valid_time(result)
                except (ValueError, OverflowError):
                    continue
    return None


class ImageFile:
    def __init__(self, file_path):
        self.save_path = file_path
        self.file_path = file_path
        self.file_name = os.path.basename(file_path)
        self.save_inplace = True
        self.save_fmt = 'auto'
        self.save_quality = 95

    def get_file_time_by_name(self):
        return extract_datetime_from_filename(self.file_name)


def modify_image(image_file: ImageFile, given_date, is_force):
    """
    修改图片的拍摄时间为given_date
    :param image_file:
    :param given_date:
    :param is_force: 是否强制设置为given_date,否：取当前图片拍摄时间和给定时间的最小值
    :return:
    """
    file_path = image_file.file_path
    if not given_date:
        given_date = image_file.get_file_time_by_name()
    try:
        # 打开图片并加载 EXIF 数据
        try:
            exif_dict = piexif.load(file_path)
            # 获取 EXIF 日期
            date_time_original = get_exif_date(exif_dict, piexif.ExifIFD.DateTimeOriginal, 'Exif', None)
            if is_force:
                modify_date = get_exif_date(exif_dict, piexif.ImageIFD.DateTime, '0th', None)
                dates = [d for d in [date_time_original, modify_date, given_date] if d is not None]
                earliest_date = min(dates)
            else:
                earliest_date = given_date
            # 如果 DateTimeOriginal 已经是最早的，则无需修改
            if date_time_original != earliest_date:
                # 更新 DateTimeOriginal
                exif_dict["Exif"][piexif.ExifIFD.DateTimeOriginal] = earliest_date.strftime("%Y:%m:%d %H:%M:%S").encode(
                    "utf-8")
                exif_dict["0th"][piexif.ImageIFD.Make] = 'MemoTrace'.encode("utf-8")
                exif_dict["0th"][piexif.ImageIFD.Model] = 'EasyBox'.encode("utf-8")
                exif_dict["0th"][piexif.ImageIFD.Software] = 'EasyBox-0.1.0'.encode("utf-8")
        except:
            earliest_date = given_date
            exif_dict = {
                '0th': {},
                'Exif': {}
            }
            if earliest_date:
                # 更新 DateTimeOriginal
                exif_dict["Exif"][piexif.ExifIFD.DateTimeOriginal] = earliest_date.strftime("%Y:%m:%d %H:%M:%S").encode(
                    "utf-8")
            exif_dict["0th"][piexif.ImageIFD.Make] = 'MemoTrace'.encode("utf-8")
            exif_dict["0th"][piexif.ImageIFD.Model] = 'EasyBox'.encode("utf-8")
            exif_dict["0th"][piexif.ImageIFD.Software] = 'EasyBox-0.1.0'.encode("utf-8")
        # 保存修改后的图片
        exif_bytes = piexif.dump(exif_dict)
        # img.save(image_file.save_path, exif=exif_bytes, quality=image_file.save_quality, subsampling=0)
        if image_file.save_path != image_file.file_path:
            shutil.copy(file_path, image_file.save_path)
        piexif.insert(exif_bytes, image_file.save_path)
        print(f"DateTimeOriginal 已更新为最早日期：{earliest_date}")
    except Exception as e:
        print(f"处理图片时出错：{e} {traceback.format_exc()}")


if __name__ == '__main__':
    img_path = './dist/图片/Screenshot_20201231_200936.jpg'
    new_path = 'IMG_20201007_150144(3).jpg'
    given_date = None
    image_file = ImageFile(img_path)
    image_file.save_path = new_path
    modify_image(image_file, None, False)

```

---

## 下载

软件下载地址[https://memotrace.cn/tools/](https://memotrace.cn/tools/)
## 总结
这段脚本通过文件名自动提取日期，并写入图片的 EXIF 数据，简化了拍摄时间的修正流程。希望这篇文章对你管理照片有所帮助！如果你在使用过程中有任何问题或建议，欢迎留言讨论。

相关应用程序正在开发中，欢迎关注以便获取最新资源


![image.png](https://blog.lc044.love/static/img/f2756d8910cdb9d7410d0fb7df8d216a.image.webp)



基于文件名修改图片的拍摄日期

万字长文

## PyQt5 自定义可拖拽列表组件：实现动态排序、上下移动与删除功能
写在前面：

在本篇教程中，将实现一个基于 **PyQt5** 的自定义列表组件，这个组件支持拖拽排序、点击按钮上下移动、以及点击删除的功能。

实现效果：


![预览.gif](https://blog.lc044.love/static/img/82ba082dc03977ae0b3331c2427d57cb.%C3%A9%C2%A2%C2%84%C3%A8%C2%A7%C2%88.gif)

:::success
为什么不用Qt自带的`QListWidget` 和 `QListView`？

1. `QListWidget` 支持拖拽，但仅限于默认的文字图标样式的item，不支持item上显示自定义widget（拖拽之后会出现空白）
2. **自定义拖拽图像**：默认的 `QListWidget` 直接拖动列表项的文字或图标，而我们希望通过截图方式，让拖拽过程中显示小部件的实际样式。
3. **控制拖拽行为**：在自定义组件中，可以细粒度地控制拖拽行为，甚至动态调整拖拽图像、拖拽位置、以及拖拽结果的处理逻辑。例如，我们可以在拖拽时调整列表项的大小，或者设置复杂的拖拽区域判断。

:::

### 环境准备
首先，请确保你的环境中安装了 **PyQt5**，可以使用以下命令安装：

```python
pip install PyQt5
```

### 项目需求分析
实现一个自定义列表组件，要求如下：

1. 每个列表项由一个标签和三个操作按钮组成（上移、下移、删除）。
2. 支持拖拽排序，使用户可以自由地重新排列列表项的顺序。
3. 能够通过按钮快速将项上下移动或删除。

### 代码详解
#### 1. 项目结构
首先我们创建以下几个类：

+ `CustomWidget`: 定义列表项样式，包括标签和按钮。
+ `FileInfo`: 存储每个列表项的信息。
+ `FileItem`: 继承 `QStandardItem`，保存自定义数据。
+ `FileListView`: 主列表视图类，实现拖拽、排序和按钮操作的核心逻辑。

#### 2. 自定义列表项 `CustomWidget`
`CustomWidget` 负责定义每个列表项的外观，包括：

+ 标签显示项的名称。
+ `↑` 按钮（上移）、`↓` 按钮（下移）、以及 `删除` 按钮。
+ 鼠标悬停效果。

代码实现如下：

```python
class CustomWidget(QWidget):
    """自定义列表项，带有标签和删除按钮"""

    def __init__(self, text):
        super(CustomWidget, self).__init__()
        self.is_selected = False
        self.label = QLabel(os.path.basename(text))
        self.btn_up = QPushButton("↑")
        self.btn_down = QPushButton("↓")
        self.btn_delete = QPushButton("删除")

        # 创建布局
        layout = QHBoxLayout()
        layout.addWidget(self.label)
        spacerItem = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        layout.addItem(spacerItem)
        layout.addWidget(self.btn_up)
        layout.addWidget(self.btn_down)
        layout.addWidget(self.btn_delete)
        layout.setContentsMargins(0, 0, 10, 0)
        self.setLayout(layout)
        self.setStyleSheet("QWidget,QLabel{background: rgb(238,244,249);}")
```

通过 `QLabel` 显示标签信息，`QPushButton` 添加操作按钮，并设置 `QHBoxLayout` 布局，使标签和按钮水平排列。

#### 3. 数据结构 `FileInfo` 和 `FileItem`
`FileInfo` 类保存每个列表项的具体信息，如文件名、路径和排序所需的页码。

```python
class FileInfo:
    def __init__(self, file, index):
        self.filename = os.path.basename(file)
        self.filepath = file
        self.index = index
        self.selected = True
```

`FileItem` 继承自 `QStandardItem`，在每项中存储 `FileInfo` 数据。

```python
class FileItem(QStandardItem):
    def __init__(self, fileinfo):
        super(FileItem, self).__init__()
        self.setData(fileinfo, Qt.UserRole)  # 存储自定义文本数据
```

#### 4. 列表视图 `FileListView`
`FileListView` 是组件的核心部分，定义了以下功能：

+ **拖拽排序**：通过 `mousePressEvent` 和 `startDrag` 实现拖拽效果。
+ **列表操作**：调用 `add_item` 添加列表项，通过 `remove_item` 删除项。

##### 关键功能实现
+ **拖拽**：

在 `FileListView` 的 `startDrag` 方法中，生成自定义小部件的截图作为拖拽图像，并设置拖拽热点，确保拖拽开始时图像与鼠标对齐。

```python
def startDrag(self, supportedActions):
    index = self.currentIndex()
    if index.isValid():
        item_widget = self.indexWidget(index)
        if item_widget:
            pixmap = item_widget.grab()  
            drag = QDrag(self)
            drag.setPixmap(pixmap)
            drag.setHotSpot(self.start_drag_pos - item_widget.pos())
            drag.exec_(supportedActions)
```

+ **上下移动**：

按钮 `↑` 和 `↓` 实现上下移动功能。通过获取目标行号和源行号，进行插入和删除操作。

```python
def move_item_up(self, item):
    row = item.row()
    if row > 0:
        new_item = FileItem(item.data(Qt.UserRole).copy())
        self.model.removeRow(item.row())
        self.model.insertRow(row - 1, new_item)
        self.set_item_widget(new_item)
```

+ **删除**：

当点击删除按钮时，调用 `remove_item` 方法，将指定项从模型中移除。

```python
def remove_item(self, item):
    self.model.removeRow(item.row())
```

#### 5. 初始化组件
在 `main` 函数中，我们创建一个 `FileListView` 实例，并添加几个示例项，展示组件的完整效果。

```python
if __name__ == '__main__':
    app = QApplication(sys.argv)
    view = FileListView()
    for i in range(5):
        view.add_item(f'Item {i + 1}', i)
    view.show()
    sys.exit(app.exec_())
```

#### 效果预览
运行后，窗口会显示一个列表，每个项可以通过拖拽排序、点击按钮上移或下移，或者删除，方便用户进行自由操作。

![](https://blog.lc044.love/static/img/82ba082dc03977ae0b3331c2427d57cb.é¢è§.gif)

### 总结
通过本教程，我们实现了一个功能丰富的 PyQt5 自定义列表组件，主要包括以下要点：

1. 自定义小部件，实现项目内容的布局和交互。
2. 使用 `QStandardItem` 和 `QStandardItemModel` 维护列表数据。
3. 通过自定义拖拽和按钮操作，实现上下移动、删除和排序功能。

本组件适用于需要动态排序的项目管理类应用，如文件列表、任务管理等。


## 完整代码
[https://github.com/LC044/pyqt_component_library](https://github.com/LC044/pyqt_component_library)



使用 PyQt5 实现自定义可拖拽列表组件

👨🏻‍💻这是一个充满知识💬的链接，快点进来看看你的好友给你分享了什么干货吧❣️