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
Pingback: Flet – QR Code Generator – George的生活點滴