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

文档：System.Interactive.Async

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小部件的大小也更改为相对大小。

另一种方法是向按钮小部件添加位置提示

文档：AnchorLayout

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

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

1 个答案: