如何在Kivy中实现不等尺寸MDCard的可滚动布局？

可行方案：ScrollView嵌套BoxLayout层级结构 #

核心思路是通过多层BoxLayout组合，让容器自动计算内容尺寸，确保ScrollView能正确识别可滚动区域。以下是具体实现代码（结合KV语言）：

from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.card import MDCard

KV = '''
ScrollView:
    # 开启横向滚动，关闭纵向滚动（可根据需求调整）
    do_scroll_x: True
    do_scroll_y: False
    size_hint: 1, 1

    # 外层纵向BoxLayout，容纳两行卡片
    BoxLayout:
        orientation: 'vertical'
        size_hint_x: None
        # 宽度自动适配内部最宽的一行卡片
        width: self.minimum_width
        spacing: 20
        padding: 20

        # 第一行卡片容器
        BoxLayout:
            orientation: 'horizontal'
            size_hint_x: None
            # 宽度自动适配该行所有卡片总宽度
            width: self.minimum_width
            size_hint_y: None
            # 高度自动适配该行最高的卡片
            height: self.minimum_height
            spacing: 15

            MDCard:
                size_hint: None, None
                size: 250, 300
                md_bg_color: '#ff9800'

            MDCard:
                size_hint: None, None
                size: 180, 250
                md_bg_color: '#e91e63'

            MDCard:
                size_hint: None, None
                size: 220, 280
                md_bg_color: '#9c27b0'

        # 第二行卡片容器
        BoxLayout:
            orientation: 'horizontal'
            size_hint_x: None
            width: self.minimum_width
            size_hint_y: None
            height: self.minimum_height
            spacing: 15

            MDCard:
                size_hint: None, None
                size: 200, 260
                md_bg_color: '#3f51b5'

            MDCard:
                size_hint: None, None
                size: 270, 320
                md_bg_color: '#2196f3'

            MDCard:
                size_hint: None, None
                size: 160, 230
                md_bg_color: '#00bcd4'

            MDCard:
                size_hint: None, None
                size: 230, 290
                md_bg_color: '#4caf50'
'''

class ScrollableCardsApp(MDApp):
    def build(self):
        return Builder.load_string(KV)

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

关键设置说明 #

• ScrollView：指定滚动方向（do_scroll_x/do_scroll_y），确保只开启需要的滚动轴。
• 外层BoxLayout：设置size_hint_x=None + width=self.minimum_width，让容器宽度自动适配内部内容，避免被ScrollView可视区域限制。
• 行容器BoxLayout：同样设置size_hint_x=None + width=self.minimum_width，size_hint_y=None + height=self.minimum_height，让每行的宽高自动适配该行内的卡片尺寸。
• MDCard：通过size_hint: None, None + 固定size实现不等尺寸效果，也可以用size_hint的比例值搭配固定尺寸混合使用。

之前方案失败的可能原因 #

• 使用StackLayout时，未设置size_hint_x=None（横向滚动场景），导致布局宽度被限制在ScrollView可视区域内，超出部分无法滚动。
• 横向BoxLayout嵌套纵向BoxLayout时，未给横向BoxLayout设置size_hint_x=None和width=self.minimum_width，导致容器宽度与ScrollView一致，溢出的卡片无法显示也无法触发滚动。

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