时间戳

首页 > 解决方案 > 如何制作与 kivy 中的图像大小相同的小部件

python - 如何制作与 kivy 中的图像大小相同的小部件

问题描述

我想在我的应用程序底部有一个横幅，它可以随着不同的宽度缩放。但是，我无法使小部件的大小与图像的大小相对应，因此，我在横幅本身下方留下了一些空白区域。如何才能做到这一点？

这是我的尝试：

FloatLayout:
    canvas.before:
        Color:
            rgb: utils.get_color_from_hex("#6ec4c1")
        Rectangle:
            size: self.size
            pos: self.pos
    GridLayout:
        cols: 3
        pos_hint: {"top": 0.95}
        size_hint: 1, 0.05
        ImageButton:
            source: "images/back_arrow.png"
            on_release: app.change_screen("home_screen")
        Image:
            source: "images/icon.png"
        Label:
            text: ""
    Image:
        id: banner
        keep_ratio: True
        allow_stretch: True
        size_hint: 1, None
        source: "images/banner.png"

此代码确实将图​​片放在底部！但理想情况下，我希望它以全屏宽度保持在底部并在 y 中缩放以适应它。这可能吗？

我想要什么，它只适用于屏幕的这个特定纵横比

当我更改屏幕的宽度时，我希望它在 y 中缩放以适应屏幕，而不是保持 y 不变

标签： pythonkivykivy-language

解决方案

默认情况下，size_hintanyWidget是(1,1). 这意味着您Image的大小将与其包含的FloatLayout. 因此，您可以设置 的值size_hint，也可以设置size_hint: None, None然后提供 的值size。此外，pos_hint: {"bottom": 1}也不起作用，因为bottom它不是pos_hint. 如果你想Image在底部使用pos_hint: {'y':0}，但默认值pos是(0,0)，所以你甚至不需要pos_hint: {'y':0}.

此外，如果您将 a 设置size_hint为None而不提供相应的widthor height，则将使用默认的widthor height（即100）。

我想我终于得到了你想要的。您可以使用BoxLayout而不是FloatLayout. 将BoxLayout设置其子项的大小以适应其可用空间（请参阅文档）。所以，也许这样的事情会起作用：

BoxLayout:
    orientation: 'vertical'
    canvas.before:
        Color:
            rgb: utils.get_color_from_hex("#6ec4c1")
        Rectangle:
            size: self.size
            pos: self.pos
    GridLayout:
        cols: 3
        pos_hint: {"top": 0.95}
        size_hint: 1, 0.05
        ImageButton:
            source: "images/back_arrow.png"
            on_release: app.change_screen("home_screen")
        Image:
            source: "images/icon.png"
        Label:
            text: ""
    Image:
        id: banner
        keep_ratio: True
        allow_stretch: True
        # size_hint: 1, None
        source: "images/banner.png"

请注意，设置size_hint: 1, 0.05中的GridLayout意思是将 95% 的BoxLayout内容分配给横幅。

推荐阅读