在 MDCard Kivy 中添加 ScrollView

Question

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

我通过更改布局、添加新布局等尝试了很多次。

我只想将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 中有一个MDBoxLayout 包含一个MDScreen，包含一个MDBottomNavigation，包含一个MDBottomNavigationItem，包含一个MDScreen，包含一个MDBoxLayout，包含一个MDGridLayout。除非您的代码中没有明显的原因，否则我建议简化 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() 构建的。