如何在垂直框布局中放置按钮？

Question

我有一个使用 Kivy UI 框架用 Python 编写的示例应用程序。有一个

Accordion

小部件，

Accordion

中的每个项目都应显示一个带有多个

TextInput

字段的条目，并且在左侧我想要几个按钮 - 一个用于编辑，一个用于删除条目。

我创建了一个

AccordionItem

小部件，其中包括水平方向的

BoxLayout

。 其中有另一个垂直方向的

BoxLayout

按钮，然后是两个

TextInput

小部件。 这是

Kivy

语言代码：

<NewItem@AccordionItem>:
    title: 'date today  time     reference'
    is_editable: False
    BoxLayout:
        orientation: 'horizontal'

        BoxLayout:
            orientation: 'vertical'
            size_hint_y: None
            height: 100
            size_hint_x: None
            width: 50

            Button:
                id: edit_button
                background_normal: 'images/iconmonstrEdit32.png'
                size_hint: None, None
                size: 30, 30
                pos_hint: {'center_x': 0.5, 'center_y': 0.5}
                on_press: root.save_entry(self)

            Button:
                id: remove_button
                background_normal: 'images/iconmonstrXMark32.png'
                size_hint: None, None
                size: 30, 30
                pos_hint: {'center_x': 0.5, 'center_y': 0.5}
                on_press: root.remove_entry(self)

        TextInput:
            id: input_1
            multiline: 'True'
            hint_text: 'This'

        TextInput:
            id: input_2
            multiline: 'True'
            hint_text: 'That'

目前，当我运行它时，它看起来像这样：

左边的两个按钮堆在

BoxLayout

的底部。 如何让这些按钮显示在顶部，并且它们之间有一点空间？

我尝试了各种方法，但都没有将按钮的位置更改为左侧

BoxLayout

的顶部。

我尝试将 pos_hint 更改为：

{'center_x': 0.5, 'top': 0.1}

，但没有任何改变。

Kivy 2.3.0 文档中的

BoxLayout

描述 表示：“位置提示部分起作用，具体取决于方向：如果方向是垂直的：将使用 x、right 和 center_x。”所以我尝试从 pos_hint 中删除“center_y”属性，但没有任何改变。

我什至尝试将

BoxLayout

更改为

AnchorLayout

，并将

anchor_y

设置为“顶部”，但这更糟糕。

当结果似乎没有改变时，如何在 Kivy 中进行像这样的基本小部件定位？

Answer 1

您可以使用

pos_hint

调整位置，并使用

spacing

添加按钮之间的空间。

pos_hint

可以应用于

vertical

BoxLayout

，因为

pos_hint

被包含的

BoxLayout

使用，即

horizontal

。所以你的

kv

的那部分可以是：

BoxLayout:
    orientation: 'horizontal'

    BoxLayout:
        orientation: 'vertical'
        size_hint_y: None
        height: 100
        size_hint_x: None
        width: 50
        pos_hint: {'top': 1.0}
        spacing: 10