Kivy中Canvas矩形控件固定在UI左下角问题求助

问题说明 #

我尝试在灰色背景上创建白色半透明背景，成功创建后仅能将灰色背景调整到目标位置。尝试为控件设置独立布局、添加约束、调整pos均未成功，参考他人方案也无效。当前白色半透明区域应在应用中居中，却卡在UI左下角。

问题根源 #

1. KV文件中白色半透明区域的Widget缩进错误，被嵌套在灰色背景Widget内部，导致布局依赖于父级灰色Widget，而父级未正确设置位置
2. 两个Widget的Canvas中Rectangle未绑定pos: self.pos，图形默认绘制在(0,0)位置
3. 白色半透明区域的颜色设置错误，当前为灰色而非白色

修正后的代码 #

Python文件（补充缺失的os导入）

""" kivy modules """
import os  # 补充缺失的os模块导入
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.image import Image
from kivy.metrics import *
from kivy.graphics import Color
from kivy.uix.popup import Popup
from kivy.graphics import *
from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivy.graphics.instructions import Canvas
from kivy.graphics.vertex_instructions import Rectangle , Line
from kivy.core.window import Window

""" Kivy import """
Builder.load_file("menu_template.kv")

""" Changing directory """
Dir_Code = os.path.dirname(__file__)
Dir_Logo = os.path.relpath('..\\images\logo.png',Dir_Code)
Dir_Arright = os.path.relpath('..\\images\arrow_right.png',Dir_Code)

class Menu_Template(Widget):
    pass
    
class MyMainApp(App):
    def build(self):
        return Menu_Template()
        
if __name__ == "__main__":
    MyMainApp().run()

KV文件（修正布局、绑定位置、修正颜色）

<Menu_Template>:
    FloatLayout:    
        size : (337.5,753.75)
        id : Template
        pos_hint: {'center_x': 0.5, 'center_y': 0.5}  # 让整个模板居中

        Image:
            source : "..\images\logo.png"
            width : sp(.25)
            pos_hint : {'center_y':.5,'center_x':.5}
        
        # 灰色BG
        Widget: 
            size_hint : (1,1)
            canvas:
                Color : 
                    rgba : .5, .5, .5, .5
                Rectangle : 
                    size: self.size
                    pos: self.pos  # 绑定图形位置到控件位置
                    
        # 白色半透明区域（修正缩进，成为FloatLayout直接子控件）
        Widget: 
            opacity : .15
            size_hint : (.9,1)
            pos_hint : {'center_y':.5,'center_x':.5}
            
            canvas:
                Color : 
                    rgba : 1, 1, 1, 1  # 设置为纯白色
                Rectangle : 
                    size: self.size
                    pos: self.pos  # 绑定图形位置到控件位置

关键修正点 #

• 调整白色半透明Widget的缩进，使其成为FloatLayout的直接子控件，让pos_hint基于整个布局生效
• 给两个Widget的Rectangle添加pos: self.pos，确保图形跟随控件位置移动
• 将白色区域颜色改为rgba:1,1,1,1，通过opacity控制透明度
• 给外层FloatLayout添加pos_hint，让整个模板在窗口中居中

内容的提问来源于stack exchange，提问作者Mahiro Oyama