Kivy中拖拽控件至ScrollView边缘时如何实现自动滚动？

核心思路 #

通过监听拖拽过程中的触摸坐标，判断触摸点是否进入ScrollView的边缘触发区域，若进入则根据位置计算滚动方向，通过定时调整ScrollView的scroll_y（或scroll_x）属性实现自动滚动，拖拽结束后停止滚动。

具体实现代码 #

1. 自定义带自动滚动的ScrollView

from kivy.uix.scrollview import ScrollView
from kivy.clock import Clock

class AutoScrollScrollView(ScrollView):
    edge_trigger_area = 50  # 触发自动滚动的边缘像素范围
    scroll_speed = 2        # 滚动速度（数值越大滚动越快）
    _scroll_clock = None

    def start_auto_scroll(self, touch):
        # 计算垂直方向的滚动方向
        direction = 0
        if touch.y <= self.y + self.edge_trigger_area:
            direction = -1  # 向下滚动（scroll_y减小）
        elif touch.y >= self.top - self.edge_trigger_area:
            direction = 1   # 向上滚动（scroll_y增大）

        if direction != 0:
            if self._scroll_clock is None:
                # 启动60帧/秒的滚动调度
                self._scroll_clock = Clock.schedule_interval(lambda dt: self._update_scroll(direction), 1/60)
        else:
            self.stop_auto_scroll()

    def _update_scroll(self, direction):
        # 限制scroll_y在0-1的合法范围内
        new_scroll_y = self.scroll_y + direction * self.scroll_speed / 1000
        self.scroll_y = max(0, min(1, new_scroll_y))

    def stop_auto_scroll(self):
        if self._scroll_clock is not None:
            self._scroll_clock.cancel()
            self._scroll_clock = None

2. 改造拖拽控件

from kivy_garden.draggable import DraggableBehavior
from kivy.uix.label import Label

class DraggableLabel(DraggableBehavior, Label):
    def on_touch_move(self, touch):
        if self.is_touch_touching(touch):
            # 根据实际布局层级获取ScrollView实例，这里假设ScrollView是父级的父级
            scroll_view = self.parent.parent
            scroll_view.start_auto_scroll(touch)
        return super().on_touch_move(touch)

    def on_touch_up(self, touch):
        if self.is_touch_touching(touch):
            scroll_view = self.parent.parent
            scroll_view.stop_auto_scroll()
        return super().on_touch_up(touch)

3. 布局示例（KV语言）

<AutoScrollScrollView>:
    do_scroll_y: True
    do_scroll_x: False
    BoxLayout:
        orientation: 'vertical'
        size_hint_y: None
        height: self.minimum_height
        padding: 10
        spacing: 10
        # 添加多个拖拽项以撑满ScrollView
        DraggableLabel:
            text: "拖拽项1"
            size_hint_y: None
            height: 50
            canvas.before:
                Color:
                    rgba: 0.3, 0.7, 0.9, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        DraggableLabel:
            text: "拖拽项2"
            size_hint_y: None
            height: 50
            canvas.before:
                Color:
                    rgba: 0.9, 0.7, 0.3, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        # 可重复添加更多拖拽项...

注意事项 #

• 调整scroll_view = self.parent.parent的层级，确保能正确获取到你的ScrollView实例，根据实际布局结构修改。
• 若需要横向自动滚动，只需修改start_auto_scroll中的判断逻辑为检测x坐标，调整scroll_x属性即可。
• edge_trigger_area和scroll_speed可根据需求自定义数值，触发区域越大越容易触发自动滚动，速度数值越大滚动越快。

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