Kivy FloatLayout异常：Label无法默认居中显示

问题描述 #

主布局为垂直方向的BoxLayout（MainWindow），第一个子BoxLayout通过Canvas绘制的Ellipse可完美居中，底部还有一个栏位BoxLayout。但在该子BoxLayout中添加FloatLayout后，文本为“Hello”的Label既不在父BoxLayout中居中，也无法与Ellipse对齐。

最终效果：Label显示在界面左上角，未与居中的蓝色Ellipse对齐。

代码片段 #

Python代码 #

from kivymd.app import App
from kivy.core.window import Window
from kivy.uix.boxlayout import BoxLayout

Window.size =(290, 590)

class MainWindow(BoxLayout): 
    pass

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

TestApp().run()

kv文件代码 #

<MainWindow>:    
    orientation: "vertical"
    background_color: 0,0,0,1
    BoxLayout:
        id: box
        background_color: 0,0,0,1
        canvas:
            Color:
                rgba: 0,0,255,1
            Ellipse:
                size: 180, 180
                pos: [self.center_x - 180/2, self.center_y - 180/2]
        FloatLayout:
            Label:
                text: "Hello"
    BoxLayout:
        id: BottomBar
        orientation: "horizontal"
        size_hint: 1, .2
        ToggleButton:
            background_color: (0,0,0,1) if self.state == "normal" else (255,0,0,1)
            text: "Stats"
            group: "Bottom"
            state: "down"
            on_press:
                print(root.ids.box.pos)
        ToggleButton:
            text: "Press"
            background_color: (0,0,0,1) if self.state == "normal" else (255,0,0,1)
            group: "Bottom"

已尝试的方法 #

• 调整所有元素的pos、pos_hint和size参数
• 将FloatLayout替换为GridLayout
  均未解决问题，感觉FloatLayout未被纳入父BoxLayout的布局管理。

解决方案 #

问题核心是布局的空间约束和元素定位规则未明确：

1. 父BoxLayout（id为box）未明确空间占比，导致内部FloatLayout的空间范围模糊
2. Label未设置居中定位属性，默认会显示在容器左上角

修改后的kv文件代码 #

<MainWindow>:    
    orientation: "vertical"
    background_color: 0,0,0,1
    BoxLayout:
        id: box
        # 明确占据底部栏外的所有空间
        size_hint: 1, 0.8
        background_color: 0,0,0,1
        canvas:
            Color:
                rgba: 0,0,255,1
            Ellipse:
                size: 180, 180
                pos: [self.center_x - 180/2, self.center_y - 180/2]
        FloatLayout:
            # 让FloatLayout填满父容器
            size_hint: 1, 1
            Label:
                text: "Hello"
                # 设置Label在FloatLayout中居中
                pos_hint: {"center_x": 0.5, "center_y": 0.5}
                # 可选：调整字体大小提升显示协调性
                font_size: 24
    BoxLayout:
        id: BottomBar
        orientation: "horizontal"
        size_hint: 1, .2
        ToggleButton:
            background_color: (0,0,0,1) if self.state == "normal" else (255,0,0,1)
            text: "Stats"
            group: "Bottom"
            state: "down"
            on_press:
                print(root.ids.box.pos)
        ToggleButton:
            text: "Press"
            background_color: (0,0,0,1) if self.state == "normal" else (255,0,0,1)
            group: "Bottom"

关键修改点 #

• 给box设置size_hint: 1, 0.8，明确其与底部栏的空间分配（总和为1）
• 给FloatLayout设置size_hint: 1, 1，确保它填满父容器
• 给Label添加pos_hint: {"center_x": 0.5, "center_y": 0.5}，让它在FloatLayout中居中，与Canvas绘制的Ellipse对齐

如果不需要FloatLayout，可直接在box中添加Label并设置定位，实现更简洁的布局：

<MainWindow>:    
    orientation: "vertical"
    background_color: 0,0,0,1
    BoxLayout:
        id: box
        size_hint: 1, 0.8
        background_color: 0,0,0,1
        canvas:
            Color:
                rgba: 0,0,255,1
            Ellipse:
                size: 180, 180
                pos: [self.center_x - 180/2, self.center_y - 180/2]
        Label:
            text: "Hello"
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            font_size: 24
    # 底部栏代码保持不变

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