如何在Kivy中按Figma设计精确定位Label文本控件？

问题根源 #

你的Label位置偏移，核心原因是Kivy的Label默认行为和Figma的定位逻辑不匹配：

• Kivy Label默认文本居中对齐，且控件pos对应自身左下角坐标，但Figma的定位通常基于文本的左上角。
• 即使设置了size_hint=(0,0)，Label仍会根据文本自动计算尺寸，若未显式定义size和文本对齐方式，视觉位置会偏离预期。

修复代码 #

针对你的text2控件，按以下方式修改即可实现精确定位：

方式1：手动估算文本尺寸 #

self.text2 = Label(
    text="in motion",
    pos=(160, 207),
    pos_hint=(0, 0),
    size_hint=(0, 0),
    font_name="Inter-Bold",
    font_size=64,
    # 让文本从Label左上角开始排列，匹配Figma逻辑
    halign="left",
    valign="top",
    # 手动设置Label尺寸，匹配文本实际占用空间（可根据显示效果微调）
    size=(300, 80),
    text_size=(300, 80)
)

方式2：自动获取文本精确尺寸 #

如果需要完全精准的尺寸，可以通过texture获取文本实际占用的像素大小：

# 临时Label获取文本纹理尺寸
temp_label = Label(text="in motion", font_name="Inter-Bold", font_size=64)
temp_label.texture_update()
text_width, text_height = temp_label.texture.size

self.text2 = Label(
    text="in motion",
    pos=(160, 207),
    pos_hint=(0, 0),
    size_hint=(0, 0),
    font_name="Inter-Bold",
    font_size=64,
    halign="left",
    valign="top",
    size=(text_width, text_height),
    text_size=(text_width, text_height)
)

坐标系注意事项 #

如果你的Figma设计是左上角为原点（y轴向下），而Kivy默认是左下角为原点（y轴向上），需要将Figma的y坐标转换为Kivy坐标系的值：

# 假设Widget高度为500，Figma的y坐标为207，文本高度为text_height
kivy_y = 500 - 207 - text_height
self.text2.pos = (160, kivy_y)

你提到图片位置正确，说明当前坐标系已适配，可忽略此转换。

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