KIVY:包含水平BoxLayout的BoxLayout

时间:2019-01-20 20:17:35

标签: python user-interface kivy

我试图将4个Horizontal框布局以垂直方式堆叠在BoxLayout中。

Rough Sketch

我的KV文件:

<HBoxWidget>:
    BoxLayout:
        size: root.size
        pos: root.pos
        id: boxlayout_h
        orientation: 'horizontal'
        Image:
            source: '/Users/driftking9987/Desktop/fp.gif'
<VBoxWidget1>:
    BoxLayout:
        spacing: 10
        orientation: "horizontal"
        size: [1,.25]
        pos: root.pos
        Label:
            text: "Status : "
            color: [0,84,80,19]
        Label:
            text: "Pending"
            color: [0,84,80,19]
        Widget:


<ContainerBox>:
    orientation: 'horizontal'
    HBoxWidget:
    VBoxWidget1:

我计划垂直使用多个VBoxWidget,但效果不佳。

此外,要实现[9] Label,我想我将有一个BoxLayout,其中有2行,水平的第2行将具有上述属性。但这还没有解决。以下是得到的结果。我尝试将size_hint设置为1,.25,即整个区域将分为4个部分,但没有得到期望的结果。

PY文件:

from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout

class HBoxWidget(Widget):
    def __init__(self, **kwargs):
        super(HBoxWidget, self).__init__(**kwargs)

class VBoxWidget1(Widget):
    def __init__(self, **kwargs):
        super(VBoxWidget1, self).__init__(**kwargs)


class ContainerBox(BoxLayout):
    def __init__(self, **kwargs):
        super(ContainerBox, self).__init__(**kwargs)

class TestApp(App):
    def build(self):
        return ContainerBox() 

if __name__ == '__main__':
    TestApp().run()

1 个答案:

答案 0 :(得分:1)

这是怎么回事:我将HBOX和VBOX小部件更改为BoxLayout,并将Label和另一个BoxLayouts添加到ContainerBox。看起来很像你的图纸

enter image description here

<HBoxWidget>:

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        Image:
            source: 'duck.jpg'
<VBoxWidget1>:
    BoxLayout:
        orientation: "horizontal"
        size: [1,.25]
        pos: root.pos
        Label:
            text: "Status : "
            color: [0,84,80,19]
        Label:
            text: "Pending"
            color: [0,84,80,19]
        Widget: # Because of this widget Labels are not in the middle, its not on your drawing tough


<ContainerBox>:
    orientation: 'vertical'
    Label:
        text: 'Label'
        size_hint_y: 0.1
    BoxLayout:
        id: four_horizontals
        orientation: 'horizontal'
        HBoxWidget:
        BoxLayout:
            orientation:'vertical'
            # One solution
            #GridLayout:
            #    cols:1
            #    padding: 100
            #    VBoxWidget1:
            #    VBoxWidget1:
            #    VBoxWidget1:
            #    VBoxWidget1:

            #Second Solution
            BoxLayout:
                #size_hint_y: 0 to 1 - it says how much you reduce height. Now its 1/3 of its parent, because there are 3 boxlayouts. if you set 0.5, it will have 1/3*0.5 and the other 2 boxlayouts takes the height which you took from this one 
            BoxLayout:
                orientation:'vertical'
                VBoxWidget1:
                VBoxWidget1:
                VBoxWidget1:
                VBoxWidget1:
            BoxLayout:

python

from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout

class HBoxWidget(BoxLayout):
    def __init__(self, **kwargs):
        super(HBoxWidget, self).__init__(**kwargs)

class VBoxWidget1(BoxLayout):
    def __init__(self, **kwargs):
        super(VBoxWidget1, self).__init__(**kwargs)


class ContainerBox(BoxLayout):
    def __init__(self, **kwargs):
        super(ContainerBox, self).__init__(**kwargs)

class TestApp(App):
    def build(self):
        return ContainerBox() 

if __name__ == '__main__':
    TestApp().run()

其他信息:

我管理这四个标签的方式并不是真正正确的方式。我会给您提示如何更正确地解决它。 选中https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html#module-kivy.uix.floatlayout

在BoxLayout上,小部件会自动进行自身组织-水平或垂直,并根据所属的空间进行缩放。 借助FloatLayout,没有任何限制,因此您可以根据需要放置标签。

通常,如果您更改分辨率,则最好使用BoxLayouts解决它。如果您想获得更多的自由,请使用FloatLayout,但是您必须自己管理小部件的缩放和定位