如何在 MDDialog 中显示带有图像和文本的滚动视图？

Question

我想使用滚动视图滚动 MDDialog 的内容，但它根本不显示在小部件内。这是代码：

from kivy.lang import Builder
from kivy.uix.image import Image
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.imagelist import MDSmartTile, MDSmartTileImage
from kivymd.uix.label import MDLabel
from kivymd.uix.list import (MDListItem,
                             MDListItemLeadingIcon, MDListItemSupportingText,
                             )
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(MDDialogCustomContentContainer, self).__init__(**kwargs)
        self.size_hint_y = None
        self.adaptive_height = True
        layout_root = MDScrollView(do_scroll_x=False, do_scroll_y=True)
        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")
        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(
            # ----------------------------Icon-----------------------------
            MDDialogIcon(icon="refresh",
                         ),
            # -----------------------Headline text-------------------------
            MDDialogHeadlineText(text="Reset settings?",
                                 ),
            # -----------------------Supporting text-----------------------
            MDDialogSupportingText(text="This will reset your app preferences back to their "
                                        "default settings. The following accounts will also "                
                                        "be signed out:",
                                   ),
            # -----------------------Custom content------------------------
            MDDialogCustomContentContainer(),
            # ---------------------Button container------------------------
            MDDialogButtonContainer(
                Widget(), MDButton(
                    MDButtonText(text="Cancel"), style="text",
                ), MDButton(
                    MDButtonText(text="Accept"), style="text",
                ), spacing="8dp",
            ),  # -------------------------------------------------------------
        ).open()


Example().run()

我尝试提供布局和 MDDialogCustomContentContainer Adaptive_height=True，但这没有成功。我也想过给所有小部件一个固定的高度，但由于我想显示一个图像，我不知道（而且我仍然不知道）如何实现这一点

Answer 1

我认为您只需要指定一些尺寸（或者可能做一些链接来调整尺寸）。另外，

MDDialogContentContainer

是一个

BoxLayout

，所以不需要再添加另一个

BoxLayout

。这是您的

MDDialogCustomContentContainer

的修改版本：

class MDDialogCustomContentContainer(MDDialogContentContainer):
    def __init__(self, **kwargs):
        super(MDDialogCustomContentContainer, self).__init__(**kwargs)
        self.size_hint_y = None
        self.adaptive_height = True
        layout_root = MDScrollView(do_scroll_x=False, do_scroll_y=True, size_hint_y=None, height=200)
        img = FitImage(source='bear.png', size_hint=(None, None), size=(100, 1000), keep_ratio=False, allow_stretch=True)
        self.add_widget(MDDivider())
        layout_root.add_widget(img)
        self.add_widget(layout_root)
        self.add_widget(MDDivider())

由于您在

adaptive_height

中将

True

设置为

MDDialogCustomContentContainer

，它将尝试使用包含其子项的最小高度。如果

MDScrollView

没有被分配

height

，则

MDDialogCustomContentContainer

将假定它的高度为 0，因此不会有任何内容可以滚动。所以上面的代码为

height

和

MDScrollView

指定了

FitImage

。