Kivy中能否通过矩形框选实现FileChooserIconView多文件选择？

Kivy 2.2.0版本内置的FileChooserIconView默认仅支持点击、按住Ctrl/Shift点选的多文件模式，没有内置拖拽绘制矩形框批量选中文件的能力，需要通过自定义组件扩展实现。

核心实现逻辑 #

• 监听文件选择器的触摸事件，识别拖拽起始、拖拽移动、拖拽结束三个状态
• 拖拽过程中在组件上层绘制半透明选框，实时更新选框坐标与尺寸，兼容反向拖拽场景
• 拖拽结束后计算选框覆盖范围，遍历所有文件图标项，将和选框相交的项对应文件加入选中列表
• 保留原有单点击、修饰键点选的交互逻辑，不破坏原生使用习惯

可复用实现代码 #

Python侧自定义组件 #

from kivy.uix.filechooser import FileChooserIconView
from kivy.graphics import Color, Rectangle
from kivy.properties import ListProperty

class DragSelectFileChooser(FileChooserIconView):
    drag_start = ListProperty([0, 0])
    drag_end = ListProperty([0, 0])
    is_dragging = False

    def on_touch_down(self, touch):
        # 仅响应组件范围内的左键操作
        if self.collide_point(*touch.pos) and touch.button == 'left':
            # 点击位置落在文件图标上时走原生选择逻辑
            for icon_item in self.ids.layout.children:
                if icon_item.collide_point(*touch.pos):
                    return super().on_touch_down(touch)
            # 启动拖拽选框
            self.is_dragging = True
            self.drag_start = list(touch.pos)
            self.drag_end = list(touch.pos)
            self.canvas.after.clear()
            with self.canvas.after:
                Color(0.2, 0.6, 1, 0.3)
                self.select_rect = Rectangle(pos=self.drag_start, size=(0, 0))
            return True
        return super().on_touch_down(touch)

    def on_touch_move(self, touch):
        if self.is_dragging and self.collide_point(*touch.pos):
            self.drag_end = list(touch.pos)
            # 计算选框坐标，兼容从右下往左上、右上往左下等反向拖拽场景
            rect_x = min(self.drag_start[0], self.drag_end[0])
            rect_y = min(self.drag_start[1], self.drag_end[1])
            rect_w = abs(self.drag_end[0] - self.drag_start[0])
            rect_h = abs(self.drag_end[1] - self.drag_start[1])
            self.select_rect.pos = (rect_x, rect_y)
            self.select_rect.size = (rect_w, rect_h)
            return True
        return super().on_touch_move(touch)

    def on_touch_up(self, touch):
        if self.is_dragging:
            self.is_dragging = False
            self.canvas.after.clear()
            # 过滤小于5px的误触拖拽
            drag_w = abs(self.drag_end[0] - self.drag_start[0])
            drag_h = abs(self.drag_end[1] - self.drag_start[1])
            if drag_w < 5 or drag_h <5:
                return super().on_touch_up(touch)
            # 确定选框边界
            x1 = min(self.drag_start[0], self.drag_end[0])
            y1 = min(self.drag_start[1], self.drag_end[1])
            x2 = max(self.drag_start[0], self.drag_end[0])
            y2 = max(self.drag_start[1], self.drag_end[1])
            # 收集选框内的所有文件
            selected_files = []
            for icon_item in self.ids.layout.children:
                ix, iy = icon_item.pos
                iw, ih = icon_item.size
                # 判断文件图标是否和选框相交
                if not (ix + iw < x1 or ix > x2 or iy + ih < y1 or iy > y2):
                    selected_files.append(icon_item.path)
            # 按住Ctrl/Shift时追加选中，否则替换原有选中项
            if touch.is_ctrl or touch.is_shift:
                self.selection = list(set(self.selection + selected_files))
            else:
                self.selection = selected_files
            return True
        return super().on_touch_up(touch)

kv侧配置替换 #

将原有原生FileChooserIconView替换为自定义组件即可，原有属性配置无需修改：

DragSelectFileChooser:
   id: filechooser
   multiselect: True
   path: './'
   filters: ['*.png', '*.jpg', '*.jpeg']

补充说明 #

• 上述实现的交互逻辑和Windows/macOS系统文件管理器一致：直接拖拽框选会替换原有选中项，按住Ctrl/Shift拖拽会追加选中
• 如果需要给FileChooserListView增加同款拖拽选框能力，只需要将自定义组件的继承父类替换为FileChooserListView即可，坐标判断逻辑无需修改
• 可自行修改canvas.after里的Color参数调整选框的颜色、透明度

内容的提问来源于stack exchange，提问作者rfff