如何使用KivyMD通过开关控件实现文本与图片的显示/隐藏？

要实现开关控制文本和图片的显示状态，核心是将开关的active属性与目标控件的opacity属性绑定（opacity=1对应显示，opacity=0对应隐藏），具体实现步骤如下：

• 给两个MDSwitch添加唯一id，方便在布局中引用其状态
• 将顶部4张图片放入一个BoxLayout容器，统一控制显示/隐藏，减少重复代码
• 绑定图片容器的opacity到图片开关的active值
• 绑定中间文本标签的opacity到文本开关的active值

修改后的完整代码：

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.core.window import Window

Window.size = (1280, 720)

class MyAppApp(MDApp):
    height = '185dp'
    width = '250dp'
    text = 'airplane   bicycle   boat   canoe'
    
    def build(self):
        return Builder.load_string('''
FloatLayout:

    MDLabel:
        text: 'Images'
        font_size: dp(18)
        halign: 'center'
        pos_hint: {'center_x': 0.1075, 'center_y': 0.135}
    
    MDLabel:
        text: 'Text'
        halign: 'center'
        pos_hint: {'center_x': 0.098, 'center_y': 0.075}
        font_size: dp(18)

    MDSwitch:
        id: image_switch
        active: True 
        width: dp(40)
        pos_hint: {'center_x': 0.05, 'center_y': 0.135}
    
    MDSwitch:
        id: text_switch
        active: True
        width: dp(40)
        pos_hint: {'center_x': 0.05, 'center_y': 0.075}

    MDToolbar:
        pos_hint: {'top': 1}
        md_bg_color: [0, 106/255, 163/255, 1]
        title: 'Images'
        elevation: 20

    BoxLayout:
        size_hint: 1, None
        height: app.height
        pos_hint: {'center_y': 0.7}
        spacing: dp(20)
        padding: [dp(100), 0, dp(100), 0]
        opacity: image_switch.active  # 绑定图片开关状态
        
        FitImage:
            size_hint_x: None
            width: app.width
            radius: 36, 36, 36, 36
            elevation: 20
            source: 'images/transportation/Airplane.jpg'
        
        FitImage:
            size_hint_x: None
            width: app.width
            radius: 36, 36, 36, 36
            elevation: 20
            source: 'images/transportation/Bicycle.jpg'
        
        FitImage:
            size_hint_x: None
            width: app.width
            radius: 36, 36, 36, 36
            elevation: 20
            source: 'images/transportation/Boat.jpg'
        
        FitImage:
            size_hint_x: None
            width: app.width
            radius: 36, 36, 36, 36
            elevation: 20
            source: 'images/transportation/Canoe.jpg'
    
    MDLabel:
        text: app.text
        halign: 'center'
        pos_hint: {'center_y': 0.375}
        font_size: dp(56)
        opacity: text_switch.active  # 绑定文本开关状态
''')

MyAppApp().run()

关键说明： #

1. 开关ID设置：给两个开关分别添加id: image_switch和id: text_switch，让布局能直接引用它们的active属性
2. 图片容器优化：用BoxLayout包裹4张图片，只需要绑定一次opacity就能控制所有图片的显示/隐藏，比单独设置每张图片更简洁
3. 属性绑定逻辑：opacity: image_switch.active会自动将布尔值True转为1、False转为0，实现显示与隐藏的自动切换

内容的提问来源于stack exchange，提问作者Zach M.