2023年8月3日 星期四

Kivy UIX篇 layout篇 StackLayout類 講解

簡述

根據官方解釋:

The StackLayout arranges children vertically or horizontally, as many as the layout can fit. The size of the individual children widgets do not have to be uniform.

意思是StackLayout會以垂直或水平的方式排列子物件,佈局可以容納盡可能多的子項。 各個子部件的大小不必統一。

示意圖如下:

基本範例

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

from kivy.app import App
from kivy.uix.stacklayout  import StackLayout

class MyLayout(StackLayout) :
    pass

class Myapp(App):
    def build(self):
        return MyLayout()

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

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

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

<MyLayout>:

    #可依需求替換為'lr-tb', 'tb-lr', 'rl-tb', 'tb-rl', 'lr-bt', 'bt-lr', 'rl-bt', 'bt-rl'
    orientation: 'rl-tb'

    canvas:
        Color:
            rgb: [.112, .358, .132]
        Rectangle:
            pos: self.pos
            size: self.size

    Button:
        text: 'A1'
        size_hint: 0.3,0.3

    Button:
        text: 'B2'
        size_hint: 0.3,0.3

    Button:
        text: 'C3'
        size_hint: 0.3,0.3

    Button:
        text: 'D4'
        size_hint: 0.3,0.3

    Button:
        text: 'E5'
        size_hint: 0.3,0.3

    Button:
        text: 'F6'
        size_hint: 0.3,0.3

    Button:
        text: 'G7'
        size_hint: 0.3,0.3

    Button:
        text: 'H8'
        size_hint: 0.3,0.3

    Button:
        text: 'I9'
        size_hint: 0.3,0.3

    Button:
        text: 'J10'
        size_hint: 0.3,0.3

執行結果如下:

StackLayout使用技巧:

1.orientation保證'前面'的方向不超出範圍,但後面的方向'不'保證不超出範圍,例如在基本範例中orientation: 'rl-tb',當我們不斷加入子物件時,如果往左塞不下則會往下塞(即使超出畫面)

沒有留言:

張貼留言

精選文章

Kivy UIX篇 widget篇 TabbedPanel類 event篇 講解