Kivy 布局选择问题答案

【问题标题】：Kivy layout selection issueKivy 布局选择问题
【发布时间】：2016-04-05 23:11:16
【问题描述】：

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

我将在Kivy 中附上我想为其创建布局的 GUI 图像，请指导最佳选择（BOX、Grid、Relative、..）我知道我必须将它们混合并一起使用 2 个或多个布局但我无法正确选择，我阅读了Kivy 文档并尝试使用Kivy Designer，但我仍然无法选择最佳布局。最大窗口大小为 800x600。

【问题讨论】：

标签： user-interface layout kivy

【解决方案1】：

如果您不知道要使用哪种布局，请使用网格布局，因为它用途最广泛。

一般来说，如果你想把 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:

【讨论】：

【解决方案2】：

我更喜欢 SimpleTableLayout，它是 Kivy Garden 中提供的一个小部件： Simple Table Laout - Kivy Garden

如果你不知道如何使用 Kivy-Garden，这里是安装说明：How to install kivy garden

SimpleTableLayout 支持跨行跨列以及获取某个单元格的小部件：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

【讨论】：