在MDCard Kivy中添加ScrollView-Python实例代码

Adding ScrollView in MDCard Kivy(在MDCard Kivy中添加ScrollView)

本文介绍了在MDCard Kivy中添加ScrollView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在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()

提前感谢：)

推荐答案

您的kv似乎过于复杂。在FirstScreen中，您有一个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()生成的。

这篇关于在MDCard Kivy中添加ScrollView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

基础教程推荐