Kivy - 使用实现的 ScrollView 更改 GridLayout 中 FloatLayout 的行高
Kivy - Changing Row height of FloatLayout within GridLayout with implemented ScrollView
我正在尝试创建一个包含两列的滚动视图，每个“类别”中有 4-5 个图标+下标，由一个简单的标题分隔。我将所有 ImageButtons 与每个带有 FloatLayout 的图像按钮的下标对齐，并且所有这些都在 GridLayout（具有一列）内。
我的问题是如何更改第一行（主标题）和包含每个类别标题的行的高度 - 每个类别的次要较小字体标题，（包含按钮的行的高度+ 对应下标完美）。
截至目前，为了让我的滚动视图工作，我必须有一个 row_default_height 值，否则我所有的行都会堆叠起来......
因为如果默认情况下所有行的高度都相同，这会留下很多空 space 被我想成为一个较小的标题。
这是我目前得到的：
'''
:
FloatLayout:
canvas:
Color:
rgb: utils.get_color_from_hex("#69B3F2")
Rectangle:
size: self.size
pos: self.pos
ScrollView:
pos_hint: {"top": 1,"right":1}
size_hint: 1,1
GridLayout:
cols: 1
size_hint_y: None
height: self.minimum_height
row_default_height: '100dp'
spacing: 10,10
row_force_default: False
FloatLayout:
Label:
font_color:
utils.get_color_from_hex("#424FFF")
id: general_relativity_label
font_size: 25
font_name: "Rubik-Bold.ttf"
text: "Calculator (by Gleb)"
pos_hint: {"top": 0.9, "left": 1}
markup: True
FloatLayout:
pos_hint: {"top": 0.9,"right":1}
size_hint: 1,0.225
ImageButton:
pos_hint: {"top": 0.8, "right":.85}
size_hint: 0.2, 0.7
source: "Icons4/014-gravity.png"
on_release:
app.change_screen("kinematics_screen", direction='right', mode='push')
ImageButton:
pos_hint: {"top": 0.8, "right": 0.35}
size_hint: 0.2, 0.7
source: "Icons4/019-relativity.png"
on_release:
app.change_screen("relativity_screen", direction='right', mode='push')
Label:
pos_hint: {"top": 0.1, "right": .85}
size_hint: .2,0.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Kinematics"
markup: True
Label:
pos_hint: {"top": 0.1,"right": 0.35}
size_hint: .2,0.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Relativity"
markup: True
FloatLayout:
pos_hint: {"top": 0.675, "left":1}
size_hint: 1,0.225
#Quantum Tunneling, Energy of H atom
ImageButton:
pos_hint: {"top":0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
pos_hint: {"top": 0.8, "right":0.35}
size_hint: .2,.7
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Quantum"
markup: True
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Waves"
markup: True
FloatLayout:
pos_hint: {"top": 0.450,"left":1}
size_hint: 1,.225
ImageButton:
pos_hint: {"top": 0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
pos_hint: {"top": 0.8,"right":.35}
size_hint: .2,.7
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Astro"
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Forces"
FloatLayout:
pos_hint: {"top": 0.675, "left":1}
size_hint: 1,0.225
ImageButton:
pos_hint: {"top":0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
pos_hint: {"top": 0.8, "right":0.35}
size_hint: .2,.7
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Quantum"
markup: True
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Waves"
markup: True
FloatLayout:
pos_hint: {"top": 0.450,"left":1}
size_hint: 1,.225
ImageButton:
pos_hint: {"top": 0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
pos_hint: {"top": 0.8,"right":.35}
size_hint: .2,.7
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Astro"
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Forces"
'''
提前致谢！
p.s -> 对 kivy 很陌生，但我可以自信地说我已经在谷歌上搜索了很多但无法找到解决方案..
如果您使用一系列 BoxLayouts 而不是一个 GridLayout，则行的高度不必相同。这是您的 kv 的修改版本：
#:import utils kivy.utils
#:set ImageButtonHeight 150
<ImageButton>:
size_hint_y: None
height: ImageButtonHeight
<MyLabel@Label>:
size_hint_y: None
height: self.texture_size[1]
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
markup: True
FloatLayout:
canvas:
Color:
rgb: utils.get_color_from_hex("#69B3F2")
Rectangle:
size: self.size
pos: self.pos
ScrollView:
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
spacing: 10,10
Label:
font_color:
utils.get_color_from_hex("#424FFF")
id: general_relativity_label
font_size: 25
font_name: "Rubik-Bold.ttf"
text: "Calculator (by Gleb)"
size_hint_y: None
height: self.texture_size[1]
markup: True
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/014-gravity.png"
on_release:
app.change_screen("kinematics_screen", direction='right', mode='push')
ImageButton:
source: "Icons4/019-relativity.png"
on_release:
app.change_screen("relativity_screen", direction='right', mode='push')
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Kinematics"
MyLabel:
text: "Relativity"
BoxLayout:
orientation: 'vertical'
size_hint: 1,None
height: self.minimum_height
#Quantum Tunneling, Energy of H atom
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Quantum"
MyLabel:
text: "Waves"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Astro"
MyLabel:
text: "Forces"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Quantum"
MyLabel:
text: "Waves"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Astro"
MyLabel:
text: "Forces"
当 minimum_height 用于 BoxLayout 时，您必须确保每个 child 的高度定义明确。为此（以及简化 kv），我为 ImageButton 创建了规则，并且 MyLabel class 用于代替大多数 [=20] =] 在 kv.
上面代码的大致结构是这样的：
ScrollView:
BoxLayout: # this is the top level BoxLayout, each child is a row
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
Label: # This is the first row
size_hint_y: None
height: self.texture_size[1]
BoxLayout: # This is another row (that contains two "subrows")
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
BoxLayout: # a "subrow" of ImageButtons
BoxLayout: # a "subrow" of MyLabels
FloatLayout: # This is another row
size_hint_y: None
height: 150 # just an example
您基本上可以在顶层 BoxLayout 下添加任何您想要的作为另一个“行”，但您必须定义该“行”的 height（通常包括设置 size_hint_y 到 None).
我正在尝试创建一个包含两列的滚动视图，每个“类别”中有 4-5 个图标+下标，由一个简单的标题分隔。我将所有 ImageButtons 与每个带有 FloatLayout 的图像按钮的下标对齐，并且所有这些都在 GridLayout（具有一列）内。
我的问题是如何更改第一行（主标题）和包含每个类别标题的行的高度 - 每个类别的次要较小字体标题，（包含按钮的行的高度+ 对应下标完美）。
截至目前，为了让我的滚动视图工作，我必须有一个 row_default_height 值，否则我所有的行都会堆叠起来...... 因为如果默认情况下所有行的高度都相同，这会留下很多空 space 被我想成为一个较小的标题。
这是我目前得到的：
'''
:
FloatLayout:
canvas:
Color:
rgb: utils.get_color_from_hex("#69B3F2")
Rectangle:
size: self.size
pos: self.pos
ScrollView:
pos_hint: {"top": 1,"right":1}
size_hint: 1,1
GridLayout:
cols: 1
size_hint_y: None
height: self.minimum_height
row_default_height: '100dp'
spacing: 10,10
row_force_default: False
FloatLayout:
Label:
font_color:
utils.get_color_from_hex("#424FFF")
id: general_relativity_label
font_size: 25
font_name: "Rubik-Bold.ttf"
text: "Calculator (by Gleb)"
pos_hint: {"top": 0.9, "left": 1}
markup: True
FloatLayout:
pos_hint: {"top": 0.9,"right":1}
size_hint: 1,0.225
ImageButton:
pos_hint: {"top": 0.8, "right":.85}
size_hint: 0.2, 0.7
source: "Icons4/014-gravity.png"
on_release:
app.change_screen("kinematics_screen", direction='right', mode='push')
ImageButton:
pos_hint: {"top": 0.8, "right": 0.35}
size_hint: 0.2, 0.7
source: "Icons4/019-relativity.png"
on_release:
app.change_screen("relativity_screen", direction='right', mode='push')
Label:
pos_hint: {"top": 0.1, "right": .85}
size_hint: .2,0.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Kinematics"
markup: True
Label:
pos_hint: {"top": 0.1,"right": 0.35}
size_hint: .2,0.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Relativity"
markup: True
FloatLayout:
pos_hint: {"top": 0.675, "left":1}
size_hint: 1,0.225
#Quantum Tunneling, Energy of H atom
ImageButton:
pos_hint: {"top":0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
pos_hint: {"top": 0.8, "right":0.35}
size_hint: .2,.7
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Quantum"
markup: True
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Waves"
markup: True
FloatLayout:
pos_hint: {"top": 0.450,"left":1}
size_hint: 1,.225
ImageButton:
pos_hint: {"top": 0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
pos_hint: {"top": 0.8,"right":.35}
size_hint: .2,.7
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Astro"
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Forces"
FloatLayout:
pos_hint: {"top": 0.675, "left":1}
size_hint: 1,0.225
ImageButton:
pos_hint: {"top":0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
pos_hint: {"top": 0.8, "right":0.35}
size_hint: .2,.7
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Quantum"
markup: True
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Waves"
markup: True
FloatLayout:
pos_hint: {"top": 0.450,"left":1}
size_hint: 1,.225
ImageButton:
pos_hint: {"top": 0.8,"right":.85}
size_hint: .2,.7
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
pos_hint: {"top": 0.8,"right":.35}
size_hint: .2,.7
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
Label:
pos_hint: {"top": 0.1,"right":.85}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Astro"
Label:
pos_hint: {"top": 0.1,"right":.35}
size_hint: .2,.15
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
text: "Forces"
'''
提前致谢！ p.s -> 对 kivy 很陌生，但我可以自信地说我已经在谷歌上搜索了很多但无法找到解决方案..
如果您使用一系列 BoxLayouts 而不是一个 GridLayout，则行的高度不必相同。这是您的 kv 的修改版本：
#:import utils kivy.utils
#:set ImageButtonHeight 150
<ImageButton>:
size_hint_y: None
height: ImageButtonHeight
<MyLabel@Label>:
size_hint_y: None
height: self.texture_size[1]
font_color:
utils.get_color_from_hex("#425FFF")
font_size: 18
markup: True
FloatLayout:
canvas:
Color:
rgb: utils.get_color_from_hex("#69B3F2")
Rectangle:
size: self.size
pos: self.pos
ScrollView:
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
spacing: 10,10
Label:
font_color:
utils.get_color_from_hex("#424FFF")
id: general_relativity_label
font_size: 25
font_name: "Rubik-Bold.ttf"
text: "Calculator (by Gleb)"
size_hint_y: None
height: self.texture_size[1]
markup: True
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/014-gravity.png"
on_release:
app.change_screen("kinematics_screen", direction='right', mode='push')
ImageButton:
source: "Icons4/019-relativity.png"
on_release:
app.change_screen("relativity_screen", direction='right', mode='push')
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Kinematics"
MyLabel:
text: "Relativity"
BoxLayout:
orientation: 'vertical'
size_hint: 1,None
height: self.minimum_height
#Quantum Tunneling, Energy of H atom
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Quantum"
MyLabel:
text: "Waves"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Astro"
MyLabel:
text: "Forces"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/049-atom.png"
on_release:
app.change_screen("quantum_screen", direction='right', mode='push')
ImageButton:
source: "Icons4/046-transverse wave.png"
on_release:
print("Waves")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Quantum"
MyLabel:
text: "Waves"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: self.minimum_height
ImageButton:
source: "Icons4/034-orbit.png"
on_release:
print("Astronomy")
ImageButton:
source: "Icons4/018-clamp.png"
on_release:
print("Forces")
BoxLayout:
size_hint_y: None
height: self.minimum_height
MyLabel:
text: "Astro"
MyLabel:
text: "Forces"
当 minimum_height 用于 BoxLayout 时，您必须确保每个 child 的高度定义明确。为此（以及简化 kv），我为 ImageButton 创建了规则，并且 MyLabel class 用于代替大多数 [=20] =] 在 kv.
上面代码的大致结构是这样的：
ScrollView:
BoxLayout: # this is the top level BoxLayout, each child is a row
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
Label: # This is the first row
size_hint_y: None
height: self.texture_size[1]
BoxLayout: # This is another row (that contains two "subrows")
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
BoxLayout: # a "subrow" of ImageButtons
BoxLayout: # a "subrow" of MyLabels
FloatLayout: # This is another row
size_hint_y: None
height: 150 # just an example
您基本上可以在顶层 BoxLayout 下添加任何您想要的作为另一个“行”，但您必须定义该“行”的 height（通常包括设置 size_hint_y 到 None).