如何在Kivy的KV文件中实现GridLayout内图片与按钮的居中？

问题根源 #

• 最外层GridLayout默认会让子控件填满自身空间，你内部的BoxLayout未设置size_hint（默认值为(1,1)），导致它被拉伸至整个GridLayout的高度。此时pos_hint: {'center_y': .5}无法产生视觉居中效果——控件本身已占满高度，虽中心与容器重合，但内容在控件内的位置未做调整。
• 多层嵌套布局重复设置pos_hint，反而容易引发布局冲突，尤其是父控件尺寸被拉伸时，子控件的位置设置会失效。

解决方案 #

推荐用AnchorLayout作为最外层容器（它专为内容居中设计），同时修正内部布局的尺寸设置，移除冗余的位置属性。以下是修改后的完整KV代码：

AnchorLayout:
    anchor_x: 'center'
    anchor_y: 'center'

    BoxLayout:
        orientation: 'vertical'
        spacing: 10
        size_hint: None, None  # 让布局仅包裹内部内容
        size: self.minimum_size  # 尺寸自适应内部元素的最小需求

        Image:
            source: "./icons/quietKid_.png"
            size_hint: None, None

        BoxLayout:
            orientation: 'horizontal'
            size_hint: None, None
            size: self.minimum_size
            spacing: 10  # 按钮间添加间距提升美观度

            canvas:
                Color:
                    rgba: get_color_from_hex("#171717")
                RoundedRectangle:
                    size: self.size
                    pos: self.pos

            ButtonHover:
                text:'Profil'
                background_color: (0,0,0,0)
                size_hint: None, None
                size: 80, 50
                canvas.after:
                    Color:
                        rgba: get_color_from_hex("#ffffff")
                    Rectangle:
                        pos: (self.pos[0] + 5, self.pos[1])
                        size: (self.width, 1)  # 修正拼写错误，替换原"wysokosc"

            ButtonHover:
                text:'Discord'
                background_color: (0,0,0,0)
                size_hint: None, None
                size: 80, 50
                canvas.after:
                    Color:
                        rgba: get_color_from_hex("#ffffff")
                    Rectangle:
                        pos: (self.pos[0] + 5, self.pos[1])
                        size: (self.width, 1)

            ButtonHover:
                text:'NameMC'
                background_color: (0,0,0,0)
                size_hint: None, None
                size: 80, 50
                canvas.after:
                    Color:
                        rgba: get_color_from_hex("#ffffff")
                    Rectangle:
                        pos: (self.pos[0], self.pos[1])
                        size: (self.width, 1)

关键改动说明 #

1. 替换外层布局：用AnchorLayout替代GridLayout，避免后者默认的拉伸行为干扰居中效果，它能直接将子控件锚定到容器中心。
2. 自适应布局尺寸：给垂直方向的BoxLayout设置size_hint: None, None和size: self.minimum_size，让它仅包裹内部内容，而非占满父容器，确保AnchorLayout能将其整体居中。
3. 移除冗余属性：内部控件无需重复设置pos_hint，垂直/水平BoxLayout会自动管理元素排列。
4. 修正画布绘制错误：将self.wysokosc改为self.width（推测为拼写失误），保证下划线绘制正常。

若需保留最外层GridLayout，可做如下调整：

GridLayout:
    cols: 1
    BoxLayout:
        orientation: 'vertical'
        spacing: 10
        size_hint: None, None
        size: self.minimum_size
        pos_hint: {'center_x': .5, 'center_y': .5}

        # 内部Image和按钮BoxLayout代码同上...

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