在 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().
构建的
我正在尝试在我的 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().