python - 如何在 kivy 中将 pos_hint 与 FloatLayout 一起使用？

Question

我正在尝试在我的测试 UI 中对齐标签和按钮这是我的 kv 文件

<test>:   

    Label:        
        text: "foo"
        color: 0,1,0,1
        #pos:120,20
        pos_hint:{"right":0.1,"top":1}
    Label:
        text:"boo"
        color: 0,0,1,1
        #pos:80,20
        pos_hint:{"right":0.1,"top":0.5}

    Label:
        text:"bar"
        color: 1,0,0,1
        #pos:20,120
        pos_hint:{"right":0.1,"top":0.1}
    Button:
        text:"goo"
        size_hint:0.1,0.1

我能够使用 pos 成功创建标签 foo、boo 和 bar，但是当我使用 pos_hint 时它返回空白输出？

Answer 1

您得到的是“空白”输出，因为标签的文本不在屏幕上(并且标签本身是透明的)。

1. 由于您的布局<test>没有size_hint所以它需要默认为 (1,1)这使得它的大小为 Window (这是 800 x 600 ).
2. 您的标签也没有 size_hint所以他们默认为 size他们的 parent - 布局，所以他们最终有 size [800, 600] .标签中的文本默认居中，背景是透明的。 (也许你应该先用按钮试试这个，这样你就有了尺寸的直观表示)
3. 因此，text 标签带有 pos = (0,0)会出现在屏幕中央

然后我们有 pos_hint采取不同的论点(以下描述对于 FloatLayout 之外的事物可能不准确):

pos_hint:{"right":v1,"top":v2}设置 pos至 (self.parent.right*v1 - self.width, self.parent.top*v2 - self.height) - 你正在设置 top和 right您正在放置的小部件。因此你的标签得到这样的负坐标，它们的文本永远不会出现在屏幕上(因为左下角是 0,0 )

然后我们有pos_hint:{"x":v1,"y":v2} (您可能会发现这对您的情况更有用)，以及 pos_hint:{"center_x":v1,"center_y":v2} .您应该能够弄清楚它们是如何工作的，请记住尺寸会影响外观，因为 pos只设置左下坐标..你可以玩这个.kv文件:

#:kivy 1.0.9

<test>:   
    #size: (500, 500)
    #size_hint:(None, None)
    canvas:
        Color: 
            rgb: 1,0,0
        Rectangle:
            size: (5,5)
            pos: (0,0)

    Widget:
        id:wig
        pos: (250,250)
        canvas:
            Color: 
                rgb: 1,1,1
            Rectangle:
                size: (5,5)
                pos: self.pos

    Label:
        id: boo
        text:"boo"
        color: 0,0,1,1
        #size_hint:(1,1)
        pos_hint:{"center_x":1,"center_y":1}

    Label:
        id: foo
        text: "foo"
        color: 0,1,0,1
        #size_hint: (.6,.6)
        pos_hint:{"x":1,"y":1}

    Label:
        id: bar
        text:"bar"
        color: 1,0,0,1
        #size:(500,500)
        #size_hint:(None, None)
        pos_hint:{"right":1,"top":1}
        #pos:100, 10


    Button:
        text:"goo"
        size_hint:0.1,0.1
        pos:(1,1)
        #some debug info, i know the code is ugly
        on_press: print self.parent.size,'\n', self.parent.right, self.parent.top, self.parent.x, self.parent.y, self.parent.center_x, self.parent.center_y, "\n","bar_right_top:", bar.pos,"foo_x_y:", foo.pos,"boo_center:", boo.pos, "\nwhite square:", wig.pos, "\n", bar.size, foo.size, boo.size