如何让Kivy应用窗口缩放时保持UI尺寸比例与布局一致？

原代码的核心问题 #

• 文本框位置基于外层RelativeLayout而非图片本身，图片缩放后位置直接错位
• 字体大小设为固定值50，无法随窗口/图片尺寸自适应调整
• Image存在重复pos_hint属性，且未设置比例保持参数，易导致图片拉伸变形

修改后的kv代码 #

<input_field>:
    text_field: text_field
    space: space

RelativeLayout:
    Image:
        id: space
        source: "text place.png"  
        # 保持图片比例，允许自适应缩放
        allow_stretch: True
        keep_ratio: True
        # 控制图片在父布局中的占比，同时居中
        size_hint: 0.8, 0.6
        pos_hint: {"center_x": 0.5, "center_y": 0.68}

        TransparentTextInput:
            id: text_field
            text: "Username"
            # 聚焦时清空默认文本，失焦时恢复空文本为默认值
            on_focus: 
                if self.focus and self.text == "Username": self.text = ""
                if not self.focus and self.text == "": self.text = "Username"
            multiline: False  
            # 相对于图片居中定位
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            # 字体大小基于图片高度的比例自适应
            font_size: self.parent.height * 0.15
            foreground_color: [1, 1, 1, 0.7]
            # 文本框大小随图片自适应
            size_hint: 0.8, 0.2

关键改动说明 #

• 将TransparentTextInput嵌套到Image内部，让它的位置、大小完全基于图片，窗口缩放时自动同步相对关系
• 给Image添加allow_stretch: True和keep_ratio: True，确保缩放时图片保持原比例，避免变形
• 字体大小改为self.parent.height * 0.15，即图片高度的15%，随图片尺寸动态调整
• 修正原代码无意义的on_focus/on_text逻辑，实现合理的默认文本交互
• 给文本框设置size_hint，让其尺寸也随图片自适应变化

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