kivymd如何在单个屏幕中添加多个布局
How to add more than one layout in a single screen in kivymd
我正在尝试向已经有 boxlayout 的屏幕添加 boxlayout，但第二个 boxlayout 的内容一直覆盖第一个布局的内容。
我不认为这是我的缩进，是否有我遗漏的代码，或任何东西。
我当然希望第二个boxlayout 的内容排在最后。非常感谢任何帮助，在此先感谢。
这是我的代码：
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window
Window.size = (300, 530)
KV = """
MDScreen:
MDBoxLayout:
orientation: 'vertical'
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: '10dp', '15dp'
spacing: '15dp'
MDCard:
orientation: 'vertical'
size_hint: 1, None
height: label1.height
# size: 280, 200
MDLabel:
id: label1
markup: True
padding: [15, 1]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDCard:
orientation: 'vertical'
size_hint: 1, None
# size: 280, 200
height: label2.height
MDLabel:
id: label2
markup: True
padding: [15, 5]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDCard:
orientation: 'vertical'
size_hint: 1, None
# size: 280, 200
height: label2.height
MDLabel:
id: label2
markup: True
padding: [15, 5]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDBoxLayout:
orientation: 'vertical'
ScrollView:
MDGridLayout:
cols: 9
spacing: '10dp'
padding: ['10dp', '10dp']
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
"""
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
来自 Kivy 文档：
The class RelativeLayout behaves just like the regular
FloatLayout except that its child widgets are positioned
relative to the layout.
您必须将所有内容都放在 BoxLayout 中以覆盖 MDScreen 的默认 RelativeLayout 行为：
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window
Window.size = (300, 530)
KV = """
<MyImageCard@MDCard>
source: ''
caption:''
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
padding: "8dp"
MDLabel:
text: root.caption
theme_text_color: "Secondary"
adaptive_height: True
MDSeparator:
height: "1dp"
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: root.source
<MyTextCard@MDCard>:
text:""
orientation: 'vertical'
size_hint: 1, None
height: child_label.height
MDLabel:
id: child_label
markup: True
padding: [15, 1]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:root.text
MDScreen:
image: "C:/Users/HP USER/Downloads/bella_baron.jpg"
text:'[size=25][b]Ford[/b][/size][b][i]\n"Make every detail perfect and limit the number of details to perfect."[/b][/i] \n– Jack Dorsey'
MDBoxLayout:
orientation: 'vertical'
size_hint: 1, 1
pos_hint:{"center_x":.5,"center_y":.5}
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: '10dp', '15dp'
spacing: '15dp'
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MDBoxLayout:
orientation: 'vertical'
size_hint: 1, None
height: 400
ScrollView:
MDGridLayout:
cols: 3
adaptive_height: True
adaptive_width: True
spacing: '10dp'
padding: ['10dp', '10dp']
MyImageCard:
source: root.image
caption: 'Hello dear'
MyImageCard:
source: root.image
caption: 'Lovely'
MyImageCard:
source: root.image
caption: 'See you'
MyImageCard:
source: root.image
caption: 'Later'
MyImageCard:
source: root.image
caption: 'Forever'
MyImageCard:
source: root.image
caption: 'Good Bye'
"""
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
在第二个 Scrollview 之后您还缺少缩进级别，但这不是问题的根源:)
您可以使用 pos_hint 和 size_hint 来获得我认为您想要的。开始你的kv：
MDScreen:
MDBoxLayout:
size_hint: 1, 0.5 # use half the available height of the MDScreen
pos_hint: {'top':1} # position at the top of the MDSCreen
并为第二个 MDBoxLayout 添加类似的代码：
MDBoxLayout:
size_hint: 1, 0.5 # use half the available height of the MDScreen
pos_hint: {'y':0} # position at the bottom of the MDSCreen
我正在尝试向已经有 boxlayout 的屏幕添加 boxlayout，但第二个 boxlayout 的内容一直覆盖第一个布局的内容。 我不认为这是我的缩进，是否有我遗漏的代码，或任何东西。
我当然希望第二个boxlayout 的内容排在最后。非常感谢任何帮助，在此先感谢。
这是我的代码：
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window
Window.size = (300, 530)
KV = """
MDScreen:
MDBoxLayout:
orientation: 'vertical'
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: '10dp', '15dp'
spacing: '15dp'
MDCard:
orientation: 'vertical'
size_hint: 1, None
height: label1.height
# size: 280, 200
MDLabel:
id: label1
markup: True
padding: [15, 1]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDCard:
orientation: 'vertical'
size_hint: 1, None
# size: 280, 200
height: label2.height
MDLabel:
id: label2
markup: True
padding: [15, 5]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDCard:
orientation: 'vertical'
size_hint: 1, None
# size: 280, 200
height: label2.height
MDLabel:
id: label2
markup: True
padding: [15, 5]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDBoxLayout:
orientation: 'vertical'
ScrollView:
MDGridLayout:
cols: 9
spacing: '10dp'
padding: ['10dp', '10dp']
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
"""
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
来自 Kivy 文档：
The class
RelativeLayoutbehaves just like the regularFloatLayoutexcept that its child widgets are positioned relative to the layout.
您必须将所有内容都放在 BoxLayout 中以覆盖 MDScreen 的默认 RelativeLayout 行为：
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window
Window.size = (300, 530)
KV = """
<MyImageCard@MDCard>
source: ''
caption:''
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
padding: "8dp"
MDLabel:
text: root.caption
theme_text_color: "Secondary"
adaptive_height: True
MDSeparator:
height: "1dp"
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: root.source
<MyTextCard@MDCard>:
text:""
orientation: 'vertical'
size_hint: 1, None
height: child_label.height
MDLabel:
id: child_label
markup: True
padding: [15, 1]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:root.text
MDScreen:
image: "C:/Users/HP USER/Downloads/bella_baron.jpg"
text:'[size=25][b]Ford[/b][/size][b][i]\n"Make every detail perfect and limit the number of details to perfect."[/b][/i] \n– Jack Dorsey'
MDBoxLayout:
orientation: 'vertical'
size_hint: 1, 1
pos_hint:{"center_x":.5,"center_y":.5}
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: '10dp', '15dp'
spacing: '15dp'
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MDBoxLayout:
orientation: 'vertical'
size_hint: 1, None
height: 400
ScrollView:
MDGridLayout:
cols: 3
adaptive_height: True
adaptive_width: True
spacing: '10dp'
padding: ['10dp', '10dp']
MyImageCard:
source: root.image
caption: 'Hello dear'
MyImageCard:
source: root.image
caption: 'Lovely'
MyImageCard:
source: root.image
caption: 'See you'
MyImageCard:
source: root.image
caption: 'Later'
MyImageCard:
source: root.image
caption: 'Forever'
MyImageCard:
source: root.image
caption: 'Good Bye'
"""
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
在第二个 Scrollview 之后您还缺少缩进级别，但这不是问题的根源:)
您可以使用 pos_hint 和 size_hint 来获得我认为您想要的。开始你的kv：
MDScreen:
MDBoxLayout:
size_hint: 1, 0.5 # use half the available height of the MDScreen
pos_hint: {'top':1} # position at the top of the MDSCreen
并为第二个 MDBoxLayout 添加类似的代码：
MDBoxLayout:
size_hint: 1, 0.5 # use half the available height of the MDScreen
pos_hint: {'y':0} # position at the bottom of the MDSCreen