Kivy 中实现固定高度可滚动的动态图片卡片网格视图-Python教程-PHP中文网

Kivy 中实现固定高度可滚动的动态图片卡片网格视图

本文详解如何在 Kivy 中构建一个 5 列、每张图片按比例自适应缩放、整体高度设为窗口高度百分比（如 75%）并支持垂直滚动的动态卡片网格，解决默认 ScrollView 拉伸行高导致布局失真的问题。

本文详解如何在 kivy 中构建一个 5 列、每张图片按比例自适应缩放、整体高度设为窗口高度百分比（如 75%）并支持垂直滚动的动态卡片网格，解决默认 `scrollview` 拉伸行高导致布局失真的问题。

在 Kivy 中实现「固定可视区域高度 + 垂直滚动 + 等宽多列图片卡片」布局时，核心挑战在于：ScrollView 默认会拉伸其子容器以填满自身尺寸，而 GridLayout 的 size_hint_y=1 会导致所有行被强制等高撑满——这破坏了图片的原始宽高比与卡片的自然高度。正确解法是切断 ScrollView 对子布局的高度拉伸依赖，转而让 GridLayout 自由计算最小所需高度（minimum_height），再由 ScrollView 控制自身显示区域大小。

关键配置如下：

✅ ScrollView.size_hint_y = 0.75：限定滚动容器占窗口高度的 75%，剩余空间可留给标题、工具栏等其他 UI 元素；
✅ GridLayout.size_hint = (1, None) + GridLayout.height = self.minimum_height：禁用高度自动拉伸，启用动态高度计算；
✅ 每个 Card（即 BoxLayout）必须显式设置 size_hint_y = None 和固定 height（如 150），否则 minimum_height 无法准确累加；
✅ 图片使用 size_hint_y: 0.75（配合按钮的 0.25）确保卡片内比例分配，且 Image 默认保持纹理宽高比（无需额外设置 allow_stretch=False 或 keep_ratio=True，Kivy 2.0+ 默认启用）。

以下是完整可运行示例（基于 KV 语言声明式写法，更清晰、易维护）：

ScrollView:
    size_hint_y: 0.75
    do_scroll_x: False
    do_scroll_y: True
    smooth_scroll_end: 15
    scroll_wheel_distance: 20

    GridLayout:
        id: grid
        cols: 5
        spacing: 8, 12  # 水平/垂直间距，提升视觉呼吸感
        padding: 10
        size_hint: 1, None
        height: self.minimum_height

<card>:
    orientation: 'vertical'
    size_hint: 1, None
    height: 160  # 卡片总高（单位：dp），建议根据字体大小和图片预期尺寸调整
    Button:
        text: root.text
        font_size: '14sp'
        size_hint_y: 0.25
        background_normal: ''
        background_color: 0.95, 0.95, 1, 1
        color: 0, 0.3, 0.6, 1
    Image:
        texture: root.texture
        size_hint_y: 0.75
        allow_stretch: True
        keep_ratio: True</card>

from kivy.app import App
from kivy.clock import Clock
from kivy.lang import Builder
from kivy.properties import StringProperty, ObjectProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image

kv = """..."""  # 上述 KV 字符串

class Card(BoxLayout):
    text = StringProperty('')
    texture = ObjectProperty(None)

class MyApp(App):
    def build(self):
        # 延迟填充（确保 root 已构建）
        Clock.schedule_once(self.fill_grid)
        return Builder.load_string(kv)

    def fill_grid(self, _dt):
        grid = self.root.ids.grid
        # 示例：复用同一张纹理（生产环境应从缓存或路径加载）
        dummy_img = Image(source='icon.png')  # 替换为实际图片路径
        for i in range(47):  # 动态生成 47 张卡片，触发滚动
            grid.add_widget(Card(
                text=f'Item #{i+1}',
                texture=dummy_img.texture
            ))

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

⚠️ 注意事项：