Kivy中BoxLayout内按钮图片显示异常：仅显示最后一张图片求助

问题重现 #

在Screen的BoxLayout中放置两个Button，每个Button内部嵌套Image加载不同图片，但仅最后一个Button的图片正常显示，第一个Button的图片无法显示。

代码示例 #

Python代码：

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
import json

class MainInterface(BoxLayout):
    pass

class TestApp(App):
    def build(self):
        return MainInterface()

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

KV语言代码：

MainInterface:
<MainInterface>:
    ScreenManager:
        id: sm
        size: root.width, root.height
        Screen:
            name: 'homepage_screen'
            Image:
                source: 'C:\\Users\\Messi\\Desktop\\Python\\Projects\\Football Tips\\Kivy\\images\\homepage_background.png'
                allow_stretch: True
                keep_ratio: False
            BoxLayout:
                size_hint: 1, 0.10
                Button: 
                    background_color: 0.5, 0.5, 0.5, 1                   
                    Image:
                        source: 'images\\button1.png'  
                        size: self.parent.size
                        allow_stretch: True
                Button:
                    background_color: 0.5, 0.5, 0.5, 1  
                    Image:
                        source: 'images\\button2.png'
                        size: self.parent.size
                        allow_stretch: True

问题原因 #

直接在Button内部嵌套Image会触发Kivy的渲染层级冲突：Button自身的背景绘制逻辑优先级高于内部子控件，导致第一个Button的Image被背景覆盖，仅最后一个Button的Image未被完全覆盖（或布局计算异常）。

修复方案 #

方案1：使用Button自带背景属性（推荐）

利用Button的background_normal属性直接设置图片，无需嵌套Image，这是Kivy官方推荐的按钮图片设置方式：

MainInterface:
<MainInterface>:
    ScreenManager:
        id: sm
        size: root.width, root.height
        Screen:
            name: 'homepage_screen'
            Image:
                source: 'C:\\Users\\Messi\\Desktop\\Python\\Projects\\Football Tips\\Kivy\\images\\homepage_background.png'
                allow_stretch: True
                keep_ratio: False
            BoxLayout:
                size_hint: 1, 0.10
                Button: 
                    # 设置按钮默认状态图片
                    background_normal: 'images\\button1.png'
                    # 可选：设置按钮按下状态图片
                    # background_down: 'images\\button1_pressed.png'
                    allow_stretch: True
                Button:
                    background_normal: 'images\\button2.png'
                    allow_stretch: True

方案2：用布局容器包裹Image（适合多元素按钮）

如果需要在按钮内添加多个元素，可给Button添加BoxLayout作为容器，确保Image能正确渲染：

MainInterface:
<MainInterface>:
    ScreenManager:
        id: sm
        size: root.width, root.height
        Screen:
            name: 'homepage_screen'
            Image:
                source: 'C:\\Users\\Messi\\Desktop\\Python\\Projects\\Football Tips\\Kivy\\images\\homepage_background.png'
                allow_stretch: True
                keep_ratio: False
            BoxLayout:
                size_hint: 1, 0.10
                Button: 
                    background_color: 0.5, 0.5, 0.5, 1                   
                    BoxLayout:
                        size: self.parent.size
                        Image:
                            source: 'images\\button1.png'  
                            allow_stretch: True
                Button:
                    background_color: 0.5, 0.5, 0.5, 1  
                    BoxLayout:
                        size: self.parent.size
                        Image:
                            source: 'images\\button2.png'
                            allow_stretch: True

额外注意事项 #

路径中的反斜杠需转义为\\，或直接使用正斜杠/，避免路径解析错误。

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