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

问题描述

我想收到的东西很简单；我想更改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)
                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)
            multiline: False
            font_size: 30

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

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

解决方法

使用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的位置。在这种情况下，pos的默认(0,0)会将子TextInput放在您想要的位置。

您可以使用Label和halign来调整文本在valign中的位置，但前提是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'

kivy kivy-language python