Kivy中TabbedPanelItem嵌套GridLayout内矩形绘制位置异常问题

问题根源 #

Kivy默认Canvas的绘制坐标基于全局窗口坐标系，而非目标组件的本地坐标系。你直接设置Rectangle(pos=(0,0))时，这个位置指向窗口左上角，而非kv_viewport_layout的相对位置。此外，在__init__阶段初始化矩形时，kv_viewport_layout的布局位置尚未完成计算，导致获取的坐标不准确。

方案一：KV语言内直接绘制（推荐） #

在KV代码中为GridLayout添加Canvas绘制，此时坐标会自动使用组件的本地坐标系，无需手动处理位置偏移：

修改后的完整代码：

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
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
                canvas:
                    Color:
                        rgba: 1, 0, 0, 0.5
                    Rectangle:
                        pos: self.pos  # 基于GridLayout自身位置
                        size: 100, 100
""")

class MyLayout(FloatLayout):
    viewport_layout = ObjectProperty()

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

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

方案二：Python代码中绑定位置+延迟初始化 #

如果需要在Python中动态控制矩形，可以通过绑定布局的pos属性让矩形位置跟随布局变化，同时用Clock延迟初始化确保布局坐标已计算完成：

修改后的完整代码：

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.graphics import Rectangle, Color
from kivy.properties import ObjectProperty
from kivy.clock import Clock

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().__init__(**kwargs)
        # 延迟一帧执行，保证布局位置已计算完成
        Clock.schedule_once(self.setup_rect, 0)

    def setup_rect(self, dt):
        with self.viewport_layout.canvas:
            Color(1, 0, 0, 0.5, mode="rgba")
            self.rect = Rectangle(pos=self.viewport_layout.pos, size=(100,100))
        # 绑定布局位置变化事件，同步更新矩形位置
        self.viewport_layout.bind(pos=self.update_rect_pos)

    def update_rect_pos(self, instance, new_pos):
        self.rect.pos = new_pos

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

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

内容的提问来源于stack exchange，提问作者Tomy Tv