如何在Flet应用中集成并动态更新Matplotlib热力图？

核心思路 #

1. Matplotlib图形转Flet兼容格式：将Matplotlib生成的热力图保存到内存字节流（BytesIO），转换为Flet Image组件可识别的字节数据。
2. 动态更新UI：每次热力图数据更新后，重新生成图像数据并替换Image组件的数据源，调用组件的update()方法刷新界面。

关键实现步骤 #

1. 改造ShowHeatMap类 #

移除原类中依赖Matplotlib交互式窗口的代码，新增生成图像字节数据的方法：

import matplotlib.pyplot as plt
from matplotlib.cm import viridis
from io import BytesIO
import numpy as np

class ShowHeatMap:
    MatrixSize = (50, 50)
    VMin = 0  # 根据你的数据范围调整
    VMax = 100  # 根据你的数据范围调整
    Cmap = viridis

    def __init__(self, Buffer):
        self.BufferList = Buffer
        self.MatrixData = self.ConvertListToMatrix()
        # 关闭Matplotlib交互式模式，避免弹出独立窗口
        plt.ioff()
        self.Fig, self.Ax = plt.subplots(figsize=(6, 6))
        self.Cax = self.Ax.imshow(
            self.MatrixData, 
            cmap=self.Cmap, 
            vmin=self.VMin, 
            vmax=self.VMax, 
            interpolation='quadric'
        )
        self.Fig.colorbar(self.Cax, ax=self.Ax)
        # 隐藏冗余坐标轴（可选）
        self.Ax.set_xticks([])
        self.Ax.set_yticks([])
        self.Fig.tight_layout()

    def ConvertListToMatrix(self):
        # 实现列表转矩阵的逻辑，示例如下
        return np.array(self.BufferList).reshape(self.MatrixSize)

    def UpdateHeatMap(self, NewData):
        self.BufferList = NewData
        self.MatrixData = self.ConvertListToMatrix()
        self.Cax.set_data(self.MatrixData)
        return self._get_image_bytes()

    def _get_image_bytes(self):
        # 将当前图形转为PNG字节流
        buf = BytesIO()
        self.Fig.savefig(buf, format='png', bbox_inches='tight')
        buf.seek(0)
        return buf.getvalue()

2. Flet应用集成与动态更新 #

使用Image组件展示热力图，通过定时器模拟数据更新（或替换为你的实际数据触发逻辑）：

import flet as ft
import numpy as np

def main(page: ft.Page):
    page.title = "动态热力图"
    page.window_width = 700
    page.window_height = 700

    # 初始化测试数据
    initial_data = np.random.randint(0, 100, size=50*50).tolist()
    heatmap = ShowHeatMap(initial_data)

    # 创建Flet Image组件加载初始热力图
    heatmap_image = ft.Image(
        src_bytes=heatmap._get_image_bytes(),
        fit=ft.ImageFit.CONTAIN,
        width=600,
        height=600
    )
    page.add(heatmap_image)

    def update_heatmap(e):
        # 生成新测试数据（替换为你的实际数据来源）
        new_data = np.random.randint(0, 100, size=50*50).tolist()
        # 更新热力图并获取新图像字节
        new_image_bytes = heatmap.UpdateHeatMap(new_data)
        # 更新Image组件数据源
        heatmap_image.src_bytes = new_image_bytes
        # 刷新单个组件提升性能
        heatmap_image.update()

    # 添加触发更新的按钮，每1秒刷新一次
    page.add(ft.ElevatedButton("开始动态更新", on_click=lambda e: page.run_interval(1000, update_heatmap)))

if __name__ == "__main__":
    ft.app(target=main)

关键细节说明 #

• 关闭Matplotlib交互模式：避免弹出独立绘图窗口，确保图形仅在Flet界面内展示。
• UI更新最佳实践：优先更新单个组件（heatmap_image.update()）而非整个页面，减少性能消耗。
• Flet组件选择：Image组件直接支持字节流数据源，是Matplotlib图形集成的最优选择。

内容的提问来源于stack exchange，提问作者Harcal