Kivy Python如何用GridLayout实现带用户输入标签与可勾选待办按钮

当前实现进度与目标 #

目标是开发一款待办清单应用，核心交互逻辑包含：

• 获取用户输入的任务名称
• 为每个任务配套独立交互按钮
• 点击按钮后显示勾选标记，标记任务完成状态
  目前已实现将任务文本通过RecycleView渲染为Label标签展示的基础效果，但无法实现带按钮的任务交互逻辑。

原有代码的问题排查 #

• 视图组件配置错误：.kv文件中将ListWidget的viewclass设为纯Label组件，没有预留按钮渲染位置，无法承载点击交互逻辑
• 数据结构缺失：任务存储列表仅记录任务文本，没有设置任务完成状态的字段，无法区分已完成/未完成任务的显示差异
• 代码语法笔误：RootWidget类中定义ObjectProperty时，在属性行末尾多余添加了句点，会直接触发语法运行错误
• 空值判断逻辑错误：添加任务时判断输入为空的条件为对比文本与单空格字符串，无法正确识别用户输入的空内容、纯空格内容
• 排版参数错误：RecycleBoxLayout中设置default_size_hint: 0.4, None，会导致所有任务项仅占列表宽度的40%，排版偏斜

修正后的完整实现 #

修正后的main.py代码 #

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty, BooleanProperty, StringProperty
from kivy.uix.recycleview import RecycleView


# 自定义任务项组件，替代原有纯Label，内嵌可交互按钮
class TaskItem(BoxLayout):
    task_text = StringProperty("")
    is_done = BooleanProperty(False)

    def toggle_task_status(self):
        # 切换任务完成状态，同步更新显示文本
        self.is_done = not self.is_done
        if self.is_done:
            self.task_text = f"✅ {self.task_text.replace('✅ ', '')}"
        else:
            self.task_text = self.task_text.replace('✅ ', '')


class ListWidget(RecycleView):
    def update(self):
        self.data = [{'task_text': str(item), 'is_done': False} for item in self.item]

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.item = []


class RootWidget(BoxLayout):
    # 移除原有ObjectProperty定义末尾的多余句点，修复语法错误
    inputbutton = ObjectProperty(None)
    inputcontent = ObjectProperty(None)
    outputcontent = ObjectProperty(None)

    def add_item(self):
        # 优化空输入判断逻辑，去除首尾空格后再校验是否为空
        input_text = self.inputcontent.text.strip()
        if input_text != "":
            self.outputcontent.item.append(input_text)
            self.outputcontent.update()
            self.inputcontent.text = ""


class MyApp(App):
    def build(self):
        return RootWidget()


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

修正后的.kv配置文件代码 #

<RootWidget>
    inputbutton: inputbutton
    inputcontent: inputcontent
    outputcontent: outputcontent
    orientation: 'vertical'

    BoxLayout:
        orientation: 'vertical'
        size_hint: 1, 0.25

        Label:
            text: 'TO-DO'
            font_size: 32
            size_hint: 1,0.3

        BoxLayout:
            orientation: 'horizontal'

            Button:
                id: inputbutton
                size_hint: 0.25, 1
                text: 'add'
                on_press:root.add_item()

            TextInput:
                id: inputcontent
                multiline: False

    ListWidget:
        id: outputcontent
        # 将视图类从纯Label替换为自定义的TaskItem组件
        viewclass: 'TaskItem'
        orientation: 'vertical'

        RecycleBoxLayout:
            default_size: None,dp(56)
            # 修正排版参数，让任务项占满列表全宽
            default_size_hint: 1, None
            size_hint_y: None
            height:self.minimum_height
            orientation: 'vertical'

# 自定义TaskItem的布局结构
<TaskItem>
    orientation: 'horizontal'
    size_hint_y: None
    height: dp(56)

    Button:
        size_hint_x: 0.1
        text: ""
        on_press: root.toggle_task_status()

    Label:
        text: root.task_text
        halign: 'left'
        valign: 'middle'
        text_size: self.size

实现后的核心效果 #

• 用户输入任务内容、点击add按钮后，任务会自动渲染到下方列表区域
• 每个任务左侧配套可点击按钮，点击后会在任务文本前添加✅标记表示已完成，再次点击可取消标记
• 列表内的任务项宽度占满整个屏幕，修正了原有排版偏斜的问题

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