Python 3.8及Kivy中如何从JsonStore加载图片列表至MDCard

Let’s tackle both your questions together—since loading a list of images from your JsonStore and rendering them in MDCards (especially for 20+ items) go hand in hand. Here’s a practical, scalable approach:

Step 1: Update Your JSON Structure #

First, ensure your image.json stores a list of image links (instead of a single value). For example:

{
  "PRD": {
    "images": [
      "https://example.com/image1.jpg",
      "https://example.com/image2.jpg",
      // Add your 20+ image links here
    ]
  }
}

Step 2: Modify Python Code to Load the Image List #

Update your app to fetch the full list of images and make it accessible to your KV file:

from kivy.lang import Builder
from kivy.storage.jsonstore import JsonStore
from kivymd.app import MDApp
from kivymd.uix.card import MDCard

# Custom card class for our images
class ImageCard(MDCard):
    pass

class MyApp(MDApp):
    def load_images(self):
        # Load the entire list of images from JsonStore
        store = JsonStore('image.json')
        # Fallback to empty list if 'images' key is missing
        return store['PRD'].get('images', [])

    def build(self):
        # Store the image list as an app attribute for KV access
        self.image_list = self.load_images()
        return Builder.load_file('main1.kv')

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

Step 3: Use RecycleView to Dynamically Generate MDCards #

Hardcoding 20+ cards isn’t practical. Instead, use RecycleView—it’s designed for efficient rendering of large datasets. Update your KV file:

Screen:
    BoxLayout:
        orientation: 'vertical'
        Toolbar:
            title: "Testing"
        RecycleView:
            # Link to our custom ImageCard class
            viewclass: 'ImageCard'
            # Bind data to the app's image list
            data: [{'source': url} for url in app.image_list]
            RecycleBoxLayout:
                default_size: None, dp(200)  # Fixed height per card
                default_size_hint: 1, None
                size_hint_y: None
                height: self.minimum_height  # Auto-adjust to fit all cards
                orientation: 'vertical'
                spacing: dp(10)  # Space between cards
                padding: dp(10)  # Padding around the layout

# Template for each image card
<ImageCard>:
    padding: dp(10)
    elevation: 4  # Add subtle shadow for better UI
    AsyncImage:
        source: root.source  # Bind to the image URL from RecycleView data
        size_hint: 1, 1
        allow_stretch: True  # Fit image to card size
        keep_ratio: True  # Maintain image aspect ratio

Key Details to Note: #

• JsonStore Adjustment: The load_images function now retrieves the entire images list instead of a single value. The fallback empty list prevents crashes if the key is missing.
• RecycleView Efficiency: This widget reuses card instances instead of creating new ones for each image, making it ideal for large datasets (like 20+ images).
• Dynamic Binding: The data property converts each URL into a dictionary with a source key, which our custom ImageCard uses to set the AsyncImage source automatically.

If your original JSON uses a different key than images (e.g., td01 is a list), just adjust the store['PRD'].get('images', []) line to match your actual key name.

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