Kivy：ScrollView 的子项 GridLayouts 相互重叠答案

【问题标题】：Kivy : childeren GridLayouts of a ScrollView are overlapping with each otherKivy：ScrollView 的子项 GridLayouts 相互重叠
【发布时间】：2020-10-11 05:39:18
【问题描述】：

我的笔记本电脑上运行着 kivy 1.11.1、Ubuntu 20.04 LTS、python 3.8。我是 kivy 的初学者，目前正在从事 kivy 项目，我陷入了滚动视图的儿童网格布局重叠的问题。我有一个带有 GridLayout 和一些标签作为其子级的滚动视图。 GridLayout 有一个 Label 和一个 StackLayout ，它们对于不同的行可以有不同数量的条目。这是源代码main.py。

from kivy.app import App
from kivy.lang.builder import Builder
from kivy.uix.floatlayout import FloatLayout
from  kivy.effects.scroll import ScrollEffect

kv = '''
#:import ScrollEffect kivy.effects.scroll.ScrollEffect
ScrollApp:

<ScrollApp>:
    ScrollView:
        size_hint: 1.0, 0.90
        pos_hint: {'center_y':0.5}
        padding: 22, 0, 22, 50
        spacing: 50
        effect_cls: ScrollEffect
        GridLayout:
            cols: 1
        #   id: streak_zone
            size_hint_y: None
            height: self.minimum_height
            row_force_default: True
            row_default_height: 400   
            canvas:
                Color:
                    rgba: .15, .15, .15, .9
                Rectangle:
                    size: self.size
                    pos: self.pos
            Button:
                size_hint: None, None
                width: 100
                height: 100
                on_press: print('This button does not overlap the menu above')

            # "ScrollViews containers"
            Custom
            Custom
            Custom
            Custom
            Custom
            Custom
    BoxLayout:  
        size_hint: 1, 0.05
        pos_hint: {'bottom':1.0}
        Button:
            on_press: print("This menu at the bottom is not affected by the problem that occurs with the top one")
    BoxLayout:
        size_hint: 1, 0.05
        pos_hint: {'top':1.0}
        Button:
            text: 'Fixed Menu'
            on_press: print('This button stops working if there is a horizontal scrollview "behind"')


<Custom@GridLayout>:
    cols: 1
#   id: streak_zone
    size_hint_y: None
    height: self.minimum_height
    row_force_default: True
    row_default_height: 60
    Label:
        id: label
        font_size: 20
        text: 'Teste'
        text_size: self.width, None
        size_hint_y: None
        
        halign: "center"
        valign: "middle"
        canvas:
            Color:
                rgba: (0, 1, 0, .5) # DarkOliveGreen
            Rectangle:
                size: self.size
                pos: self.pos

    StackLayout:
        id : grid
        size_hint_y: None
        
        ToggleButton:
            text:'1'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'2'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'3'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'4'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'5'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'6'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'7'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'8'
            size_hint:1/3, 1
            group:'ttt'
            

''' 


class ScrollApp(FloatLayout):
    pass


class Test(App):
    def build(self):
        kv1 =  Builder.load_string(kv)
        print("jhe ",kv1.height)
        return kv1
        return ScrollApp()

Test().run()

运行后我得到了这个布局。

enter image description here

我已经阅读了很多关于 GridLayout 和 ScrollView 的文章，但仍然无法解决这个问题。我错过了什么？

更新代码：

from kivy.app import App
from kivy.lang.builder import Builder
from kivy.uix.floatlayout import FloatLayout
from  kivy.effects.scroll import ScrollEffect

