Python中如何通过add_widget为Kivy自定义控件添加文本、图片与价格标签

要给每个Item控件单独设置商品名和价格，只需给Item类增加可绑定的自定义属性，再在KV规则中内置对应文本标签绑定属性即可，无需修改其他逻辑。

1. 修改main.py #

首先导入属性类，给Item添加商品名、价格属性，创建实例时直接赋值即可：

import sys
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.lang import Builder
# 新增导入属性类
from kivy.properties import StringProperty

kv="""
<RoundedButton@Button>:
    background_color: (0,0,0, 0)
    canvas.before:
        Color:
            rgba: (.4,.4,.4,1) if self.state=='normal' else (0,.7,.7,1)
        RoundedRectangle:
            pos: self.pos
            size: self.size
            radius: [30,]
"""
class RoundedButton(Button):
    pass

Builder.load_string(kv)

class Item(RoundedButton):
    # 新增两个自定义可绑定属性
    item_name = StringProperty()
    price = StringProperty()
        
class MainWindow(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # 示例商品数据，可替换为你的真实数据
        goods_list = [
            {"name":"纯棉T恤","price":"¥89"},
            {"name":"休闲牛仔裤","price":"¥159"},
            {"name":"运动跑鞋","price":"¥399"},
            {"name":"帆布背包","price":"¥129"}
        ]
        Item_scrn_grid = self.ids.shop.ids.item_gd
        # 遍历商品列表创建Item实例
        for goods in goods_list:
            btn = Item(
                item_name = goods["name"],
                price = goods["price"]
            )
            Item_scrn_grid.add_widget(btn)
        
class MainApp(App):
    def build(self):
        return MainWindow()

if __name__=='__main__':
    MainApp().run()

2. 修改item.kv #

给Item控件内置垂直布局，添加两个文本标签分别绑定到自定义属性，可自行调整字体大小、位置、颜色：

<Item>:
    text: ""
    background_normal: ''
    size_hint_y: None
    height: 195
    # 内部垂直布局放两个标签
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        pos: root.pos
        padding: 15
        # 商品名标签
        Label:
            text: root.item_name
            font_size: 18
            color: (1,1,1,1)
            halign: 'left'
            valign: 'top'
            text_size: self.size
        # 占位控件，把价格挤到最底部
        Widget:
        # 价格标签
        Label:
            text: root.price
            font_size: 20
            color: (0.9,0.2,0.2,1)
            halign: 'right'
            valign: 'bottom'
            text_size: self.size

其他文件（main.kv、shop.kv）无需修改，运行后每个Item控件就会自动展示对应的商品名和价格。如果需要加商品图片，只需给Item类再加个StringProperty存图片路径，在Item的KV规则里加个Image控件绑定source属性即可。

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