在网格布局内动态添加图像 kivy python

Question

我做了一个简单的用户触摸，在 gridlayout 中使用 add_widget 添加图像。 我做了简单的原型。

我按一个特定的网格和图像添加总是最后一个网格。

但我需要将图像添加到按下的网格。

任何建议谢谢。

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.uix.image import Image
from kivymd.uix.imagelist import SmartTileWithLabel
KV_CODE = '''
RecycleView:
    viewclass: 'RVItem'
    RecycleGridLayout:
        #orientation: 'vertical'
        cols:2
        size_hint_y: None
        height: self.minimum_height
        default_size_hint: 1, None
        default_size: 100,300
        spacing: 20
        padding: 10
'''
class RVItem(SmartTileWithLabel):
    def on_release(self):
        image=Image(source='2.jpg')
        self.add_widget(image,index=-1, canvas='before')

class SampleApp(MDApp):
    def build(self):
        return Builder.load_string(KV_CODE)
    def on_start(self):
        rv = self.root
        rv.data = ({'text': str(i), } for i in range(5))
SampleApp().run()

Answer 1

问题是您将2.jpg Image添加到viewclass的RecycleView中。 RecycleView 的RecycleView是为了回收viewclass实例。 因此，如果您修改其中一个实例，它可能会显示在RecycleGridLayout中的任何位置，并且可能会在不考虑您希望应用该修改的RVItem的情况下四处移动。

答案是，无论何时要修改RVItem ，都必须使用RecycleView的data 。 这是您的代码的修改版本，通过向数据添加added的密钥，将图像添加到canvas的RVItem ：

from kivy.properties import BooleanProperty
from kivymd.app import MDApp
from kivy.lang import Builder
from kivymd.uix.imagelist import SmartTileWithLabel

KV_CODE = '''
<RVItem>:
    canvas:
        # uncomment these lines to get a black background behind the checkbox
        # Color:
        #     rgba: 0,0,0,1
        # Rectangle:
        #     size: 32, 32
        #     pos: self.x, self.y + self.height - 32
        Color:
            rgba: 1,1,1,1
        Rectangle:
            size: 32, 32
            pos: self.x, self.y + self.height - 32
            source: 'atlas://data/images/defaulttheme/checkbox_on' if self.added else 'atlas://data/images/defaulttheme/checkbox_off'

RecycleView:
    viewclass: 'RVItem'
    RecycleGridLayout:
        #orientation: 'vertical'
        cols:2
        size_hint_y: None
        height: self.minimum_height
        default_size_hint: 1, None
        default_size: 100,300
        spacing: 20
        padding: 10
'''


class RVItem(SmartTileWithLabel):
    added = BooleanProperty(False)

    def on_release(self):
        # find this item in the data
        root = MDApp.get_running_app().root
        data = root.data
        for d in data:
            if d['text'] == self.text:
                # found this item, change `added` to opposite
                d['added'] = not d['added']
                root.refresh_from_data()
                break


class SampleApp(MDApp):

    def build(self):
        return Builder.load_string(KV_CODE)

    def on_start(self):
        rv = self.root
        rv.data = ({'text': str(i), 'source':'1.jpg', 'added':False } for i in range(5))


SampleApp().run()

Answer 2

这是通过将MDCheckBox添加到RVItem的另一种方法：

from kivy.properties import BooleanProperty, StringProperty
from kivy.uix.relativelayout import RelativeLayout
from kivymd.app import MDApp
from kivy.lang import Builder

KV_CODE = '''
<RVItem>:
    MDCheckbox:
        id: cb
        active: root.added
        size_hint: None, None
        size: 50, 50
        pos: 0, root.height - self.height
    SmartTileWithLabel:
        size_hint: None, 1
        width: root.width - cb.width
        pos: cb.width, 0
        text: root.text
        source: root.source

RecycleView:
    viewclass: 'RVItem'
    RecycleGridLayout:
        #orientation: 'vertical'
        cols:2
        size_hint_y: None
        height: self.minimum_height
        default_size_hint: 1, None
        default_size: 100,300
        spacing: 20
        padding: 10
'''


class RVItem(RelativeLayout):
    added = BooleanProperty(False)
    text = StringProperty('')
    source = StringProperty('')

    def on_touch_up(self, touch):
        if touch.button == 'left' and self.collide_point(*touch.pos):
            # find this item in the data
            root = MDApp.get_running_app().root
            data = root.data
            for d in data:
                if d['text'] == self.text:
                    # found this item, change `added` to opposite
                    d['added'] = not d['added']
                    root.refresh_from_data()
                    break
            return True
        else:
            return super(RVItem, self).on_touch_up(touch)


class SampleApp(MDApp):

    def build(self):
        return Builder.load_string(KV_CODE)

    def on_start(self):
        rv = self.root
        rv.data = ({'text': str(i), 'source':'1.jpg', 'added':False } for i in range(5))


SampleApp().run()

现在RVItem是一个包含MDCheckbox和SmartTileWithLabel的RelativeLayout 。 由于RVItem是viewclass ，它必须具有在数据中显示为键的所有属性，因此它added 、 text和source 。 这些属性在KV_CODE中用于设置MDCheckbox和SmartTileWithLabel的属性。