Problema di selezione layout Kivy

Question

Ho intenzione di creare un'interfaccia utente Kivy per il mio progetto di robot, il mio unico problema è lavorare con i layout, sono confuso con esso.

Allegherò l'immagine della GUI che voglio creare il layout per questo in Kivy per favore guida la scelta migliore (BOX, Grid, Relative, ..) So che devo mescolarli e usare 2 o più layout insieme ma Non riesco a selezionare correttamente, ho letto la documentazione Kivy e ho provato a utilizzare Kivy Designer ma ancora non ho potuto scegliere i migliori layout. La dimensione massima della finestra è 800x600.

Answer 1

io preferirei il SimpleTableLayout, è un widget disponibile in Kivy Giardino: Simple Table Laout - Kivy Garden

Se non sai come usare Kivy-Garden ecco le istruzioni per l'installazione: How to install kivy garden

SimpleTableLayout supporta lo spanning di righe e colonne e ottiene il widget di una determinata cella: SimpleTableLayout.cell(row, col)

Un piccolo esempio per la tua app:

<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

Se non si sa quale layout da utilizzare, quindi utilizzare layout a griglia, perché è più versatile.

In generale, se si desidera inserire n widget in una riga, impostare rows: 1. Se vuoi inserire n widget in una colonna, imposta cols: 1.

Quindi, manipolare size_hint per impostare la dimensione corretta di un widget.

È possibile utilizzare etichette vuote per creare spazi tra i widget.

Informazioni su Kivy Designer: è preferibile innanzitutto impostare manualmente l'interfaccia utente prima di utilizzare questo strumento.

#: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: