Kivy技术问询：如何在Scatter组件中嵌套另一个Scatter？

Hey there! Let's fix that nested Scatter coordinate issue you're facing. I’ve dealt with similar problems when building interactive map-like UIs in Kivy, so I know exactly where things might be going wrong. The key is to leverage Scatter’s built-in coordinate transformation methods and handle event propagation correctly—no need to completely rewrite the touch methods from scratch.

Core Issues to Address #

• Event Propagation: By default, touch events bubble up the widget tree, so both inner and outer Scatters might try to handle the same touch. We need to intercept events for the inner Scatter when the touch is inside it.
• Coordinate Mapping: Elements inside the inner Scatter need to use the inner Scatter’s local coordinates, not global screen coordinates, to maintain relative positioning.
• Window Resizing: Ensure all elements scale/position correctly when the window changes size by binding to the window’s size event.

Working Example Code #

Here’s a complete implementation that meets your requirements:

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.widget import Widget
from kivy.core.window import Window
from kivy.graphics import Color, Rectangle

class PointWidget(Widget):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.size = (20, 20)
        with self.canvas:
            Color(1, 0, 0, 1)  # Red point
            self.rect = Rectangle(pos=self.pos, size=self.size)
        self.bind(pos=self.update_rect)
    
    def update_rect(self, *args):
        self.rect.pos = self.pos

class GridScatter(Scatter):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # Enable only translation (no scaling for grid)
        self.do_scale = False
        self.do_translation = True
        self.auto_bring_to_front = False  # Prevent grid from jumping above map
        
        # Add a sample point relative to the grid
        point = PointWidget(pos=(100, 100))
        self.add_widget(point)
        
        # Draw a grid background for visibility
        with self.canvas.before:
            Color(0, 0, 1, 0.5)  # Semi-transparent blue
            self.grid_rect = Rectangle(pos=self.pos, size=(400, 400))
        self.bind(pos=self.update_grid_rect, size=self.update_grid_rect)
    
    def update_grid_rect(self, *args):
        self.grid_rect.pos = self.pos
        self.grid_rect.size = self.size
    
    def on_touch_down(self, touch):
        # Convert touch position to local coordinates of the grid
        local_pos = self.to_local(*touch.pos)
        # If touch is inside the grid, intercept the event
        if self.collide_point(*local_pos):
            return super().on_touch_down(touch)
        # Otherwise, let the parent (outer scatter) handle it
        return False

class MapScatter(Scatter):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # Enable scaling and translation for the map
        self.do_scale = True
        self.do_translation = True
        self.auto_bring_to_front = False
        
        # Draw a map background
        with self.canvas.before:
            Color(0.8, 0.8, 0.8, 1)  # Light gray
            self.map_rect = Rectangle(pos=self.pos, size=Window.size)
        self.bind(pos=self.update_map_rect, size=self.update_map_rect)
        
        # Add the inner grid scatter at a position relative to the map
        grid = GridScatter(pos=(200, 200), size=(400, 400))
        self.add_widget(grid)
        
        # Bind window size to update map size
        Window.bind(size=self.on_window_size)
    
    def update_map_rect(self, *args):
        self.map_rect.pos = self.pos
        self.map_rect.size = self.size
    
    def on_window_size(self, instance, new_size):
        # Adjust map size to match window, maintaining relative positioning
        self.size = new_size

class NestedScatterApp(App):
    def build(self):
        return MapScatter()

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

Key Explanations #

1. Inner Scatter (GridScatter):

   • Disables scaling (do_scale=False) since we only want it to be draggable independently.
   • Overrides on_touch_down to check if the touch is within its bounds using to_local to convert screen coordinates to its local system. If yes, it handles the touch; if not, it passes the event to the outer Scatter.
   • Points added to it use local coordinates, so they stay relative to the grid when dragged.

2. Outer Scatter (MapScatter):

   • Enables both scaling and translation for the base map.
   • Binds to the window’s size event to adjust its own size, ensuring all elements scale proportionally when the window resizes.

3. PointWidget:

   • Uses local coordinates relative to the inner Scatter, so its position updates automatically when the grid is dragged.

Expected Behavior #

• Drag Outer Scatter: The entire map (including grid and points) moves together.
• Drag Inner Scatter: Only the grid and its points move; the map stays in place.
• Scale Outer Scatter: All elements (map, grid, points) scale proportionally, maintaining relative positions.
• Window Resize: All elements adjust to the new window size without losing relative positioning.

Common Mistakes to Avoid #

• Forgetting to convert touch coordinates to local space before checking collisions—this leads to incorrect event handling.
• Setting elements’ positions using global screen coordinates instead of the parent Scatter’s local coordinates.
• Not disabling auto_bring_to_front—this can cause the inner Scatter to appear above the outer one and block events unintentionally.

内容的提问来源于stack exchange，提问作者Snow bunting