布局中基维小部件对齐问题

Question

刚开始进入Kivy，面临一些对齐问题。

请看下图，我正在尝试在标记有蓝色圆圈的位置调整用红色圆圈标记的按钮[[天气图标。

这里是* .kv文件代码：

BoxLayout:
        orientation:'horizontal'
        BoxLayout:
            orientation:'horizontal'
            StackLayout:
                orientation:'tb-rl'
                canvas:
                    Color:
                        rgb: [.3, .320, .380]
                    Rectangle:
                        pos: self.pos
                        size: self.size
                Button:
                    id:current_temperature
                    text: root.display_current_temperature()
                    font_size:40
                    size_hint: [None, None]
                    size:[200,50]
                Button:
                    id:current_location
                    text: root.display_location()
                    font_size:15
                    size_hint: [None, None]
                    size:[200,50]
            Button:
                id:test
                text: 'weather icon'
                size_hint: [None, None]
                size:[100,100]

Answer 1

一种方法是使用kivy.uix.AnchorLayout

文档：AnchorLayout

BoxLayout:
    orientation:'horizontal'
    BoxLayout:
        size_hint: [.8, 1]
        orientation:'horizontal'
        StackLayout:
            orientation:'tb-rl'
            canvas:
                Color:
                    rgb: [.3, .320, .380]
                Rectangle:
                    pos: self.pos
                    size: self.size
            Button:
                id:current_temperature
                text: root.display_current_temperature()
                font_size:40
                size_hint: [None, None]
                size:[200,50]
            Button:
                id:current_location
                text: root.display_location()
                font_size:15
                size_hint: [None, None]
                size:[200,50]
    BoxLayout:
        size_hint:[.2, 1]
        AnchorLayout:
            anchor_x: 'center'
            anchor_y: 'top'
            Button:
                id:test
                text: 'weather icon'
                size_hint: [1, None]

[请注意，我将最后一个Button Widget的大小从绝对值更改为相对值。这样可以防止在不同屏幕尺寸上渲染应用程序时出现意外行为。
出于同样的原因，也将2个BoxLayout小部件的大小也更改为相对大小。