如何在KivyMD中复刻BeReal式UI（大图+左上角小图）

问题描述 #

想要在KivyMD中创建类似BeReal的UI：一张大图作为主体，在大图的左上角放置一张小图。尝试了以下代码：

MDBoxLayout:
  size_hint: None, None
  size: root.size
  orientation: "vertical"

  canvas:
    Rectangle:
      src: "Image1.jpg"
  
  FitImage:
    source: "Image2.jpg"
    size_hint: .2, .3
    pos_hint: {"center_x": .3, "center_y": .7}

遇到的问题：背景图无法铺满全屏，且与小图出现重叠冲突。

解决方案 #

核心思路 #

放弃用Canvas绘制背景图的方式，改用FitImage作为主体大图容器，直接在其内部嵌套小图。这种方式既能保证大图自动适配全屏，又能通过布局层级精准控制小图位置，避免冲突。

完整实现代码 #

MDBoxLayout:
    size_hint: 1, 1
    orientation: "vertical"

    # 主体大图，自动铺满父容器
    FitImage:
        source: "Image1.jpg"
        size_hint: 1, 1

        # 左上角的小图，嵌套在大图内实现叠加
        FitImage:
            source: "Image2.jpg"
            size_hint: .2, .3
            pos_hint: {"x": 0.05, "top": 0.95}  # x控制左侧间距，top控制顶部间距

关键优化说明 #

• 用FitImage替代Canvas绘制背景：FitImage会自动按图片比例缩放并铺满父容器，彻底解决背景图无法全屏的问题。
• 嵌套布局避免层级冲突：将小图直接放在主体大图内部，两者属于同一布局层级，不会出现重叠冲突，同时能通过pos_hint的x和top属性精准定位到左上角。
• 简化布局参数：移除原代码中size_hint: None, None和size: root.size的冗余设置，让MDBoxLayout默认占满父容器，减少布局适配问题。

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