KivyMD 中的 BeReal UI答案

【问题标题】：BeReal UI in KivyMDKivyMD 中的 BeReal UI
【发布时间】：2023-02-05 05:56:33
【问题描述】：

我正在尝试创建一个类似于 BeReal 的用户界面，其中有一个大图像，然后在大图像的左上角有一个小图像。

我试过这个解决方案：

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}

我使用画布将较大的图像显示为背景图像，然后将较小的图像添加到 BoxLayout。但是，这不起作用，因为背景图像没有占据整个屏幕，并且似乎与较小的图像发生碰撞。

有什么方法可以在 Kivy 中复制 BeReals UI 吗？

【问题讨论】：

您发布的代码有几个语法错误。请发布minimal reproducible example。

标签： kivy kivy-language kivymd

【解决方案1】：

使用 MDFloatLayout 而不是 MDBoxLayout。 IE。

MDFloatLayout:
    FitImage:
        source: 'image_cover.jpg'
        pos: 0, 0
        size_hint: 1, 1

    FitImage:
        source: 'top_left_image.jpg'
        pos_hint: {'x': 0.01, 'top': 0.99}
        size_hint: 0.45, 0.45
        radius: 36, 36, 36, 36

【讨论】：