Kivy UIX篇 widget篇 Image類 attribute篇 講解

簡述

根據官方解釋:

The Image widget is used to display an image.

言簡意賅~

基本範例

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

from kivy.app import App
from kivy.uix.gridlayout import GridLayout


#先讓MyLayout繼承GridLayout
class MyLayout(GridLayout):
    pass


class Myapp(App):

    def build(self):
        return MyLayout()


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

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

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

<MyLayout>:

    rows: 2

    Image:
        source: 'dog.jpg' #此為目前工作目錄路徑下的圖片

    Image:
        source: 'cat.jpg'

執行結果如下:

Image使用技巧:

1.異步加載(Asynchronous Loading):用來上傳網路上的圖片

程式碼如下:

<MyLayout>:

    rows: 2

    AsyncImage:
        source: 'https://ppt.cc/fdQSex@.jpg' #引號內填入圖片網址

    Image:
        source: 'dog.jpg'
    Image:
        source: 'cat.jpg'

執行結果如下:

2.調整圖片在單元格內的呈現方式

程式碼如下:

<MyLayout>:

    rows: 2

    Image:
        source: 'dog.jpg'
        #更多樣式請考 https://kivy.org/doc/stable/api-kivy.uix.image.html#adjustment
        fit_mode: 'fill'
        
    Image:
        source: 'cat.jpg'

執行結果如下: