Kivy 中心按钮

Question

我正在 Kivy 中制作一个简单的测试应用程序以供学习：

class MyWidget(GridLayout):
    def __init__(self, **kwargs):
        super(MyWidget, self).__init__(**kwargs)        
        Window.clearcolor = (1, 1, 1, 1)

class PhoneApp(App):
    def build(self):
        return MyWidget()

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

这是我的 .kv:

#:kivy 2.1.0
<Label>
    size_hint_y: None
    height: self.texture_size[1]
    color: 0, 0, 0, 1

<Image>
    size_hint_y: None
    height: self.texture_size[1]

<Button>
    size_hint_x: None
    size_hint_y: None
    width: self.texture_size[0]
    height: self.texture_size[1]

<GridLayout>
    cols: 1
    size_hint: (0.5, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}

<MyWidget>:
    Image:
        source: "captus.png"
    
    Label:
        text: "Test Message"        

    Button:
        text: "Second test"

问题是按钮没有对齐，如下图所示：

绿色按钮“第二次测试”应该居中，在 window 的中间，就像“测试消息”一样。

我一直在玩 pos_hint: {'center_x':0.5, 'center_y':0.5} 但我无法将那个按钮居中...

如何使“第二次测试”按钮居中？

Answer 1

问题是 GridLayout 根本不尊重 pos_hint。因此，让小部件以 GridLayout 单元格为中心需要一些计划。

一种方法是让 Button 填满 GridLayout 单元格的宽度。这实际上并没有使 Button 居中，但 Button 的文本将居中。为此，只需从 kv.

中的 <Button>: 规则中删除 size_hint_x: None 行

另一种方法是将 Button 放入填充 GridLayout 单元格的容器中，然后将 Button 置于该容器的中心。 AnchorLayout 就是为了这个目的。尝试将 <MyWidget>: 规则的 Button 部分替换为：

AnchorLayout:
    size_hint_y: None
    height: butt.height  # same height as the Button
    Button:
        id: butt
        text: "Second test"

第三种选择是不使用 GridLayout。如果您只使用 1 列或 1 行，BoxLayout 可能是更好的方法。而一个BoxLayout支持pos_hints（部分见documentation）。要使用此方法，请将 MyWidget 更改为扩展 BoxLayout:

class MyWidget(BoxLayout):
    def __init__(self, **kwargs):
        super(MyWidget, self).__init__(**kwargs)
        Window.clearcolor = (1, 1, 1, 1)

然后你可以使用kv中@mohammad-alqashqish建议的pos_hint:

<Label>
    size_hint_y: None
    height: self.texture_size[1]
    color: 0, 0, 0, 1

<Image>
    size_hint_y: None
    height: self.texture_size[1]

<Button>
    size_hint_x: None
    size_hint_y: None
    width: self.texture_size[0]
    height: self.texture_size[1]

<GridLayout>
    cols: 1
    size_hint: (0.5, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}

<MyWidget>:
    orientation: 'vertical'
    Image:
        source: "tester.png"
    
    Label:
        text: "Test Message"  

    Button:
        text: "Second test"   
        pos_hint: {'center_x': 0.5}

还有一点要注意。当您在 kv 中为标准小部件制定规则时，例如 <Label>:，该规则将应用于您在 kv 加载后在您的应用程序中创建的每个 Label。

Kivy 中心按钮

Kivy center button

python

kivy