在ScrollView中添加MDCard Kivy

Question

我正在尝试在我的ScrollView屏幕中添加First，但不幸的是，我没有这样做。

我试过很多次了，改变布局，增加新的布局等等。

我只想要ScrollView到那些ElementCard，这样如果我添加了更多，我就可以通过滚动来达到。

我正在添加一段代码，它将帮助您了解我是如何安排布局的。

代码：

from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen,ScreenManager
from kivy.core.window import Window #You must import this
Window.size = (350, 600)
kv = '''
#:import get_color_from_hex kivy.utils.get_color_from_hex
ScreenManager:
    First:
    
<First>:
    name:'first'
    MDToolbar:
        title: "CATALYST"
        id:toolbar
        elevation: 10
        pos_hint: {'top':1.0}
        md_bg_color: 200/255,10/255,30/255,1

    MDBoxLayout:
        size_hint: 1, 0.9
        orientation : 'vertical'
        MDScreen:
            MDBottomNavigation:
                panel_color: 200/255,10/255,30/255,1
                text_color_active: 0,0,0,1
                pos_hint: {'x':0, 'y':0}
                text_color_normal: 0/255,0/255,0/255,0.4
                MDBottomNavigationItem:
                    name: 'screen 1'
                    text: 'Study'
                    icon: 'creation'
                    badge_icon: "numeric-10"
                    MDScreen:
                        md_bg_color:56/255,40/255,81/255,1
                        MDBoxLayout:
                            orientation:'vertical'
                            MDGridLayout:
                                cols:1
                                padding:[dp(15),dp(15),dp(15),dp(35)]
                                spacing:dp(15)
                                ElementCard:
                                    image: 'library-2.jpg'
                                    text:"Digital Library"
                                    subtext:""
                                    items_count:"Gov Of India"                                 
                                ElementCard:
                                    image : 'college.jpg'
                                    text:"Top Colleges"
                                    subtext:""
                                    items_count:"Worldwide"
                                ElementCard:
                                    image: 'settings.jpg'
                                    text:"Settings"
                                    subtext:""
                                    items_count:"4 Items"

                MDBottomNavigationItem:
                    name: 'screen 2'
                    text: 'Chat'
                    icon: 'chat'
                    badge_icon: "numeric-5"
                    MDLabel:
                        text: 'Chat'
                        halign: 'center'

<ElementCard@MDCard>:
    #md_bg_color:69/255,55/255,86/255,1
    padding:dp(15)
    spacing:dp(15)
    radius:dp(25)
    ripple_behavior: True
    image:''
    text:""
    items_count:""
    subtext:''
    orientation:'vertical'
    MDBoxLayout:
        Image:
            source:root.image
        MDBoxLayout:
            orientation:'vertical'
            MDLabel:
                halign:"center"
                text:root.text
                font_style:"H6"
            MDLabel:
                halign:"center"
                font_style:"Caption"
                text:root.subtext
            MDLabel:
                halign:"center"
                text:root.items_count

'''
class First(Screen):
    pass
    
sm = ScreenManager()
sm.add_widget(First(name='first'))

class Test(MDApp):
    def build(self):
        self.title = 'Catalyst'
        self.theme_cls.primary_palette = "Red"
        # self.theme_cls.theme_style = "Dark"
        self.root = Builder.load_string(kv)
        
Test().run()

(预先谢谢:)

Answer 1

您的kv似乎过于复杂。在First Screen中，您有一个包含MDScreen、包含MDBottomNavigation、包含MDBottomNavigationItem、包含MDScreen、包含MDBoxLayout、包含MDGridLayout的MDBoxLayout。除非您的代码中没有明确的原因，否则我建议简化该kv。

当您使用ScrollView时，您需要它的子级使用adaptive_height: True (用于垂直滚动)。在使用adaptive_height: True时，该小部件的子部件必须具有显式的height值(垂直滚动将size_hint_y设置为None )。

因此，这里是您的kv的一个简化版本，在需要时有一个ScrollView和显式height值：

#:import get_color_from_hex kivy.utils.get_color_from_hex
ScreenManager:
    First:

<First>:
    name:'first'
    MDToolbar:
        title: "CATALYST"
        id:toolbar
        elevation: 10
        pos_hint: {'top':1.0}
        md_bg_color: 200/255,10/255,30/255,1

    MDBoxLayout:
        size_hint: 1, 0.9
        orientation : 'vertical'
        MDBottomNavigation:
            panel_color: 200/255,10/255,30/255,1
            text_color_active: 0,0,0,1
            pos_hint: {'x':0, 'y':0}
            text_color_normal: 0/255,0/255,0/255,0.4
            MDBottomNavigationItem:
                md_bg_color:56/255,40/255,81/255,1
                name: 'screen 1'
                text: 'Study'
                icon: 'creation'
                badge_icon: "numeric-10"
                ScrollView:
                    MDBoxLayout:
                        orientation:'vertical'
                        adaptive_height: True
                        padding:[dp(15),dp(15),dp(15),dp(35)]
                        spacing:dp(15)
                        ElementCard:
                            image: 'library-2.jpg'
                            text:"Digital Library"
                            subtext:""
                            items_count:"Gov Of India"                                 
                        ElementCard:
                            image : 'college.jpg'
                            text: "Top Colleges"
                            subtext:""
                            items_count:"Worldwide"
                        ElementCard:
                            image: 'settings.jpg'
                            text:"Settings"
                            subtext:""
                            items_count:"4 Items"
            MDBottomNavigationItem:
                name: 'screen 2'
                text: 'Chat'
                icon: 'chat'
                badge_icon: "numeric-5"
                MDLabel:
                    text: 'Chat'
                    halign: 'center'

<ElementCard@MDCard>:
    #md_bg_color:69/255,55/255,86/255,1
    padding:dp(15)
    spacing:dp(15)
    radius:dp(25)
    ripple_behavior: True
    image:''
    text:""
    items_count:""
    subtext:''
    orientation:'vertical'
    size_hint_y: None
    height: box.height + self.padding[1] + self.padding[3]
    MDBoxLayout:
        id: box
        adaptive_height: True
        Image:
            source:root.image
        MDBoxLayout:
            orientation:'vertical'
            adaptive_height: True
            MDLabel:
                halign:"center"
                text:root.text
                font_style:"H6"
            MDLabel:
                halign:"center"
                font_style:"Caption"
                text: root.subtext
            MDLabel:
                halign:"center"
                text: root.items_count

不是问题的一部分，而是台词：

sm = ScreenManager()
sm.add_widget(First(name='first'))

应该被淘汰。ScreenManager及其子程序是通过调用Builder.load)string()构建的。