在 Kivy 中通过布局设置小部件的动态位置

Question

我想收到的东西似乎很简单；我想更改我的Label 和TextInput 小部件的大小和位置，同时动态调整大小。由于这些参数由布局控制，我正在尝试将我的TextInput 链接到FloatLayout 和我的Label 到AnchorLayout，但这并没有太大帮助。我做错了什么？

理想的结果：

• 来自Label 的文本集中在该层的底部
• TextInput 包含它当前填充的图层的 20% 的高度和 80% 的宽度

我得到了什么： TextInput completely disappears after linking FloatLayout to it, text in a label is not changing position at all

import kivy
from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.core.window import Window
from kivy.utils import get_color_from_hex


class SearchPerformer(GridLayout):
    pass


class MyApp(App):
    def build(self):
        return SearchPerformer()


if __name__ == '__main__':
    Window.clearcolor = get_color_from_hex('#F9E29C')

MyApp().run()

还有我定义 UI 的 KV 文件：

<SearchPerformer>
GridLayout:
    size: root.size
    cols: 2
    rows: 2

    BoxLayout:
        orientation: 'vertical'
        rows: 2
        cols: 1
        AnchorLayout:
            Label:
                text: "MAKE"
                font_size: 60
                anchor_x: "center"
                anchor_y: "bottom" # Although specifying bottom, my text label doesn't move to the bottom of the layer

        FloatLayout: # When FloatLayout is added, TextInput automatically disappears
            TextInput:
                border: (50, 50, 50, 50)
                multiline: False
                font_size: 30
                size_hint: .8, .2 # So then 80% width and 50% in height of this layer does not work as well...



    BoxLayout:
        orientation: 'vertical'
        rows: 2
        cols: 1
        Label:
            text: "MODEL"
            font_size: 60
        TextInput:
            border: (50, 50, 50, 50)
            multiline: False
            font_size: 30

    BoxLayout:
        orientation: 'vertical'
        rows: 2
        cols: 1
        Label:
            text: "YEAR"
            font_size: 60
        TextInput:
            border: (50, 50, 50, 50)
            multiline: False
            font_size: 30

    BoxLayout:
        orientation: 'vertical'
        rows: 2
        cols: 1
        Label:
            text: "ENGINE"
            font_size: 60
        TextInput:
            border: (50, 50, 50, 50)
            multiline: False
            font_size: 30

Answer 1

使用AnchorLayout 时，anchor_x 和anchor_y 属性是AnchorLayout 的一部分，而不是它的子项。所以你kv 的那部分应该是：

    AnchorLayout:
        anchor_x: "center"
        anchor_y: "bottom"
        Label:
            text: "MAKE"
            font_size: 60

当您使用FloatLayout 时，您必须使用pos_hint 或pos 定位其子项。但请注意，pos_hint 相对于FloatLayout 的位置定位子级。所以使用：

pos_hint: {'x':0, 'y':0}

将孩子定位在FloatLayout的左下角，但是：

pos: (0, 0)

这是默认设置，将孩子定位在显示屏的左下角（甚至可能不在FloatLayout 内）。所以要在你想要的地方得到TextInput，你可以使用上面的pos_hint。

另一种可能性是使用RelativeLayout，其中pos 坐标相对于RelativeLayout 的位置。在这种情况下，(0,0) 的默认 pos 会将子 TextInput 定位在您想要的位置。

您可以使用halign 和valign 调整Label 中文本的位置，但前提是text_size 大于实际文本所需的位置（texture_size）。因此，例如，这是一种调整您的Labels 中的文本位置的方法：

    Label:
        text: "ENGINE"
        font_size: 60
        text_size: self.size  # sets text size to allow below alignments to work
        valign: 'bottom'
        halign: 'center'