Kivy开发：Box Layout中双垂直ScrollView布局失效及显示问题求助

1. 图片显示问题排查 #

• 强制用绝对路径定位图片：导入os模块，把相对路径转成绝对路径，避免运行目录差异导致的路径错误，代码示例：

  import os
  img_path = os.path.abspath("你的图片文件名.jpg")
  

• 检查KV文件里Image控件的source属性，确保和Python代码里的变量绑定正确，比如source: root.recipe_img_path，同时确认图片格式是Kivy支持的（png/jpg等），文件未损坏。

2. 动态文本重叠核心修复 #

ScrollView必须嵌套可自适应高度的布局，否则内容会被压缩到顶部重叠，关键设置如下：

• 给ScrollView内部的BoxLayout设置size_hint_y: None，并让height等于self.minimum_height（自动计算所有子控件的总高度）
• 每个动态添加的文本Label，必须设置size_hint_y: None，并把height设为self.texture_size[1]（自适应文本行数高度）

KV代码修正示例：

BoxLayout:
    orientation: 'vertical'
    # 食材滚动区
    ScrollView:
        BoxLayout:
            id: ingredients_box
            orientation: 'vertical'
            size_hint_y: None
            height: self.minimum_height
            padding: 10
            spacing: 5
    # 步骤滚动区
    ScrollView:
        BoxLayout:
            id: steps_box
            orientation: 'vertical'
            size_hint_y: None
            height: self.minimum_height
            padding: 10
            spacing: 5

Python动态添加文本时的代码：

# 动态添加食材
for ing in ["鸡蛋2个", "番茄1个", "盐半勺"]:
    label = Label(text=ing)
    label.size_hint_y = None
    label.height = label.texture_size[1]
    self.ids.ingredients_box.add_widget(label)

# 动态添加步骤
for step in ["1. 番茄切块", "2. 鸡蛋打散炒熟", "3. 混合翻炒加盐"]:
    label = Label(text=step)
    label.size_hint_y = None
    label.height = label.texture_size[1]
    self.ids.steps_box.add_widget(label)

3. 整体布局与窗口标题设置 #

• 主BoxLayout设为orientation: 'vertical'，给两个ScrollView分配合理的size_hint_y比例，比如size_hint_y: 0.4（食材区）和size_hint_y: 0.6（步骤区）
• 设置窗口标题：导入Window模块，在Python代码里直接赋值：

  from kivy.core.window import Window
  Window.title = "你的食谱名称"
  

完整可运行示例 #

Python代码 #

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.core.window import Window
import os

class RecipeCard(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # 设置窗口标题
        Window.title = "番茄炒蛋"
        # 处理图片路径
        self.recipe_img_path = os.path.abspath("tomato_egg.jpg")
        # 动态填充食材
        ingredients = ["鸡蛋2个", "番茄1个", "食用盐半勺", "食用油10ml"]
        for ing in ingredients:
            label = Label(text=ing)
            label.size_hint_y = None
            label.height = label.texture_size[1]
            self.ids.ingredients_box.add_widget(label)
        # 动态填充步骤
        steps = ["1. 番茄洗净切块，鸡蛋打散备用", "2. 热锅倒油，倒入鸡蛋炒至成型后盛出", "3. 锅中留底油，放入番茄翻炒出汁", "4. 倒入炒好的鸡蛋，加盐调味后翻炒均匀"]
        for step in steps:
            label = Label(text=step)
            label.size_hint_y = None
            label.height = label.texture_size[1]
            self.ids.steps_box.add_widget(label)

class RecipeApp(App):
    def build(self):
        return RecipeCard()

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

KV文件（命名为recipe.kv） #

<RecipeCard>:
    orientation: 'vertical'
    # 顶部图片展示
    Image:
        source: root.recipe_img_path
        size_hint_y: 0.3
        allow_stretch: True
    # 食材滚动区
    ScrollView:
        size_hint_y: 0.35
        BoxLayout:
            id: ingredients_box
            orientation: 'vertical'
            size_hint_y: None
            height: self.minimum_height
            padding: 10
            spacing: 5
    # 步骤滚动区
    ScrollView:
        size_hint_y: 0.35
        BoxLayout:
            id: steps_box
            orientation: 'vertical'
            size_hint_y: None
            height: self.minimum_height
            padding: 10
            spacing: 5

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