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

Question

这：(https://imgur.com/a/Y9Xwl)（由于某种原因无法格式化）是我目前尝试在 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()

This(https://imgur.com/a/zW2z0)（由于某种原因无法格式化）是该代码的输出。带有“

Answer 1

为此使用pos_hint。
如果pos_hint: {'top': 1}，小部件的顶部会碰到父框的顶部。
因此，如果您的小部件高度是其父框 (size_hint: 0.5, 0.3) 的 30%，并且您希望它垂直居中，您需要 pos_hint: {'top': 0.5 + 0.3/2}，这意味着小部件的顶部将是屋顶的一半 + 一半小部件高度是父框的 15%。
这使我们上升了 65% :)

size_hint: 0.5, 0.3
pos_hint: { 'top' : 0.65}

如果小部件 size_hint 是动态的，您可以这样做。

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

让我们以您的Select recipe 按钮为例：

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}