在 TabbedPanelItem 内的 Kivy GridLayout 中绘制矩形

Question

我在 Kivy 应用程序中的 GridLayout（TabbedPanelItem 的子项）中绘制矩形时遇到问题。问题是矩形没有在指定的 GridLayout 内绘制，而是出现在窗口的左上角。

这是我的 Kivy 代码的简化版本：

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.tabbedpanel import TabbedPanel, TabbedPanelItem
from kivy.graphics import Rectangle, Color
from kivy.properties import ObjectProperty

Builder.load_string("""
<MyLayout>:
    viewport_layout: kv_viewport_layout

    TabbedPanel:
        do_default_tab: False
        size_hint: 0.60, 0.69
        pos_hint: {"x": 0.20, "y": 0.28}
        tab_width: 150

        TabbedPanelItem:
            text: "Viewport"
            font_size: 20
            GridLayout:
                cols: 1
                id: kv_viewport_layout
""")

class MyLayout(FloatLayout):
    viewport_layout = ObjectProperty()

    def __init__(self, **kwargs):
        super(MyLayout, self).__init__(**kwargs)
        with self.viewport_layout.canvas:
            Color(1, 0, 0, 0.5, mode="rgba")
            self.rect = Rectangle(pos=(0,0), size=(100,100))

        

class MyApp(App):
    def build(self):
        return MyLayout()

if __name__ == '__main__':
    MyApp().run()

Answer 1

您在

__init__()

方法中的代码告诉 kivy 在左下角（在

Rectangle

）绘制

(0,0)

，大小为

(100,100)

，所以这就是您所看到的。由于您没有包含任何代码来更新

Rectangle

，因此它只是保留在那里。获得在

Rectangle

更新时更新的

GridLayout

的最简单方法是使用

kv

创建它：

<MyLayout>:
    viewport_layout: kv_viewport_layout

    TabbedPanel:
        do_default_tab: False
        size_hint: 0.60, 0.69
        pos_hint: {"x": 0.20, "y": 0.28}
        tab_width: 150

        TabbedPanelItem:
            text: "Viewport"
            font_size: 20
            GridLayout:
                cols: 1
                id: kv_viewport_layout
                canvas.before:
                    Color:
                        rgba: 1, 0, 0, 0.5
                    Rectangle:
                        pos: self.pos
                        size: self.size

当

kv

的

pos

和

size

发生变化时，

Rectangle

语言会自动创建绑定来更新

pos

的

size

和

GridLayout

。如果您这样做，您可以从

__init__()

方法中删除画布指令。