如何在Kivy的ScrollView中动态添加不同的任务项？

实现步骤 #

1. 封装单个任务项为自定义组件 #

把你现有的三个Label封装成独立的TaskItem自定义控件，避免重复写代码，也方便动态实例化。首先在kv文件中定义这个自定义组件的样式：

<TaskItem@Widget>:
    # 自定义属性，外部传入任务内容、完成状态色值
    my_task: ''
    r: 0.8
    g: 0.8
    b: 0.8
    a: 1
    size_hint_y: None
    height: dp(45) # 单个任务项总高度，预留边距
    # 背景标签
    Label:
        id : add_task_status
        background_color: 0,0,0,0
        size_hint: None,None
        size: dp(220), dp(35)
        pos: root.width/2-110, root.y + 5
        canvas.before:
            Color:
                rgba: self.background_color
            RoundedRectangle:
                size: self.size
                pos: self.pos
                radius: [10]*4
    # 右侧完成状态框
    Label:
        id: task_done
        background_color: root.r,root.g,root.b,root.a
        size_hint: None,None
        size: dp(25),dp(25)
        pos: root.width/2+80, root.y + 10
        canvas.before:
            Color:
                rgba: self.background_color
            RoundedRectangle:
                size: self.size
                pos: self.pos
                radius: [7]*4
    # 任务文本
    Label:
        font_name: "fonts/Nunito-Light.ttf"
        text_size: self.size
        text: root.my_task
        size_hint: None,None
        size: dp(220), dp(35)
        pos: root.width/2-100, root.y + 8

这里把原代码中固定基于窗口高度的定位，改成了基于TaskItem自身的y坐标，放入布局后会自动适配位置。

2. 配置ScrollView和任务承载容器 #

在原页面的kv代码中，把白色区域替换为如下结构，用ScrollView嵌套垂直排列的BoxLayout作为任务列表容器：

# 白色区域部分
ScrollView:
    id: task_scroll
    # 替换为你实际的白色区域尺寸
    size_hint: None, None
    size: dp(300), dp(400)
    # 替换为你实际的白色区域位置
    pos: self.parent.width/2-150, root.winheight-600
    BoxLayout:
        id: task_container
        orientation: 'vertical'
        spacing: dp(10) # 任务项之间的间距
        padding: dp(15) # 容器内边距
        size_hint_y: None
        # 高度随子组件总高度自动变化，实现滚动效果
        height: self.minimum_height

3. 新增任务逻辑实现 #

在对应页面的Python类中编写新增任务的触发方法，用户点击新增按钮时调用即可：

from kivy.uix.widget import Widget
from kivy.lang import Builder

Builder.load_file('你的kv文件路径')

# 你的页面类示例，可替换为你自己的类名
class TodoPage(Widget):
    def add_new_task(self, task_text):
        # 实例化自定义任务项，传入任务内容
        new_task = TaskItem(my_task=task_text)
        # 新任务添加到容器底部，自动排在已有任务下方
        self.ids.task_container.add_widget(new_task)

完成上述配置后，每次新增任务都会自动追加到列表最后，内容超出ScrollView高度时可正常上下滑动浏览。

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