如何在KivyMD非.kv文件项目中为MDCard内图片添加双击事件

核心逻辑是自定义同时继承TouchBehavior和FitImage的图片组件，重写on_double_tap方法实现自定义双击逻辑，不需要依赖kv文件即可生效。

注意修正原代码的导入错误 #

原代码中FitImage的导入路径拼写错误，需要把：

from KivaMD.kivymd.utils.fitimage import FitImage

改为：

from kivymd.utils.fitimage import FitImage

完整可运行代码 #

from kivy.core.window import Window
from kivy.uix.scrollview import ScrollView
from kivymd.uix.card import MDCard
from kivymd.uix.gridlayout import MDGridLayout
from kivymd.app import MDApp
from kivymd.uix.behaviors import TouchBehavior
from kivymd.uix.label import MDLabel
from kivymd.utils.fitimage import FitImage

Window.size = (440, 760)

# 自定义支持双击的图片类
class DoubleTapFitImage(FitImage, TouchBehavior):
    # 可自定义参数接收额外数据，比如对应帖子的ID
    def __init__(self, post_index=None, **kwargs):
        super().__init__(**kwargs)
        self.post_index = post_index

    def on_double_tap(self, *args):
        # 这里写你的自定义双击逻辑
        print(f"第{self.post_index}个帖子的图片被双击，资源路径为{self.source}")


class MainApp(MDApp):
    def build(self):
        blog = MDGridLayout(cols=1, spacing=40,  size_hint_y=None, padding=[20,], md_bg_color=[0,0,0.1,.2])
        blog.bind(minimum_height=blog.setter('height'))

        for i in range(10):
            post = MDCard(size_hint=(.9, None), size=(300, 300), radius=10)
            container = MDGridLayout(cols=1)
            post.add_widget(container)

            container.add_widget(MDLabel(text="Title", halign='center'))
            # 替换原来的FitImage为自定义的DoubleTapFitImage，可传入额外参数
            container.add_widget(DoubleTapFitImage(
                post_index = i,
                source="data/assets/img/placeholder.jpg", 
                size_hint_y=None, 
                height=200
            ))
            container.add_widget(MDLabel(text="Subtitle", halign='center'))

            blog.add_widget(post)
        scroll = ScrollView(size_hint=(1, None), size=(Window.width, Window.height))
        scroll.add_widget(blog)
        return scroll

MainApp().run()

扩展说明 #

如果不需要传递额外参数，直接重写on_double_tap方法即可，不需要额外定义__init__方法。你可以在on_double_tap中实现任意自定义逻辑，比如弹出点赞提示、打开图片详情页等。

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