使用Kivy制作基础菜单遇黑屏问题求助

我尝试用Kivy制作一个包含标签和4个按钮的简单菜单，要求各元素间留有间隔，但运行后仅显示黑屏。以下是我的Python代码和IrishSnaps.kv文件内容：

原Python代码 #

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.graphics import Color, Rectangle
from kivy.core.window import Window
from kivy.logger import Logger
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang import Builder
from kivy.properties import ObjectProperty, StringProperty
from kivy.uix.widget import Widget

class MainMenu(BoxLayout):
    pass

class IrishSnapsApp(App):
    def build(self):
        return MainMenu(padding=50)

root=IrishSnapsApp()

root.run()

原IrishSnaps.kv文件内容 #

<MainMenu>:
    
    orientation:'vertical'

    Label:
        text: 'Irish Snaps'
        size_hint: 1, 0.2
        font_size: 30
    Button:
        id: Singleplayer
        text: 'Singleplayer'
        size_hint: 0.5, 0.2
        font_size: 24
        background_color: (0.811,0.745,0.549,1)
    Button:
        size_hint: 0.5, 0.1
        font_size: 24
        background_color: (0.811,0.745,0.549,0)
    Button:
        id: Multiplayer
        text: 'Multiplayer'
        size_hint: 0.5, 0.2
        font_size: 2
        background_color: (0.811,0.745,0.549,1)
    Button:
        size_hint: 0.5, 0.1
        font_size: 24
        background_color: (0.811,0.745,0.549,0)
    Button:
        id: Statistics
        text: 'Statistics'
        size_hint: 0.5, 0.2
        font_size: 24
        background_color: (0.811,0.745,0.549,1)
    Button:
        size_hint: 0.5, 0.1
        font_size: 24
        background_color: (0.811,0.745,0.549,0)
    Button:
        id: Closegame
        text: 'Close game'
        size_hint: 0.5, 0.2
        pos_hint: {"center_x":0.5}

问题原因 #

1. 布局溢出：所有元素的size_hint_y总和为0.2 + 0.2 + 0.1 + 0.2 + 0.1 + 0.2 + 0.1 + 0.2 = 1.3，超过了BoxLayout的可用垂直空间，导致所有元素被挤出可视区域，显示黑屏。
2. 无效间隔方式：用透明按钮做间隔既冗余又容易导致布局计算错误，BoxLayout自带spacing属性可以直接设置元素间距。
3. 字体大小错误：Multiplayer按钮的font_size设为2，几乎无法看到文本。
4. 元素未居中：大部分按钮没有设置pos_hint: {"center_x":0.5}，即使大小是0.5也会靠左显示，进一步加剧布局混乱。

修复后的IrishSnaps.kv文件 #

<MainMenu>:
    orientation:'vertical'
    spacing: 20  # 直接设置元素间垂直间距，替代透明按钮
    padding: 50

    Label:
        text: 'Irish Snaps'
        size_hint_y: 0.2
        font_size: 30
        pos_hint: {"center_x":0.5}

    Button:
        id: Singleplayer
        text: 'Singleplayer'
        size_hint: 0.5, 0.15
        font_size: 24
        background_color: (0.811,0.745,0.549,1)
        pos_hint: {"center_x":0.5}

    Button:
        id: Multiplayer
        text: 'Multiplayer'
        size_hint: 0.5, 0.15
        font_size: 24  # 修正字体大小
        background_color: (0.811,0.745,0.549,1)
        pos_hint: {"center_x":0.5}

    Button:
        id: Statistics
        text: 'Statistics'
        size_hint: 0.5, 0.15
        font_size: 24
        background_color: (0.811,0.745,0.549,1)
        pos_hint: {"center_x":0.5}

    Button:
        id: Closegame
        text: 'Close game'
        size_hint: 0.5, 0.15
        font_size: 24
        background_color: (0.811,0.745,0.549,1)
        pos_hint: {"center_x":0.5}

说明 #

• 用spacing:20直接设置元素间的垂直间隔，删除了所有透明占位按钮，简化布局。
• 调整所有按钮的size_hint_y为0.15，加上标签的0.2，总和为0.2 + 0.15*4 = 0.8，留有余量避免溢出。
• 给所有元素添加pos_hint: {"center_x":0.5}，确保它们在水平方向居中显示。
• 修正了Multiplayer按钮的字体大小，使其可见。

运行修复后的代码，就能正常显示带标签和4个按钮的菜单，元素间也有均匀的间隔。

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