You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MDDialog中显示包含图片和文本的ScrollView?

解决MDDialog中ScrollView内容无法显示的问题

你的问题核心是自定义内容容器没有给ScrollView预留固定的滚动空间,导致Dialog被内容无限撑开,无法触发滚动。以下是修复方案:

关键修改点:

  1. 给自定义的MDDialogCustomContentContainer设置固定高度(或基于屏幕高度的比例),替代单纯的adaptive_height=True,让ScrollView有明确的滚动边界。
  2. 让ScrollView填满容器高度,设置size_hint_y=1。
  3. 可选:限制图片高度,避免单张图片占用过多滚动空间。

修改后的完整代码:

from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.button import MDButton, MDButtonText
from kivymd.uix.dialog import (
    MDDialog, MDDialogIcon,
    MDDialogHeadlineText, MDDialogSupportingText,
    MDDialogButtonContainer, MDDialogContentContainer,
)
from kivymd.uix.divider import MDDivider
from kivymd.uix.fitimage import FitImage
from kivymd.uix.label import MDLabel
from kivymd.uix.scrollview import MDScrollView

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor
    MDButton:        
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: app.show_alert_dialog()
        MDButtonText:            
            text: "Show dialog"
'''


class MDDialogCustomContentContainer(MDDialogContentContainer):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.size_hint_y = None
        # 设置容器固定高度,也可以用self.theme_cls.window_height * 0.6这类比例值
        self.height = "400dp"
        
        layout_root = MDScrollView(do_scroll_x=False, do_scroll_y=True, size_hint_y=1)
        layout = MDBoxLayout(
            orientation="vertical", 
            size_hint=(1, None), 
            adaptive_height=True,
            padding="10dp", 
            spacing="10dp"
        )
        layout.bind(minimum_height=layout.setter('height')) 
        
        # 限制图片高度,避免撑满容器
        img = FitImage(source="bear.png", size_hint_y=None, height="150dp")
        layout.add_widget(img)
        
        for i in range(10):
            layout.add_widget(MDLabel(text=f"text №{i}", adaptive_height=True))
        
        self.add_widget(MDDivider())
        layout_root.add_widget(layout)
        self.add_widget(layout_root)
        self.add_widget(MDDivider())


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

    def show_alert_dialog(self):
        MDDialog(
            MDDialogIcon(icon="refresh"),
            MDDialogHeadlineText(text="Reset settings?"),
            MDDialogSupportingText(
                text="This will reset your app preferences back to their "
                     "default settings. The following accounts will also "                
                     "be signed out:"
            ),
            MDDialogCustomContentContainer(),
            MDDialogButtonContainer(
                Widget(), 
                MDButton(MDButtonText(text="Cancel"), style="text"), 
                MDButton(MDButtonText(text="Accept"), style="text"), 
                spacing="8dp",
            ),
        ).open()


Example().run()

改动说明:

  • 给MDDialogCustomContentContainer设置了固定高度400dp,你可以根据需求调整为相对屏幕高度的比例(比如self.height = self.theme_cls.window_height * 0.6)。
  • ScrollView设置size_hint_y=1,确保它填满容器高度,内部内容超过容器高度时自动触发滚动。
  • 给FitImage设置固定高度150dp,避免图片过高挤压其他内容;若想让图片自适应但不超限,可替换为max_height="200dp"。

修改后,Dialog内容容器有了明确高度限制,ScrollView可正常滚动查看全部内容。

内容的提问来源于stack exchange,提问作者Alexey Axyonov

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.19 03:05:13