布局中的 Kivy 小部件对齐问题答案

【问题标题】：Kivy widget alignment issue in layout布局中的 Kivy 小部件对齐问题
【发布时间】：2019-10-02 06:35:03
【问题描述】：

刚开始接触 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]

【问题讨论】：

标签： python kivy kivy-language

【解决方案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]

请注意，我已将最后一个按钮小部件的大小从绝对大小更改为相对大小。这将防止在不同屏幕尺寸上呈现应用时出现意外行为。

出于与上述相同的原因，还将主要的 2 个 BoxLayout 小部件的大小更改为相对大小。

另一种方法是向 Button Widget 添加位置提示

文档：pos_hint

Button:
    pos_hint: {'y': 1-1/(self.parent.height/self.height)}
    id:test
    text: 'weather icon'
    size_hint: [None, None]
    size:[100,100]

【讨论】：