使用MDBoxLayout时KivyMD控件显示在页面底部如何解决

问题根因 #

这个问题和你用MDBoxLayout还是原生BoxLayout、MDScreen还是原生Screen没有关系，核心原因是KivyMD控件的默认尺寸属性和原生Kivy控件不同：

• 原生Kivy的控件默认size_hint_y = 1，会自动占满父布局分配的垂直空间
• KivyMD的MDTextField、MDRaisedButton这类控件默认设置了size_hint_y = None，高度会根据自身内容自适应计算

当vertical方向的BoxLayout（不管是原生还是MD版本）里放的全是自适应高度的子控件时，BoxLayout自身的高度会自动收缩到刚好包裹所有子控件的总高度，而BoxLayout默认的y轴坐标是0，也就是父容器的底部位置，最终就表现为所有控件全部堆在页面底部。

修复方法 #

二选一即可：

方法1：让布局撑满全屏，从上到下自动排布 #

给MDBoxLayout添加size_hint_y: 1参数，强制它占满整个屏幕的垂直高度，BoxLayout会自动从顶部开始按顺序排列子控件，需要边距、控件间距可以额外加padding、spacing参数：

ScreenManager:
    MDScreen:
        name: "main"
        MDBoxLayout:
            orientation: "vertical"
            size_hint_y: 1
            spacing: "20dp"
            padding: ("20dp", "40dp", "20dp", "20dp")
            MDTextField:
                hint_text: "User ID"
                hint_size: 36
                font_size: 36
            MDTextField:
                hint_text: "Message"
                hint_size: 36
                font_size: 36
            MDRaisedButton:
                text: "START"
                font_size: 36
                increment_width: 100
                pos_hint: {"center_x": .5}

方法2：布局自适应内容大小，固定在顶部 #

如果不需要布局撑满全屏，只想让布局刚好包裹控件、靠页面顶部显示，就给MDBoxLayout开启自适应尺寸，同时设置顶部对齐：

MDBoxLayout:
    orientation: "vertical"
    adaptive_size: True
    pos_hint: {"top": 1}
    spacing: "20dp"
    padding: "20dp"
    # 子控件配置和上面一致即可

注：之前替换布局类没生效，就是因为问题根源是KivyMD控件的默认size_hint属性，和布局容器类本身无关。

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