Kivy布局元素间存在多余大空白 窗口调整大小内容被截断如何解决

核心问题原因 #

• 图片间隙过大：AsyncImage尺寸配置不合理，GridLayout尺寸参数设置错误
• 窗口调整内容截断：ScrollView关闭了自适应尺寸属性，无法跟随窗口大小变化调整

修复后的完整代码 #

import pathlib
from kivy.app import App
from kivy.core.window import Window
from kivy.uix.gridlayout import GridLayout
from kivy.uix.image import AsyncImage
from kivy.uix.scrollview import ScrollView
from providers import Provider


class UIApp(App):
    def build(self):
        prov = Provider()
        prov.set_limit(10)
        entry_list = prov.search()

        # 修复GridLayout参数：size_hint_y设为None，高度由内容决定
        gl = GridLayout(cols=2, spacing=0, size_hint_y=None, padding=0)
        gl.bind(minimum_height=gl.setter('height'))
        # 绑定GridLayout宽度变化事件，自动调整每列图片的宽度
        gl.bind(width=self.adjust_image_sizes)

        self.image_list = [] # 保存所有图片控件，方便后续调整大小

        for entry in entry_list:
            print(entry.image_full)
            file_ext = pathlib.Path(entry.image_full).suffix.replace(".", "")
            if file_ext == "mp4":
                continue
            # 初始化AsyncImage，关闭默认的大小提示，手动控制尺寸
            img = AsyncImage(source=entry.image_full, size_hint=(None, None), allow_stretch=True, keep_ratio=True)
            # 图片加载完成后自动调整尺寸
            img.bind(texture=lambda instance, value: self.adjust_image_sizes(gl, gl.width))
            self.image_list.append(img)
            gl.add_widget(img)

        # 修复ScrollView参数：size_hint设为(1,1)，自动占满整个窗口
        root = ScrollView(size_hint=(1, 1))
        root.add_widget(gl)
        return root

    def adjust_image_sizes(self, instance, new_width):
        # 两列布局，每张图片的宽度是GridLayout宽度的一半
        img_width = new_width / 2
        for img in self.image_list:
            img.width = img_width
            # 按原始比例计算图片高度
            if img.texture:
                img.height = img_width * img.texture.size[1] / img.texture.size[0]


if __name__ == '__main__':
    UIApp().run()

关键修改说明 #

• 修正了GridLayout的size_hint_y参数为None，确保容器高度完全由内部图片总高度决定，符合滚动布局的要求
• 去掉了ScrollView的固定尺寸设置，将size_hint改为(1,1)，会自动跟随窗口大小调整，彻底解决窗口缩放内容截断的问题
• AsyncImage改为手动控制尺寸，开启允许拉伸保持比例，图片会自动填充满每一列的宽度，没有多余的空白间隙
• 新增了GridLayout宽度变化的监听回调，窗口缩放时会自动重新计算所有图片的尺寸，保证布局始终适配当前窗口大小
• 新增图片加载完成的监听回调，避免图片异步加载完成后出现尺寸异常的问题

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