Vấn đề lựa chọn bố cục Kivy

Question

Tôi sẽ tạo giao diện người dùng Kivy cho dự án rô bốt của mình, vấn đề duy nhất của tôi là làm việc với bố cục, tôi nhầm lẫn với nó.

Tôi sẽ đính kèm hình ảnh GUI mà tôi muốn tạo bố cục cho nó trong Kivy vui lòng hướng dẫn lựa chọn tốt nhất (BOX, Grid, Relative, ..) Tôi biết tôi phải trộn chúng và sử dụng 2 hoặc nhiều bố cục cùng nhau Tôi không thể chọn đúng, tôi đọc tài liệu Kivy và tôi đã cố gắng sử dụng Kivy Thiết kế nhưng tôi vẫn không thể chọn bố cục tốt nhất. Kích thước cửa sổ tối đa là 800x600.

Answer 1

tôi sẽ thích SimpleTableLayout, đó là một widget có sẵn trong Kivy Vườn: Simple Table Laout - Kivy Garden

Nếu bạn không biết làm thế nào để sử dụng Kivy-Garden đây là hướng dẫn cài đặt: How to install kivy garden

SimpleTableLayout hỗ trợ mở rộng hàng và cột cũng như nhận tiện ích của một ô nhất định: SimpleTableLayout.cell(row, col)

Ví dụ nhỏ cho ứng dụng của bạn:

<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

Nếu bạn không biết được bố trí sử dụng, sau đó sử dụng bố trí lưới, bởi vì nó là linh hoạt nhất.

Nói chung, nếu bạn muốn đặt n tiện ích con trong một hàng, hãy đặt rows: 1. Nếu bạn muốn đặt n tiện ích trong một cột, hãy đặt cols: 1.

Sau đó, thao tác size_hint để đặt kích thước chính xác của tiện ích con.

Bạn có thể sử dụng nhãn trống để tạo khoảng trắng giữa các tiện ích.

Giới thiệu về Kivy Designer - tốt hơn hết bạn nên tìm hiểu cách thiết lập giao diện người dùng theo cách thủ công trước khi sử dụng công cụ này.

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