Curious George sees the world
 
Flet – Image

Flet – Image

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: 圖片在垂直方向上重複。

執行的結果:

Flet Image 執行結果

第二張圖和第三張是同一張,第三張設了顏色為 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

One comment

  1. Pingback: Flet – QR Code Generator – George的生活點滴

發表迴響