Kivy - 使用实现的 ScrollView 在 GridLayout 中更改 FloatLayout 的行高答案

【问题标题】：Kivy - Changing Row height of FloatLayout within GridLayout with implemented ScrollViewKivy - 使用实现的 ScrollView 在 GridLayout 中更改 FloatLayout 的行高
【发布时间】：2020-11-10 07:23:54
【问题描述】：

我正在尝试创建一个滚动视图，其中包含两列，在每个“类别”中，它们下面有 4-5 个图标+下标，由一个简单的标题分隔。我将所有 ImageButtons 与每个带有 FloatLayout 的 Image 按钮的下标对齐，所有这些都在 GridLayout 内部（只有一列）。

我的问题是如何更改第一行的高度（主标题），以及包含每个类别标题的行 - 每个类别的次要较小字体标题，（包含按钮 + 对应的行的高度下标是完美的）。

到目前为止，要让我的滚动视图工作，我必须有一个 row_default_height 值，否则我所有的行都被堆叠... 而且由于默认情况下所有行的高度相同，这会留下很多空白空间，我想成为一个较小的标题。

这是我目前所得到的：

'''

：

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 很陌生，但我可以自信地说我已经用谷歌搜索了很多，但无法找到解决方案..

【问题讨论】：

标签： python kivy scrollview row-height

【解决方案1】：

如果您使用一系列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 时，您必须确保每个孩子的高度都已明确定义。为此（以及简化kv），我为ImageButton 和一个MyLabel 类创建了规则，用于代替kv 中的大部分Labels。

以上代码的大体结构是这样的：

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） .

【讨论】：

谢谢！您已经阐明了正确的方法。
是否可以使用 BoxLayout 内的 FloatLayouts 来操作各个行的大小？我想要两个有一个高度的连续三行，然后是一个具有自己高度的标题，然后重复..
我在上面的回答中添加了更多解释。只要您定义了height，您就可以在顶层BoxLayout 下添加任何您想要的内容作为另一行。 height 可以是任何你想要的，并且不会影响任何其他行的高度。我在代码中使用的每个“行”BoxLayouts 的高度都设置为self.minimum_height，但您可以将其设置为任何您想要的。
这提供了更多的说明，我现在可以修改每行的高度，谢谢。经过更多的摆弄，我基本上意识到，为了使按钮图像本身可点击（而不是从 boxlayout 分配的整个空间），我必须完全转向 FloatLayouts - 如果我混合了 Boxlayouts 和 FloatLayouts ，当调整窗口大小时，一切都会错位。您是否碰巧在不诉诸 FloatLayouts 的情况下解决了这个问题？链接到我发布的单独问题（此评论太长，将在此之后发布）
链接在这里 --> stackoverflow.com/questions/63024668/…