如何解决Kivy中Widget内按钮卡在UI左下角的问题？

我明白你的需求：希望WidgetwithButton里的按钮和MainScreen中FloatLayout里的按钮样式一致，并且按照你定义的pos_hint显示在屏幕上方偏下的位置，但现在它却卡在左下角几乎看不清。

先看看你提供的代码：

Python代码 #

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition

class ScreenManagement(ScreenManager):
    pass

class AnotherScreen(Screen):
    pass

class MainScreen(Screen):
    pass

class WidgetwithButton(Widget):
    pass

presentation = Builder.load_file("buttonformatexample.kv")

class MainApp(App):
    def build(self):
        return presentation

if __name__ == "__main__":
    MainApp().run()

KV代码 #

#: import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManagement:
    transition: FadeTransition()
    MainScreen:

<WidgetwithButton>:
    Button:
        text: "stuff"
        font_size: 30
        size_hint: 0.25, 0.1
        pos_hint: {"x":0, "top": 0.69}
<MainScreen>:
    WidgetwithButton:    
    FloatLayout:    
        Button:
            text: "stuff"
            font_size: 30
            size_hint: 0.25, 0.1
            pos_hint: {"x":0, "top": 0.8}

问题原因 #

问题出在Widget类的默认行为上：Widget默认的尺寸是(100, 100)，默认位置在屏幕左下角(0,0)。你给按钮设置的pos_hint是相对于这个小小的WidgetwithButton容器的，而不是整个屏幕。所以按钮其实是显示在这个小容器的内部，看起来就像是卡在屏幕左下角了。

解决方法 #

这里有两种简单的修复方式：

方法一：让WidgetwithButton铺满整个屏幕

修改WidgetwithButton的KV规则，添加尺寸和位置的设置，让它占满父容器（也就是MainScreen）：

<WidgetwithButton>:
    size_hint: 1, 1  # 设置为占满父容器的宽高
    pos_hint: {"x": 0, "y": 0}  # 定位到父容器的左下角（默认位置，显式写更清晰）
    Button:
        text: "stuff"
        font_size: 30
        size_hint: 0.25, 0.1
        pos_hint: {"x":0, "top": 0.69}

这样WidgetwithButton就和屏幕一样大了，按钮的pos_hint就会参考整个屏幕的坐标，自然能显示在你想要的位置。

方法二：让WidgetwithButton继承FloatLayout

既然FloatLayout默认会占满父容器的空间，你可以直接把WidgetwithButton的继承类改成FloatLayout，这样不需要额外设置尺寸：
首先修改Python代码：

from kivy.uix.floatlayout import FloatLayout  # 导入FloatLayout

# 把继承Widget改成继承FloatLayout
class WidgetwithButton(FloatLayout):
    pass

这样你的KV代码不需要修改，按钮就能自动参考整个屏幕的坐标来定位了，效果和方法一一样。

两种方法都能解决你的问题，选哪个看你自己的习惯~

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