Kivy에서 위젯을 배치하고 레이아웃을 사용하려면 어떻게해야합니까?

Question

이것은 (https://imgur.com/a/Y9Xwl) (어떤 이유로 든 포맷 할 수 없음) Kivy에서 현재 만들고자하는 사용자 인터페이스입니다. 나는 레이아웃 시스템을 이해하지 못하고, 많은 문서를 읽고, 많은 유튜브 비디오를 보았으며, 코드로 꼼꼼히 살펴 봤지만 여전히 원하는 결과를 얻을 수 없기 때문에 이것을 재현하는 데 어려움을 겪고있다.

이

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() 

이 (https://imgur.com/a/zW2z0) (일부를 포맷 할 수 없습니다 : 지금까지 내 코드는, 그들이 단지 내가 그들을 방법을/크기 위치 아니에요, 내가 그 안에 필요한 모든 위젯을 가지고 이유)는 그 코드의 출력이 어떻게 생겼는지입니다. "<"버튼이있는 상단 막대는 내가 원하는 방식이고 그 아래에있는 위젯의 수평 행을 편집하려고했습니다. 드롭 다운 메뉴에 '레서피 선택'레이블을 어떻게 배치 할 수 있습니까? 나는 y 축을 여러 번 변경하려고 시도했지만 항상 boxlayout의 botton에 가라 앉는다. 나는 dropdown을위한 새로운 boxlayout을주고 자 시도했다. pos : self.parent.x, self.parent.y * 0.5 부모 레이아웃 (boxlayout)의 y- 축의 중간까지 가겠다는 가정하에 아직 아무것도. floatlayout을 사용하고 모든 위젯을 수동으로 배치하는 것이 더 좋을지 궁금하지만 Android 기기 용 APK로 컴파일 할 때 이것이 어떻게 작동하는지 확신 할 수 없습니다. 내 위젯을 화면에 배치하는 가장 좋은 방법은 무엇입니까?

Answer 1

pos_hint을 사용하십시오.
pos_hint: {'top': 1} 인 경우 위젯의 상단이 상위 상자의 지붕을 치게됩니다.
위젯 높이가 상위 상자 (size_hint: 0.5, 0.3)의 30 % 인 경우 세로로 가운데에 배치하려면 pos_hint: {'top': 0.5 + 0.3/2}이 필요합니다. 즉, 위젯의 상단이 지붕의 절반 + 위젯의 절반이됩니다. 높이는 부모 상자의 15 %입니다. 위젯의 size_hint 당신이 뭔가를 할 수있는 동적 인 경우 맨 :

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

우리에게 65 %를 소요
. 이것에 대한

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}