kv = '''
#:import ScrollEffect kivy.effects.scroll.ScrollEffect
ScrollApp:

<ScrollApp>:
    ScrollView:
        size_hint: 1.0, 0.90
        pos_hint: {'center_y':0.5}
        padding: 22, 0, 22, 50
        spacing: 50
        effect_cls: ScrollEffect
        GridLayout:
            cols: 1
        #   id: streak_zone
            size_hint_y: None
            height: self.minimum_height
            #row_force_default: True
            #row_default_height: 400   
            canvas:
                Color:
                    rgba: .15, .15, .15, .9
                Rectangle:
                    size: self.size
                    pos: self.pos
            Button:
                size_hint: None, None
                width: 100
                height: 100
                on_press: print('This button does not overlap the menu above')

            # "ScrollViews containers"
            Custom
            Custom
            Custom
            Custom
            Custom
            Custom
    BoxLayout:  
        size_hint: 1, 0.05
        pos_hint: {'bottom':1.0}
        Button:
            on_press: print("This menu at the bottom is not affected by the problem that occurs with the top one")
    BoxLayout:
        size_hint: 1, 0.05
        pos_hint: {'top':1.0}
        Button:
            text: 'Fixed Menu'
            on_press: print('This button stops working if there is a horizontal scrollview "behind"')


<Custom@GridLayout>:
    cols: 1
#   id: streak_zone
    size_hint_y: None
    height: self.minimum_height
    #row_force_default: True
    #row_default_height: 60
    Label:
        id: label
        font_size: 20
        text: 'Teste'
        text_size: self.width, None
        size_hint_y: None
        
        halign: "center"
        valign: "middle"
        canvas:
            Color:
                rgba: (0, 1, 0, .5) # DarkOliveGreen
            Rectangle:
                size: self.size
                pos: self.pos

    StackLayout:
        id : grid
        size_hint_y: None
        
        ToggleButton:
            text:'1'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'2'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'3'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'4'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'5'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'6'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'7'
            size_hint:1/3, 1
            group:'ttt'
        ToggleButton:
            text:'8'
            size_hint:1/3, 1
            group:'ttt'
            

''' 


class ScrollApp(FloatLayout):
    pass


class Test(App):
    def build(self):
        kv1 =  Builder.load_string(kv)
        print("jhe ",kv1.height)
        return kv1
        return ScrollApp()

Test().run()

【问题讨论】：

Kivy 不支持 Python 3.8。当我使用 Python 3.6.9 和 kivy 1.11.1 在 Ubuntu 18.04 上运行您的代码时，我没有看到您的问题
你能分享你得到的输出吗？
我的结果图片是here。
我已经更新了代码之前上传的代码有点不同，我设置了默认高度并强制它，这在我的情况下并非总是如此，因为不同的 stacklayout 可以有不同数量的 element 。如果与 stackLayout 的背景重叠，您还可以在输出中看到标签文本“taste”。

标签： python-3.x kivy scrollview grid-layout overlapping

【解决方案1】：

我认为问题在于，无论何时使用GridLayout 的minimum_height 属性，都必须确保其子项的大小定义明确，并且不能对这些子项使用size_hint_y。

因此，这里是您的 kv 的略微修改版本，它指定了更多 height 属性：

#:import ScrollEffect kivy.effects.scroll.ScrollEffect
ScrollApp:

<ScrollApp>:
    ScrollView:
        size_hint: 1.0, 0.90
        pos_hint: {'center_y':0.5}
        padding: 22, 0, 22, 50
        spacing: 50
        effect_cls: ScrollEffect
        GridLayout:
            cols: 1
        #   id: streak_zone
            size_hint_y: None
            height: self.minimum_height
            #row_force_default: True
            #row_default_height: 400   
            canvas:
                Color:
                    rgba: .15, .15, .15, .9
                Rectangle:
                    size: self.size
                    pos: self.pos
            Button:
                size_hint: None, None
                width: 100
                height: 100
                on_press: print('This button does not overlap the menu above')

            # "ScrollViews containers"
            Custom
            Custom
            Custom
            Custom
            Custom
            Custom
    BoxLayout:  
        size_hint: 1, 0.05
        pos_hint: {'bottom':1.0}
        Button:
            on_press: print("This menu at the bottom is not affected by the problem that occurs with the top one")
    BoxLayout:
        size_hint: 1, 0.05
        pos_hint: {'top':1.0}
        Button:
            text: 'Fixed Menu'
            on_press: print('This button stops working if there is a horizontal scrollview "behind"')


<Custom@GridLayout>:
    cols: 1
#   id: streak_zone
    size_hint_y: None
    height: self.minimum_height
    #row_force_default: True
    #row_default_height: 60
    Label:
        id: label
        font_size: 20
        text: 'Teste'
        text_size: self.width, None
        size_hint_y: None
        height: 50

        halign: "center"
        valign: "middle"
        canvas:
            Color:
                rgba: (0, 1, 0, .5) # DarkOliveGreen
            Rectangle:
                size: self.size
                pos: self.pos

    StackLayout:
        id : grid
        size_hint_y: None
        height: self.minimum_height

        ToggleButton:
            text:'1'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'2'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'3'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'4'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'5'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'6'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'7'
            size_hint:1/3, None
            height: 50
            group:'ttt'
        ToggleButton:
            text:'8'
            size_hint:1/3, None
            height: 50
            group:'ttt'

【讨论】：