Kivy kwestia wyboru układu

Question

Mam zamiar stworzyć interfejs użytkownika Kivy dla mojego projektu robota, moim jedynym problemem jest praca z układami, jestem zdezorientowany.

Dołożę obraz GUI, który chcę stworzyć dla niego w Kivy, proszę wskazać, co jest najlepszym wyborem (BOX, Grid, Relative, ...) Wiem, że muszę je połączyć i użyć co najmniej dwóch układów, ale Nie mogę poprawnie wybrać, czytałem dokumentację Kivy i próbowałem użyć Kivy Designer, ale nadal nie mogłem wybrać najlepszych układów. Maksymalny rozmiar okna to 800x600.

Answer 1

wolałbym SimpleTableLayout, to widget dostępny w Kivy Garden: Simple Table Laout - Kivy Garden

Jeśli nie wiesz jak korzystać Kivy-Garden tutaj są instrukcje instalacyjne: How to install kivy garden

SimpleTableLayout obsługuje przechodzenie między wierszami i kolumnami oraz pobieranie widgetu określonej komórki: SimpleTableLayout.cell(row, col)

Mały przykład aplikacji:

<SimpleTableLayout>: 
    rows:10 
    cols:14 

    <Gauge1>: 
     rowspan:2 
     colspan:2 

    <SpaceHolderWidget>: 
     rowspan:12 

    <SpaceHolderWidget>: 
     colspan: 2 

    <SmallGauge1>: 

    <SpaceHolderWidget>: 

    <SmallGauge2>: 

    <SpaceHolderWidget>: 
     colspan:2 

    <SpaceHolderWidget>: 
     rowspan:12 

    <Gauge2>: 
     rowspan:2 
     colspan:2 

    <Canvas>: 
     rowspan:5 
     colspan:7 

Answer 2

Jeśli nie wiesz, jaki układ w użyciu, a następnie użyć układ siatki, ponieważ jest to najbardziej wszechstronny.

Ogólnie, jeśli chcesz wstawić n widżetów z rzędu, ustaw rows: 1. Jeśli chcesz umieścić n widżetów w kolumnie, ustaw cols: 1.

Następnie zmodyfikuj size_hint, aby ustawić prawidłowy rozmiar widgetu.

Możesz używać pustych etykiet, aby tworzyć spacje między widżetami.

O Kivy Designer - lepiej najpierw nauczyć się ręcznego ustawiania interfejsu przed użyciem tego narzędzia.

#:kivy 1.9.0 

<RoundGauge@Button>: 
    text: 'gauge' 

<SidePanel@GridLayout>: 
    cols: 1 
    size_hint_x: .2 

    RoundGauge: 
     size_hint_y: .5 
    RoundGauge: 
     size_hint_y: .5 

    GridLayout: 
     rows: 1 

     Slider: 
      orientation: 'vertical' 
     Slider: 
      orientation: 'vertical' 

# main layout divided into bottom gauges and screen part 
GridLayout: 
    cols: 1 

    canvas: 
     Color: 
      rgba: 1,1,1,.5 
     Rectangle: 
      size: self.size 

    # both side panels and screen part 
    GridLayout: 
     rows: 1 

     # left panel 
     SidePanel: 

     # middle panel 
     GridLayout: 
      cols: 1 

      # upper gauges 
      GridLayout: 
       rows: 1 
       size_hint_y: .3 

       Label: 
       RoundGauge: 
        size_hint_x: .5 
       Label: 
        size_hint_x: .1 
       RoundGauge: 
        size_hint_x: .5 
       Label: 

      Label: 
       text: 'screen' 
       canvas: 
        Color: 
         rgba: 1,1,1,.5 
        Rectangle: 
         size: self.size 
         pos: self.pos 

      # bottom gauges 
      GridLayout: 
       rows: 1 
       size_hint_y: .3 

       RoundGauge: 
       RoundGauge: 
       RoundGauge: 
       RoundGauge: 
       RoundGauge: 
       RoundGauge: 

     # right panel 
     SidePanel: 

    GridLayout: 
     rows: 1 
     size_hint_y: .2 

     RoundGauge: 
     RoundGauge: 
     RoundGauge: 
     RoundGauge: 
     RoundGauge: 
     RoundGauge: 
     RoundGauge: