CODEWITHSUNDEEP
pythonkivy
arc py
arc py

Reputation: 1

display multiple clickable image in kivy

i am trying to display 10 clickable in gridLayout kivy. for this i tried to use this lind: https://kivy.org/doc/stable/api-kivy.lang.html#dynamic-classes

Based on this, I wrote these codes:

.kv file:

<ImageButton@ButtonBehavior+Image>: on_press: pass

<OneMinList>:
    ScrollView:
        id: scroll
        ImageButton:
            id: wall

.py file:

class OneMinList(MDScreen):

    def on_enter(self, *args):
        def update_height(img, *args):
            img.height = img.width / img.image_ratio
        for i in range(10):
            image = AsyncImage(source='image/Screenshot 2023-05-26 202836.jpg',
                               size_hint=(1, None),
                               keep_ratio=True,
                               allow_stretch=True)

            image.bind(width=update_height, image_ratio=update_height)
            self.ids.wall.add_widget(image)

but this codes display just 1 image. like this: enter image description here

i need something like this: enter image description here

Upvotes: 0

Views: 24

Answers (1)

balan
balan

Reputation: 1

.kv file:

        <OneMinList>:
            ScrollView:
                id: scroll
                GridLayout:
                    id: wall
                    cols: 2
                    size_hint_y: None
                    height: self.minimum_height

.py file:

from kivy.uix.screenmanager import Screen
from kivy.uix.image import AsyncImage
from kivy.uix.gridlayout import GridLayout


class OneMinList(Screen):
def on_enter(self):
    def update_height(img, *args):
        img.height = img.width / img.image_ratio

    grid_layout = self.ids.wall  # Access the GridLayout using its id
    for i in range(10):
        image = AsyncImage(source='image/Screenshot 2023-05-26 202836.jpg',
                           size_hint=(None, None),
                           size=(200, 200),
                           keep_ratio=True,
                           allow_stretch=True)
        image.bind(width=update_height, image_ratio=update_height)
        grid_layout.add_widget(image)

class YourApp(App): def build(self): return OneMinList()

if name == 'main': YourApp().run()

In this updated code, the .kv file defines the layout. It contains a ScrollView that wraps a GridLayout. The GridLayout has an id of wall and is set to have 2 columns. Its height is dynamically adjusted based on the number of images added to it.

In the Python code, the OneMinList class is a Screen that inherits from the Kivy Screen class. In the on_enter method, the wall GridLayout is accessed using its id, and 10 clickable images are added to it. The AsyncImage widget is used to load the images asynchronously. You can adjust the size property of the AsyncImage widget to set the desired size for the images.

Finally, the YourApp class is the main application class that builds and runs the app.

Make sure to adjust the image source path in the code to match the actual path of your image.

Upvotes: 0

Related Questions