繁体   English   中英

在 MDCard Kivy 中添加 ScrollView

[英]Adding ScrollView in MDCard Kivy

我正在尝试在我的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似乎过于复杂。 在您的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()构建的。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM