2023年7月24日 星期一

Kivy UIX篇 layout篇 FloatLayout類 講解

簡述:

根據官方解釋:

FloatLayout honors the pos_hint and the size_hint properties of its children.

意思是FloatLayout在添加子物件時沒有特殊排列方式,完全依據子物件的參數決定大小與位置。

示意圖如下:

基本範例:

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

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout


class MyLayout(FloatLayout):
    pass


class Myapp(App):

    def build(self):
        return MyLayout()


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

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

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

<MyLayout>:

    #添加Button物件(此段只是拿來呈現Button的位置,後面會有更詳細的解說)
    Button:
        text: 'A1'
        size_hint: .2,.2
        #讓物件依照layout的視窗大小調整長與寬
        pos_hint: {'x':.0, 'y':.0}

    Button:
        text: 'B2'
        size_hint: .2,.2
        pos_hint: {'x':.2, 'y':.2}

    Button:
        text: 'C3'
        size_hint: .2,.2
        pos_hint: {'x':.4, 'y':.4}

    Button:
        text: 'D4'
        size_hint: .2,.2
        pos_hint: {'x':.6, 'y':.6}

    Button:
        text: 'E5'
        size_hint: .2,.2
        pos_hint: {'x':.8, 'y':.8}

執行結果如下:

FloatLayout使用技巧:

1.FloatLayout物件本身無法指定位置,但內部子物件可以指定位置(特別與RelativeLayout類比較)

程式碼如下:

<MyLayout>:

    pos: 200,200

    Button:
        text: 'A1'

執行結果如下:

若執行以下程式碼:

程式碼如下:

<MyLayout>:
      
    Button:
        text: 'A1'
        pos: 200,200

執行結果如下:


沒有留言:

張貼留言

精選文章

Kivy UIX篇 widget篇 TabbedPanel類 event篇 講解