Flet – Image

George

3 個月前

Flet 中的 Image widget 的主要功用是顯示圖片，它提供了一些屬性，供我們調整圖片的大小樣式等等

我們利用底下的程式碼來說明:


# Flet - Image
# 2024-08-13
# https://github.com/lcc728/flet/blob/main/ex_image.py

import flet as ft

def main(page: ft.Page):   

    page.add(
        ft.Image(src="./image/DSCN1573.jpg", width=200),
        ft.Image(src="./image/IMG_0607.jpg", width=200, border_radius=30),
        ft.Image(src="./image/IMG_0607.jpg", width=200, color=ft.colors.AMBER, color_blend_mode = ft.BlendMode.HARD_LIGHT),
        ft.Image(src="./IMG_0609.jpg", 
                 width=200, 
                 error_content=ft.Text("!!!Error!!!", color=ft.colors.RED)),
    )
    
ft.app(target=main)

src：圖片的來源，這裡可以是本機上的路徑或 URL, 但要注意路徑，以我的寫法是在程式所在位置下的 image子目錄
width, height：設定圖片的寬度及高度
border_radius：圖片的圓角設定，預設為 0
color：圖片的顏色
color_blend_mode：遮罩的類型，這裡有許多的類型，可參考官網文件
error_content：當圖片不能載入時的提示訊息
semantics_label：無障礙的閱讀標籤
tooltip：當游標移過時的提示文字
fit：圖片的填充模式，通常搭配容器或設為背景時使用， fit 的說明: https://flet.dev/docs/reference/types/imagefit
repeat：圖片重複出現的模式，和 fit 一樣通常設為背景時使用
- ft.ImageRepeat.NO_REPEAT: 圖片不重複。
- ft.ImageRepeat.REPEAT: 圖片在水平和垂直方向上重複。
- ft.ImageRepeat.REPEAT_X: 圖片在水平方向上重複。
- ft.ImageRepeat.REPEAT_Y: 圖片在垂直方向上重複。

執行的結果:

第二張圖和第三張是同一張，第三張設了顏色為 AMBER，遮罩效果為 ft.BlendMode.HARD_LIGHT 所產生的圖

建議使用 flet run xxxx.py 執行程式，如此可支持 flutter 的 hotreload 的功能，只要修改完遮罩存檔後, app 就可馬上看到效果的變化了

第四張圖則是圖片不存在，app會顯示 error_content 中所要做的事:一個 text 的 widget ，顯示 !!!Error!!! 的文字，文字顏色為紅色

Source Code:https://github.com/lcc728/flet/blob/main/ex_image.py