如何在 Kivy 中居中按钮？

Posted 2023-04-14

【中文标题】如何在 Kivy 中居中按钮？

【英文标题】：How to center buttons in Kivy?

【发布时间】：2016-06-04 23:24:44

【问题描述】：

我是 Python UI 编程的新手，我正在尝试 Kivy。我想在我的屏幕上居中一些按钮，但按钮不会从窗口的右下角移动。我想知道是否有人能指出我做错了什么或遗漏了什么？

vgx.kv:

#:kivy 1.9.1

<VgxMainScreen>:
    BoxLayout:
        size_hint: 0.2,0.2
        size: 200, 100
        orientation: 'vertical'

        Button:
            text: 'Game Select'
        Button:
            text: 'Options'
        Button:
            text: 'Controllers'

<VgxUI>:
    AnchorLayout:
        anchor_x: 'center'
        VgxMainScreen:
            size_hint: 0.2,0.2

<VgxApp>:
    FloatLayout:
        VgxUI:
            center: 0.5, 0.5

VgxApp.py：

import kivy
from kivy.app import App
from kivy.uix.widget import Widget
kivy.require('1.9.1')

class VgxMainScreen(Widget):
    pass

class VgxUI(Widget):
    pass

class VgxApp(App):
    def build(self):
        return VgxUI()

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

【参考方案1】：

编辑：调试小部件的最佳方式是更改它们的背景颜色:)。

canvas.before:
    Color:
        rgba: X, X, X, 1
    Rectangle:
        pos: self.pos
        size: self.size

问题是您的 BoxLayout 没有相对于其父级定位，即使它位于其中。

我在这里所做的是将BoxLayout 定位到其父级的大小和位置，使用：

size: self.parent.size
pos: self.parent.pos

我还将size 属性从VgxMainScreen 移动到VgxUI，因为我认为这是更常见的用例（您可以拥有多个VgxMainScreens，每个VgxMainScreens 具有不同的大小）。带背景颜色的完整代码：

#:kivy 1.9.1

<VgxMainScreen>:
    size_hint: None, None
    canvas.before:
        Color:
            rgba: 1, 0, 0, 1  # red
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        canvas.before:
            Color:
                rgba: 0, 0, 1, 1  # blue
            Rectangle:
                pos: self.pos
                size: self.size

        size: self.parent.size  # important!
        pos: self.parent.pos  # important!
        orientation: 'vertical'

        Button:
            text: 'Game Select'
        Button:
            text: 'Options'
        Button:
            text: 'Controllers'

<VgxUI>:
    AnchorLayout:
        canvas.before:
            Color:
                rgba: 1, 1, 1, 1  # white
            Rectangle:
                pos: self.pos
                size: self.size
        size: self.parent.size
        anchor_x: 'center'
        anchor_y: 'center'
        VgxMainScreen:
            size: 200, 100

<VgxApp>:
    FloatLayout:
        VgxUI:
            center: 0.5, 0.5

对此还有另一种解决方案。

你可以使用RelativeLayout，它里面的所有小部件都会相对于这个布局定位。

<VgxMainScreen>:
    size_hint: None, None

    RelativeLayout:
        pos: self.parent.pos
        size: self.parent.size

        BoxLayout:
            orientation: 'vertical'
            Button:
                text: 'Game Select'
            Button:
                text: 'Options'
            Button:
                text: 'Controllers'

在使用 Kivy 时，我个人曾多次摸不着头脑，想知道为什么我的小部件没有按照我认为的那样定位:)。

【讨论】：

有趣！如果我在 VgxUI 规则中有 AnchorLayout，为什么它不起作用？它不应该将 VgxMainScreen 添加到它的 AnchorLayout 中吗？

【参考方案2】：

VgxMainScreen 是一个 Widget，因此它不会对其子级应用任何定位或调整大小（只有 Layouts 会这样做），因此 BoxLayout 的默认位置为 (0, 0)，大小为 (100, 100)。

使 VgxMainScreen 继承自其他东西，例如 FloatLayout。