使用 Flet 刷新动态变化的图片-Python教程-PHP中文网

使用 Flet 刷新动态变化的图片

DDD

发布： 2025-09-14 23:24:01

原创

751人浏览过

使用 flet 刷新动态变化的图片

在 Flet 应用中动态更新图片，特别是当图片文件名不变但内容变化时，直接使用 page.update() 方法可能会失效。这是因为 Flet 可能会缓存图片，导致即使文件内容改变，显示的仍然是旧的图片。解决这个问题需要绕过缓存，强制 Flet 重新加载图片。

以下是一种实现动态刷新图片的方法：

读取图片文件： 使用 Pillow (PIL) 库读取图片文件。
转换为 NumPy 数组： 将图片转换为 NumPy 数组。
转换回图片对象： 将 NumPy 数组转换回 Pillow 的图片对象。
使用 BytesIO 创建内存缓冲区： 创建一个内存缓冲区，用于存储图片数据。
将图片保存到缓冲区： 将图片以 JPEG 格式保存到内存缓冲区。
编码为 Base64 字符串： 将内存缓冲区中的图片数据编码为 Base64 字符串。
更新 ft.Image 控件： 将 Base64 字符串赋值给 ft.Image 控件的 src_base64 属性。
调用 image1.update() 方法：调用image1.update()刷新图片控件。

import numpy as np
import base64
import flet as ft
from flet import Image
from io import BytesIO
from PIL import Image as image

image_path = r"Python\plate_0.jpg" # 初始图片路径

def main(page=ft.Page):
    page.window_width = 375
    page.window_height = 300

    # 初始图片加载和编码
    pil_photo = image.open(image_path)
    arr = np.asarray(pil_photo)
    pil_img = image.fromarray(arr)
    buff = BytesIO()
    pil_img.save(buff, format="JPEG")
    image_string = base64.b64encode(buff.getvalue()).decode('utf-8')
    image1 = Image(src_base64=image_string)

    def update_image(e):
        """更新图片的函数"""
        nonlocal image1  # 声明 image1 为非局部变量

        # 重新读取图片
        pil_photo = image.open(image_path)
        arr = np.asarray(pil_photo)
        pil_img = image.fromarray(arr)
        buff = BytesIO()
        pil_img.save(buff, format="JPEG")
        newstring = base64.b64encode(buff.getvalue()).decode("utf-8")

        # 更新 Image 控件的 src_base64 属性
        image1.src_base64 = newstring
        image1.update()

    page.add(
        ft.Row(controls=[image1], alignment='center'),
        ft.Row(controls=[ft.TextButton("Test", on_click=update_image)], alignment='center')
    )

ft.app(target=main)

登录后复制

代码解释：

image_path: 指定了图片文件的路径。每次点击更新按钮的时候，都会重新读取该路径下的图片，因此确保该路径下的图片已经被更新。
update_image(e) 函数：这个函数是关键，它负责重新读取图片，将其转换为 Base64 字符串，并更新 ft.Image 控件的 src_base64 属性。每次点击按钮都会执行该函数。
image1.update(): 调用 image1.update() 方法，强制 Flet 刷新 ft.Image 控件。
nonlocal image1: image1 是在 main 函数中定义的，如果在 update_image 函数中要修改它，需要使用 nonlocal 关键字声明。

注意事项：