如何在 kivymd 的单个屏幕中添加多个布局
Posted
技术标签:
【中文标题】如何在 kivymd 的单个屏幕中添加多个布局【英文标题】：How to add more than one layout in a single screen in kivymd 【发布时间】：2021-11-07 15:27:18 【问题描述】：我正在尝试将 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()
【问题讨论】：
那么你在这里要做的是在第一个MDBoxLayout之后，第二个将放在它下面，而不是它上面？只是问以防万一。
小部件的默认pos 是(0,0)，因此您的两个MDBoxLayouts 都将定位在(0,0)。您可以使用pos 或pos_hint 调整位置。
或者您也可以将所有MDBoxLayouts 放入一个MDStackLayout 并更改每个框布局的size_hint 参数，但这很可能不是您想要的我想跨度>
@Weebify 是的，我想将第二个放在它下面.... 请我希望您通过将 MDLayouts 放入单个 MDStacklayout 来向我展示您的意思的示例代码并更改 size_hint..
@JohnAnderson 我试着像你说的那样调整 pos_hint，但是 boxlayout 的大小变化不可接受，我该如何纠正这个问题，谢谢你的建议。
【参考方案1】：
来自 Kivy 文档：
RelativeLayout类的行为与常规类相同FloatLayout除了它的子小部件被定位 相对于布局。
您必须将所有内容放在 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 之后缺少缩进级别，但这不是问题的根源 :)
【讨论】：
感谢您花时间浏览我的代码...我将包含内容的 boxlayout 的大小从 0.55 更改为 1，因为我根本不希望它们重叠。但这样做，它使第二个 boxlayout 的内容被隐藏。我不能垂直滚动看内容不显示，我只能水平滚动卡片，请问我该如何解决这个问题.. @Edwin 您必须更改第二个布局的列数，以便它们向下延伸。还要添加adaptive_height: True 以启用垂直滚动。我已经用修改后的代码更新了答案，所以它可以按您的需要工作（如果有效，您可以接受）。
由于 windows 10 wifi 连接问题，我无法回复，这让我很生气。我真的很感谢你的所有帮助，它现在滚动得很好，问题是我不希望第二个 boxlayout 覆盖任何东西，我什至不希望它显示，直到第一个 boxlayout 的所有内容都已经滚动到最后，你会看到第二个 boxlayout 的内容（在这种情况下，第一个 boxlayout 的内容并不多，但我希望你能理解）。
是的，增加缩进应该有效。我认为第二个布局实际上应该是第一个 GridLayout 的子级。我将修改代码以反映这一点。但是我不知道这些变化会对滚动产生什么影响。
这不仅仅是一个缩进，但它确实存在。【参考方案2】：
您可以使用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
【讨论】：
以上是关于如何在 kivymd 的单个屏幕中添加多个布局的主要内容，如果未能解决你的问题，请参考以下文章
如何在 KivyMD (Python) 中结合导航抽屉和多个屏幕？