Kivy布局选择问题

Kivy layout selection issue

我要为我的机器人项目创建一个 Kivy UI,我唯一的问题是使用布局,我对此感到困惑。

我将在 Kivy 中附上我想为其创建布局的 GUI 图片,请指导什么是最佳选择(BOX、Grid、Relative,..)我知道我必须将它们混合并一起使用 2 个或更多布局,但我无法 select 正确,我阅读了 Kivy 文档并尝试使用 Kivy Designer,但我仍然无法选择最佳布局。 window 最大尺寸为 800x600。

如果你不知道用哪种布局,那就用网格布局,因为它最通用。

一般来说,如果要将n个小部件排成一行,设置rows: 1。如果要在一列中放置 n 个小部件,请设置 cols: 1.

然后,操作 size_hint 以设置正确的小部件大小。

您可以使用空白标签在小部件之间创建空间。

关于 Kivy Designer - 在使用此工具之前最好先手动学习设置 UI。

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

我更喜欢 SimpleTableLayout,它是 Kivy Garden 中可用的小部件: Simple Table Laout - Kivy Garden

如果你不知道如何使用 Kivy-Garden,这里有安装说明:How to install kivy garden

SimpleTableLayout支持跨行跨列,也支持获取某个单元格的widget:SimpleTableLayout.cell(row, col)

您的应用程序的一个小例子:

<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