如何在KivyMD中调整GridLayout至屏幕居中位置

嘿，我看了你的代码，问题出在GridLayout没有被正确设置为在屏幕中居中对齐～ 咱们来快速修改一下，让那6个卡片整整齐齐地待在屏幕中央：

核心问题分析 #

你现在的scr 1里直接把GridLayout放在MDScreen上，而MDScreen默认是绝对布局，GridLayout会从左上角开始排布，自然不会居中。咱们只需要给GridLayout加一个“父容器”来帮它实现居中，或者调整GridLayout自身的位置属性就行。

修改方案（直接可用的完整代码） #

我调整了scr 1的布局结构，给GridLayout套了一层BoxLayout（它会自动占满整个屏幕，并且默认将子控件在水平、垂直方向都居中），同时优化了GridLayout的尺寸设置：

from kivy.lang import Builder
from kivy.properties import ObjectProperty

from kivymd.app import MDApp
from kivymd.uix.scrollview import MDScrollView

KV = '''
<ContentNavigationDrawer>

    MDList:

        OneLineListItem:
            text: "Screen 1"
            on_press:
                root.nav_drawer.set_state("close")
                root.screen_manager.current = "scr 1"

        OneLineListItem:
            text: "Screen 2"
            on_press:
                root.nav_drawer.set_state("close")
                root.screen_manager.current = "scr 2"


MDScreen:
    
    MDTopAppBar:
        pos_hint: {"top": 1}
        elevation: 4
        title: "MDNavigationDrawer"
        left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]

    MDNavigationLayout:

        MDScreenManager:
            id: screen_manager

            MDScreen:
                name: "scr 1"
                # 新增：用BoxLayout作为父容器，自动占满屏幕并居中子控件
                BoxLayout:
                    padding: "10dp"  # 屏幕边缘的留白
                    GridLayout:
                        cols: 3
                        rows: 2
                        spacing: "1dp"
                        # 让GridLayout自适应内部卡片的总尺寸
                        size_hint: None, None
                        size: self.minimum_size

                        MDCard:
                            size_hint: None, None
                            size: "200dp", "200dp"
                            MDLabel:
                                text:"item1"
                                halign: "center"  # 顺带让卡片内的文字也居中啦

                        MDCard:
                            size_hint: None, None
                            size: "200dp", "200dp"
                            MDLabel:
                                text:"item2"
                                halign: "center"

                        MDCard:
                            size_hint: None, None
                            size: "200dp", "200dp"
                            MDLabel:
                                text:"item3"
                                halign: "center"

                        MDCard:
                            size_hint: None, None
                            size: "200dp", "200dp"
                            MDLabel:
                                text:"item4"
                                halign: "center"

                        MDCard:
                            size_hint: None, None
                            size: "200dp", "200dp"
                            MDLabel:
                                text:"item5"
                                halign: "center"

                        MDCard:
                            size_hint: None, None
                            size: "200dp", "200dp"
                            MDLabel:
                                text:"item6"
                                halign: "center"


            MDScreen:
                name: "scr 2"

                MDLabel:
                    text: "Screen 2"
                    halign: "center"

        MDNavigationDrawer:
            id: nav_drawer
            radius: (0, 16, 16, 0)

            ContentNavigationDrawer:
                screen_manager: screen_manager
                nav_drawer: nav_drawer
'''


class ContentNavigationDrawer(MDScrollView):
    screen_manager = ObjectProperty()
    nav_drawer = ObjectProperty()


class Example(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Orange"
        self.theme_cls.theme_style = "Dark"
        return Builder.load_string(KV)


Example().run()

关键修改点说明 #

• 新增BoxLayout父容器：这个BoxLayout会自动填充整个scr 1屏幕，并且默认将子控件（也就是咱们的GridLayout）在水平和垂直方向都居中对齐，这是最省心的居中方式~
• 优化GridLayout尺寸：把GridLayout的size_hint设为None, None，并设置size: self.minimum_size，这样GridLayout会根据内部6个卡片的总大小自动调整自身尺寸，不会超出内容范围
• 额外优化：给每个MDCard里的MDLabel加了halign: "center"，让卡片内的文字也居中，看起来更舒服😉

如果你不想用BoxLayout，也可以直接给GridLayout设置位置属性（不过需要手动计算尺寸）：

MDScreen:
    name: "scr 1"
    GridLayout:
        cols:3
        rows:2
        spacing: "1dp"
        size_hint: None, None
        # 手动计算GridLayout的总尺寸：3个卡片宽度 + 2个间距，2个卡片高度 +1个间距
        size: "602dp", "401dp"  # 3*200dp +2*1dp =602dp；2*200dp+1*1dp=401dp
        pos_hint: {"center_x":0.5, "center_y":0.5}
        # 后面的卡片不变

不过这种方式不够灵活，如果以后改了卡片大小或者间距，还要手动改尺寸，所以还是用BoxLayout的方式更推荐哦~

备注：内容来源于stack exchange，提问作者khang bui