如何在 kivymd 的单个屏幕中添加多个布局答案

【问题标题】：How to add more than one layout in a single screen in kivymd如何在 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 的大小变化不可接受，我该如何纠正这个问题，谢谢你的建议。

标签： python kivy kivymd

【解决方案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

【讨论】：