Kivy：ScrollView 的 childeren GridLayouts 相互重叠
Kivy : childeren GridLayouts of a ScrollView are overlapping with each other
我的笔记本电脑上有 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()
我认为问题是每当你使用 GridLayout 的 minimum_height 属性 时，你必须确保其 children 的大小定义明确，并且您不能对那些 children.
使用 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'
我的笔记本电脑上有 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()
我认为问题是每当你使用 GridLayout 的 minimum_height 属性 时，你必须确保其 children 的大小定义明确，并且您不能对那些 children.
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'