Kivy创建圆角Popup时canvas层级异常问题求助

问题出在你直接在Popup的canvas.before绘制圆角背景，而Popup的子控件（BoxLayout）的绘制层级和Popup的canvas并非完全贴合，导致背景和内容的位置或层级不符合预期。正确的做法是将圆角背景移到Popup的内容容器（BoxLayout）内部，确保背景和内容的层级与位置完全匹配。

修改后的KV代码 #

#: import Factory kivy.factory.Factory


<MyPopup@Popup>
    auto_dismiss: False
    title: ""
    separator_height: 0
    size_hint: 0.8, 0.4
    background_color: (0,0,0,0)
    background_normal: ''

    BoxLayout:
        orientation: "vertical"
        size_hint: 1, 1
        padding: 20
        spacing: 20

        # 将圆角背景移到内容容器的canvas.before中
        canvas.before:
            Color:
                rgba:(1,1,1,1)
            RoundedRectangle:
                pos: self.pos
                size: self.size
                radius: [40]

        Label: 
            text: "Good job"
            color: 0,0,0,1
            font_size: 16
            size_hint_y: None
            height: self.texture_size[1]

        CloseButton:
            text: "Close"
            color: 0,0,0,1
            size_hint: (None , None)
            width: 105
            height: 40
            pos_hint: {'center_x':0.5}
            on_release: root.dismiss()
            

<MyLayout>:
    
    BoxLayout:
        orientation: "vertical" 
        size: root.width, root.height
        padding: 20,40

        Label:
            font_size: 20
            text: 'Click the button'
            color: 0, 0, 0, 1        

        MyButton:
            font_size: 20
            text: "Button"
            color: (0,0,0,1)
            size_hint: (None , None)
            width: 250
            height: 50
            pos_hint: {'center_x':0.5}
            on_release: Factory.MyPopup().open()
            
            

<CloseButton@Button>:
    background_color: (0,0,0,0)
    background_normal: ''
    canvas.before:
        Color: 
            rgba:(252/255,131/255,87/255,1) 
        RoundedRectangle:
            pos: self.pos
            size: self.size
            radius: [20]


<MyButton@Button>
    background_color: (0,0,0,0)
    background_normal: ''
    canvas.before:
        Color: 
            rgba:(252/255,131/255,87/255,1) 
        RoundedRectangle:
            pos: self.pos
            size: self.size
            radius: [25]

修改说明 #

1. 移除Popup自身的canvas绘制：原来在Popup的canvas.before绘制的圆角背景会和内容容器的位置产生偏移，因为Popup的坐标是相对于窗口的，而内容容器的坐标是相对于Popup内部的。

2. 将圆角背景移到内容容器（BoxLayout）的canvas.before：这样背景会直接作为内容容器的底层，Label和Button等子控件会自然绘制在背景之上，层级完全符合预期。

3. 调整内容容器的布局参数：

   • 使用size_hint:1,1让BoxLayout自动填充Popup的内部区域，避免手动设置尺寸导致的位置偏差。
   • 添加padding:20和spacing:20，让内容与圆角边缘保持距离，提升视觉效果。
   • 给Label设置size_hint_y: None和height: self.texture_size[1]，让Label高度自适应文本内容。

这样修改后，就能实现白色圆角Popup包裹内容的预期效果。

内容的提问来源于stack exchange，提问作者MJ HH