如何在Kivy中创建一个由绘图形状、标签和按钮组成的具有相对大小和位置的“实体”？

Question

我是 Python 和 Kivy 的新手。我正在尝试创建温度控制器（称为 PID）的显示。 PID 由以下部分组成：

• 浅灰色矩形背景；
• 浅灰色背景上部显示黑色矩形；
• 黑色显示屏上有两个标签，分别显示设定温度和当前温度；和
• 黑色显示屏下的浅灰色背景内水平对齐的四个按钮。

我需要使用并显示其中四个 PID。有没有一种方法可以将其创建为一个“实体或组件或小部件”，可以根据需要调用和显示，并具有相对大小和位置以在窗口内自动调整？

我设法创建它，但只有固定的大小和位置

.

我尝试了很多东西，包括浮动和相对布局，但我无法创建 PID 控制器，以便组件（黑色显示、标签、按钮）相对于浅色背景，这样我就可以使用 size_hint 和 pos_hint在窗口中显示 PID。部分问题似乎是“矩形”不支持 size_hint 和 pos_hint。

这是目前基本的Python代码：

 from kivy.app import App
    from kivy.uix.boxlayout import BoxLayout
    from kivy.uix.button import Button
    from kivy.uix.widget import Widget

这是目前的 Mivy 代码：

class MainWidget(Widget):
        pass

    PID:

    <PID>:
        canvas:
            Color:
                rgba: 1, 1, 1, .3
            Rectangle:
                size: 200, 150
                pos: 300, 200
            Color:
                rgba: 0, 0, 0, 1
            Rectangle:
                size: 180, 80
                pos: 310, 260
                
        Widget:
            Button:
                size: "40dp", "40dp"
                pos: "310dp", "210dp"
                background_normal: "[email protected]"
            Button:
                size: "40dp", "40dp"
                pos: "357dp", "210dp"
                background_normal: "[email protected]"
            Button:
                size: "40dp", "40dp"
                pos: "403dp", "210dp"
                background_normal: "[email protected]"
            Button:
                size: "40dp", "40dp"
                pos: "450dp", "210dp"
                background_normal: "[email protected]"
            Label:
                color: 1, 0, 0, 1
                text: "107.38"
                size: "40dp", "40dp"
                pos: "430dp", "305dp"
            Label:
                color: 0, 1, 0, 1
                text: "70.04"
                size: "40dp", "40dp"
                pos: "430dp", "270dp"

提前感谢您的时间和帮助，非常感谢。

Answer 1

由于似乎没有人会回答这个问题，我决定构建您所描述的练习。希望这对你有用。

我相信要让

pos_hint

和

size_hint

工作，小部件必须是

FloatLayout

或

RelativeLayout

的子级。你可能知道这一点，因为它非常基本，但

pos_hint: {'x': .3, 'y': .7}

只是意味着 Kivy 会将小部件的左侧放置在距左侧布局宽度 30% 的位置，将小部件的底部放置在距左侧布局高度 70% 的位置底端。同样，

size_hint: (.2, .2)

表示Kivy将使小部件宽度大小为布局宽度的20％，小部件高度为布局高度的20％。

所以你必须在Python代码中创建你的

FloatLayout

，然后在父

FloatLayout

下的kv语言中添加带有

pos_hints

和

size_hints

的子级。在kv语言中，可以将画布矩形

pos

设置为

self.pos

，大小设置为

self.size

，然后输入

pos_hint

和

size_hint

（见下图）。然后小部件的画布将从

pos

和

size

获取它的

pos_hint

和

size_hint

，并在窗口调整大小时自动更新。

Python代码：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.graphics import Color, Rectangle
from kivy.uix.image import Image

class PID(FloatLayout):
    pass

class PIDApp(App):
    def build(self):
        return PID()

if __name__ == "__main__":
    PIDApp().run()

kv语言代码：

#:kivy 2.2.0

<PID>
    Widget: # this is the grey background
        canvas:
            Color:
                rgba: (.5,.5,.5,1)
            Rectangle:
                pos: self.pos
                size: self.size
        pos_hint: {'x': .3, 'y': .3}
        size_hint: (.4, .4)

    Widget: # this is the black screen
        canvas:
            Color:
                rgba: (0,0,0,1)
            Rectangle:
                pos: self.pos
                size: self.size
        pos_hint: {'x': .32, 'y': .45}
        size_hint: (.36, .22)

    Label: # this is the top red label
        text: '107.38'
        color: (1,0,0,1)
        pos_hint: {'x': .55, 'y': .55}
        size_hint: (.1,.1)

    Label: # this is the bottom green label
        text: '70.04'
        color: (0,1,0,1)
        pos_hint: {'x': .55, 'y': .47}
        size_hint: (.1,.1)

    Button: # I only added the first image to the buttons, so you will need to add the others
        pos_hint: {'x': .33, 'y': .33}
        size_hint: (.07, .08)       
        Image:
            pos: self.parent.pos
            size: self.parent.size
            source: '[email protected]'
            fit_mode: 'fill' # this keeps the image inside  
    Button:
        pos_hint: {'x': .42, 'y': .33}
        size_hint: (.07, .08)       
    Button:
        pos_hint: {'x': .51, 'y': .33}
        size_hint: (.07, .08)       
    Button:
        pos_hint: {'x': .60, 'y': .33}
        size_hint: (.07, .08)