Kivy UIX篇 layout篇 AnchorLayout類 講解

簡述

根據官方解釋:

The AnchorLayout aligns its children to a border (top, bottom, left, right) orcenter.

意思是AnchorLayout會將子物件與邊框（頂部、底部、左側、右側）或中心對齊。

示意圖如下:

基本範例

首先在main.py中寫上起手式:

from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout


class MyLayout(AnchorLayout):
    pass


class Myapp(App):

    def build(self):
        return MyLayout()


if __name__ == '__main__':
    Myapp().run()

在以上程式碼中，我讓MyLayout類繼承AnchorLayout類，使得在my.kv中的<MyLayout>:可以繼承AnchorLayout類的特性。

在my.kv中寫上此段程式碼:

<MyLayout>:

    #宣告AnchorLayout子物件的位置
    anchor_x: 'left' #可以根據需求替換為center、right
    anchor_y: 'center' #可以根據需求替換為top、bottom

    #添加背景顏色(此段只是拿來呈現AnchorLayout的範圍，後面會有更詳細的解說)
    canvas:
        Color:
            rgb: [.112, .358, .132]
        Rectangle:
            pos: self.pos
            size: self.size

    #添加Button物件(此段只是拿來呈現Button的位置，後面會有更詳細的解說)
    Button:
        text: 'Hello'
        size_hint: None, None
        size: 100,100

執行結果如下:

可以看到我們添加的 Button 物件被放置在整個畫面的左邊中間，符合我們的預期。

AnchorLayout使用技巧

1.我們無法在同一個AnchorLayout同時宣告多個anchor_x與anchor_y(也就是同一個Anchor Layout，不可能有些物件在左下、有些物件在右上)，如下圖所示:

2.若我們在同一個AnchorLayout中加入許多子物件，則添加的物件將全部重疊(的確也合理，畢竟我們只能宣告一組anchor_x與anchor_y，子物件當然全部都出現在同一位置)
在my.kv中寫上此段程式碼:

<MyLayout>:

    anchor_x: 'left' 
    anchor_y: 'center' 

    canvas:
        Color:
            rgb: [.112, .358, .132]

        Rectangle:
            pos: self.pos
            size: self.size

    Button:
        text: 'Hello'
        size_hint: None, None
        size: 100,100

    #多添加此Label物件(此段只是拿來呈現Label的位置，後面會有更詳細的解說)
    Label:
        text: 'World'
        size_hint: None, None
        size: 100,100

執行結果如下:

由以上結果可以看到Hello與World重疊，符合預期。