Kivy中ScrollView自动滚动到指定位置的实现问题

问题 #

我需要实现一个内嵌GridLayout的ScrollView，可动态添加数量不定的Label，目前已完成基础滚动功能，但还需实现ScrollView自动滚动到网格中的任意Label（比如用户在应用其他位置选中某个Label时，自动滚动到对应位置）。

尝试过修改scroll_y和官方的scroll_to()方法，但修改scroll_y后ScrollView需要用户手动滚动才会更新；scroll_to()方法完全无效。哪怕实现按百分比自动滚动也可以接受。

现有代码 #

Python代码

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.graphics import Color, Rectangle
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.scrollview import ScrollView

class LabelScroll(ScrollView):
    
    def scroll_to_label(self):
        label = LabelGrid.labels_list[75]
        self.scroll_to(self, label)

class LabelGrid(GridLayout):

    number = 0
    labels_list = [] # list to hold labels

    def add_label(self):
        # 该函数创建Label并添加到ScrollView，共100次
        if self.number < 100:
            label_text = 'text' + str(self.number) # 生成唯一文本
            lbl = Label(text=label_text) # 创建Label
            self.labels_list.append(lbl) # 将Label存入列表备用
            self.add_widget(lbl)
            self.number = self.number + 1
            self.add_label() # 递归调用继续添加

class Frame(FloatLayout):
    pass

class ScrollApp(App):
    def build(self):
        return Frame()

if __name__ == "__main__":
    ScrollApp().run()

KV语言文件

#: kivy 2.2.0

<Frame>
    Widget:
        # 用于标记ScrollView位置的画布
        canvas:
            Color:
                rgba: (0, .5, .5, 1)
            Rectangle:
                size: (root.width * .2, root.height)
                pos: (root.width * .8, 0)

    Button:
        # 触发添加Label的按钮
        pos_hint: {'x': .3, 'y': .6}
        size_hint: (.2, .2)
        text: 'Add labels to ScrollView'
        on_press: lbl_grd.add_label()

    Button:
        # 触发滚动到第75个Label的按钮
        pos_hint: {'x': .3, 'y': .2}
        size_hint: (.2, .2)
        text: 'Scroll to label 75\n(Hit the other button first)'
        on_press: scrlvw.scroll_to_label()      

    LabelScroll:
        # ScrollView实例
        id: scrlvw
        pos_hint: {'x': .8}
        size_hint_x: .2
        do_scroll_x: False
        do_scroll_y: True
        bar_width: root.width * .007
        effect_cls: 'ScrollEffect'
        scroll_type: ['bars', 'content']

        LabelGrid:
            id: lbl_grd
            size_hint_y: None
            cols: 1
            height: self.minimum_height
            row_default_height: root.height * .05

解决方案 #

1. 修复scroll_to()的参数错误 #

你的scroll_to_label方法调用self.scroll_to(self, label)是错误的，scroll_to的第一个参数就是目标Widget，不需要额外传入ScrollView实例。正确调用方式如下：

def scroll_to_label(self):
    if len(LabelGrid.labels_list) >= 76:  # 避免索引越界
        label = LabelGrid.labels_list[75]
        self.scroll_to(label)

2. 优化类变量的潜在问题 #

LabelGrid中的number和labels_list是类变量，多实例场景下会出现数据混乱，改成实例变量更稳妥：

class LabelGrid(GridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.number = 0
        self.labels_list = []  # 实例变量而非类变量

    def add_label(self):
        if self.number < 100:
            label_text = 'text' + str(self.number)
            lbl = Label(text=label_text)
            self.labels_list.append(lbl)
            self.add_widget(lbl)
            self.number += 1
            self.add_label()

3. 按百分比滚动的实现 #

如果需要按百分比滚动，可直接计算并设置scroll_y，同时调用update_from_scroll()强制刷新：

class LabelScroll(ScrollView):
    # ... 其他方法 ...
    def scroll_to_percent(self, percent):
        # percent取值0-1，0对应顶部，1对应底部
        self.scroll_y = percent
        self.update_from_scroll()  # 强制ScrollView更新显示

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