Python 如何在Kivy中定位小部件和使用布局？

这个：（）（由于某种原因无法格式化）是我目前试图在Kivy中创建的用户界面。我很难重新创建它，因为我不了解布局系统，我阅读了大量文档，观看了大量Youtube视频，修改了代码，但仍然无法获得预期的结果。到目前为止，这是我的代码，它包含了我需要的所有小部件，它们的大小/位置与我的要求不同：

from kivy.app import App
from kivy.uix.label import Label
from kivy.lang import Builder
from kivy.properties import ListProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.dropdown import DropDown
from kivy.uix.button import Button

from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition

class CaloriesScreen(Screen):
    pass

class categoriesScreen(Screen):
    pass

class loginScreen(Screen):
    pass

class registerScreen(Screen):
    pass

class shoppingListScreen(Screen):
    pass

class theScreenManager(ScreenManager):
    pass

root_widget = Builder.load_string('''
#:import FadeTransition kivy.uix.screenmanager.FadeTransition

theScreenManager:
    transition: FadeTransition()
    CaloriesScreen:

<CaloriesScreen>:
    name: 'calories'
    BoxLayout:
        orientation: 'vertical'

        BoxLayout:
            orientation: 'horizontal'
            size_hint: 1, .3
            Button:
                text: '<'
                size_hint: .1, 1
                font_size: 75
                background_normal: ""
                background_color: 0.18, .5, .92, 1
                on_release: app.root.current = 'main' 

            Label:
                text: 'Calories'
                halign: 'left'
                font_size: 50
                canvas.before:
                    Color:
                        rgb: 0.18, .5, .92
                    Rectangle:
                        pos: self.pos
                        size: self.size
            Widget:
                size_hint: .1, 1
                canvas.before:
                    Color:
                        rgb: 0.18, .5, .92
                    Rectangle:
                        pos: self.pos
                        size: self.size

        BoxLayout:
            orientation: 'horizontal'
            size_hint: 1, .4
            canvas.before:
                Color:
                    rgb: 0.8, 0.8, 0.8
                Rectangle:
                    pos: self.pos
                    size: self.size
            Label:
                text: 'Recipes'
                font_size: 30
                color: 0.18, .5, .92, 1
                size_hint: 1, 1


            Button:
                id: btn
                text: 'Select a recipe...'
                on_release: dropdown.open(self)
                height: '48dp'
                size_hint: .5, .3
                pos: self.x, .3

            DropDown:

                id: dropdown
                on_parent: self.dismiss()
                on_select: btn.text = '{}'.format(args[1])


                Button:
                    text: 'First recipe'
                    size_hint_y: None
                    height: '48dp'
                    on_release: dropdown.select('First Item')

                Button:
                    text: 'Second recipe'
                    size_hint_y: None
                    height: '48dp'
                    on_release: dropdown.select('Second Item')

                Button:
                    text: 'Third recipe'
                    size_hint_y: None
                    height: '48dp'
                    on_release: dropdown.select('Third Item')


            Button:
                text: '+'
                font_size: 30
                background_normal: ""
                background_color: 0.18, .5, .92, 1
                #on_release:

        BoxLayout:
            orientation: 'vertical'
            BoxLayout:
                orientation: 'horizontal'
                Label:
                    text: 'Food'
                    font_size: 30
                    color: 0.18, .5, .92, 1
                Label:
                    text: 'Cal'
                    font_size: 30
                    color: 0.18, .5, .92, 1
            BoxLayout:
                orientation: 'horizontal'
                Label:
                    text: 'Simple Cheese Omelette'
                    font_size: 30
                    color: 0.18, .5, .92, 1
                Label:
                    text: '241'
                    font_size: 30
                    color: 0.18, .5, .92, 1
            BoxLayout:
                orientation: 'horizontal'
                Label:
                    text: 'Burger'
                    font_size: 30
                    color: 0.18, .5, .92, 1
                Label:
                    text: '295'
                    font_size: 30
                    color: 0.18, .5, .92, 1
            BoxLayout:
                orientation: 'horizontal'
                Label:
                    text: 'Tomato and caper linguine '
                    font_size: 30
                    color: 0.18, .5, .92, 1
                Label:
                    text: '393'
                    font_size: 30
                    color: 0.18, .5, .92, 1
        BoxLayout:
            orientation: 'vertical'
            canvas.before:
                Color:
                    rgb: 0.8, 0.8, 0.8
                Rectangle:
                    pos: self.pos
                    size: self.size
            BoxLayout:
                orientation: 'horizontal'
                Label:
                    text: 'Total Cal'
                    font_size: 30
                    color: 0.18, .5, .92, 1
                Label:
                    text: '929'
                    font_size: 30
                    color: 0.18, .5, .92, 1
            BoxLayout:
                orientation: 'horizontal'
                Label:
                    text: 'You are under calories'
                    font_size: 30
                    color: 0.18, .5, .92, 1
            Button:
                text: 'Clear'
                font_size: 75
                background_normal: ""
                background_color: 0.18, .5, .92, 1
                #on_release:


''')

class RecipeApp(App):
    def build(self):
        return root_widget

if __name__ == "__main__":
    RecipeApp().run()

从kivy.app导入应用
从kivy.uix.label导入标签
从kivy.lang导入生成器
从kivy.properties导入ListProperty
从kivy.uix.boxlayout导入boxlayout
从kivy.uix.dropdown导入下拉列表
从kivy.uix.button导入按钮
从kivy.uix.screenmanager导入screenmanager、Screen、FadeTransition
类热量屏幕（屏幕）：
通过
类别屏幕（屏幕）：
通过
类登录屏幕（屏幕）：
通过
类注册表屏幕（屏幕）：
通过
类别shoppingListScreen（屏幕）：
通过
为屏幕管理器（屏幕管理器）分类：
通过
root\u widget=Builder.load\u字符串（“”）
#：导入FadeTransition kivy.uix.screenmanager.FadeTransition
屏幕管理器：
转换：FadeTransition（）
热量屏幕：
:
名称：“卡路里”
盒子布局：
方向：“垂直”
盒子布局：
方向：“水平”
尺寸提示：1.3
按钮：
文本：'为此使用
pos\u提示。

如果
pos\u提示：{'top'：1}
，小部件的顶部将撞到父框的顶部。

因此，如果您的小部件高度是其父框的30%（
size\u hint:0.5，0.3
），并且您希望它垂直居中，那么您需要
pos\u hint:{'top'：0.5+0.3/2}
，这意味着小部件的顶部将是顶部的一半+小部件高度的一半，即父框的15%。

这就让我们65%的人跻身榜首：）

如果widgets size_提示是动态的，您可以这样做

pos_hint: {'top': 0.5 + self.size_hint[1]/2}

以您的
选择配方
按钮为例：

Button:
    id: btn
    text: 'Select a recipe...'
    on_release: dropdown.open(self)
    height: '48dp'
    size_hint: .5, .3
    pos_hint: {'top': 0.5 + self.size_hint[1]/2}

谢谢你。你知道我如何将一个小部件集中在一个boxlayout中，而其他小部件集中在同一个水平boxlayout中吗？@WewLad yea基本上就是这样。我以你的食谱按钮为例进行了更新。谢谢你，尽管我很好奇。也可以指定“left”：1或“right”：1以及“top”：1，所以它是左上角和右上角吗？对不起，我用词太差了。我的意思是，你能说。。。上：1和左：1所以它到了左上角？
Button:
    id: btn
    text: 'Select a recipe...'
    on_release: dropdown.open(self)
    height: '48dp'
    size_hint: .5, .3
    pos_hint: {'top': 0.5 + self.size_hint[1]/2}