如何在Kivy中实现BoxLayout的垂直居中布局？

要让你的主布局在屏幕中垂直居中、上下边距一致，可以通过以下两种方式修改代码：

方法一：使用AnchorLayout作为根容器 #

AnchorLayout是实现居中定位最直接的容器，它可以将子控件固定在屏幕的中心位置。

修改要点：

• 将根容器从BoxLayout改为AnchorLayout
• 给主layout设置size_hint_y=None，让它根据内部控件的高度自适应，避免占据整个屏幕高度
• 绑定minimum_height属性，确保layout高度匹配内容高度

修改后的完整代码：

import kivy
kivy.require('2.0.0')
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
from kivy.uix.textinput import TextInput
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.button import Button
from kivy.uix.anchorlayout import AnchorLayout  # 导入AnchorLayout


class WeatherApp(App):
    def build(self):
        # Background Image
        background = Image(source='weather_background.jpg', allow_stretch=True, keep_ratio=False)

        # Main Layout
        layout = BoxLayout(orientation='vertical', spacing=10, padding=50, size_hint_y=None)
        # 让layout高度自适应内容
        layout.bind(minimum_height=layout.setter('height'))

        # Group One: Name Input Field and Change Button
        group_one = BoxLayout(orientation='horizontal', spacing=10)
        name_input = TextInput(hint_text='Enter Your Name', multiline=False, size_hint=(0.5, None), size=(100, 32))
        name_button = Button(text='Change', size_hint=(None, None), size=(100, 32))
        group_one.add_widget(name_input)
        group_one.add_widget(name_button)
        layout.add_widget(group_one)

        # Group Two: Location Input Field and Change Button
        group_two = BoxLayout(orientation='horizontal', spacing=10)
        location_input = TextInput(hint_text='Enter Last Name', multiline=False, size_hint=(0.5, None), size=(100, 32))
        location_button = Button(text='Change', size_hint=(None, None), size=(100, 32))
        group_two.add_widget(location_input)
        group_two.add_widget(location_button)
        layout.add_widget(group_two)

        # Group Three: Temperature Unit Selection
        group_three = BoxLayout(orientation='horizontal', spacing=10)
        unit_button_c = ToggleButton(text='C', group='unit', size_hint=(0.5, None), height=32)
        unit_button_f = ToggleButton(text='F', group='unit', size_hint=(0.5, None), height=32)
        group_three.add_widget(unit_button_c)
        group_three.add_widget(unit_button_f)
        layout.add_widget(group_three)

        # Group Four: AI Tone Input Field and Change Button
        group_four = BoxLayout(orientation='horizontal', spacing=10)
        tone_input = TextInput(hint_text='Enter Location', multiline=False, size_hint=(0.5, None), size=(100, 32))
        tone_button = Button(text='Change', size_hint=(None, None), size=(100, 32))
        group_four.add_widget(tone_input)
        group_four.add_widget(tone_button)
        layout.add_widget(group_four)

        # Add background and layout to the root widget
        root = AnchorLayout()
        root.add_widget(background)
        root.add_widget(layout)

        return root


if __name__ == '__main__':
    WeatherApp().run()

方法二：用BoxLayout添加占位控件实现居中 #

如果坚持使用BoxLayout作为根容器，可以将其设置为垂直方向，然后在主布局的上下添加两个占位的空Widget，让它们平分剩余空间，从而把主布局挤到中间。

修改要点：

• 将根BoxLayout的orientation设为vertical
• 添加两个Widget，设置size_hint_y=1，它们会自动占据上下的剩余空间
• 主layout同样设置size_hint_y=None并绑定高度自适应

修改后的根容器部分代码：

# 导入Widget
from kivy.uix.widget import Widget

# ... 其他代码不变 ...

# Add background and layout to the root widget
root = BoxLayout(orientation='vertical')
# 确保背景覆盖整个屏幕
background.size_hint = (1, 1)
root.add_widget(background)
# 添加上方占位控件
root.add_widget(Widget(size_hint_y=1))
root.add_widget(layout)
# 添加下方占位控件
root.add_widget(Widget(size_hint_y=1))

两种方法都能实现主布局垂直居中的效果，第一种方法更简洁直观，推荐使用。

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