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

Question

I have make a simple user touch to add image using add_widget in gridlayout. I have done simple prototype.

i press a particular grid and image added always last grid.

but i need add image to pressed grid.

Any suggestions thanks.

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

The problem is that you are adding the 2.jpg Image to the viewclass of a RecycleView . The function of a RecycleView is to recycle the viewclass instances. So if you modify one of those instances, it may show up anywhere in the RecycleGridLayout , and is likely to move around without respect to the RVItem that you wanted that modification applied to.

The answer is that whenever you want modify an RVItem , you must do it using the data of the RecycleView . Here is a modified version of your code that adds an image to the canvas of the RVItem , by adding an added key to the data:

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

Here is another way to do it by adding an MDCheckBox to the 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()

Now the RVItem is a RelativeLayout that contains an MDCheckbox and a SmartTileWithLabel . Since the RVItem is the viewclass , it must have all the properties that appear as keys in the data, so it has added , text , and source . Those properties are used in the KV_CODE to set the properties of the MDCheckbox and the SmartTileWithLabel .