Flet 应用中利用 page.client_storage 实现数据持久化教程

import flet as ft

def main(page: ft.Page):
    # 页面基本设置
    page.window_center()
    page.window_width = 400
    page.window_height = 600
    page.title = "Flet 持久化待办事项"
    page.bgcolor = "#141414"

    # 1. 定义清除所有任务的函数
    def all_clear(e):
        # 清除 client_storage 中的所有数据
        page.client_storage.clear()
        # 清除 UI 中的所有任务控件
        task_column.controls.clear()
        # 更新页面
        page.update()

    # 设置浮动操作按钮用于清除所有任务
    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.icons.CLEANING_SERVICES_ROUNDED,
        on_click=all_clear,
        bgcolor="#4B90BE",
        scale=0.95
    )

    # 2. 定义添加任务的函数
    def add_task(e):
        # 确保输入框不为空
        if tf.value:
            # 增加添加按钮的data属性作为任务的唯一ID计数器
            # add_button.data 初始值为 0，每次点击增加
            add_button.data += 1

            # 获取任务文本
            task_text = tf.value

            # 创建一个 ft.Text 控件来显示任务
            # 注意：这里我们创建了控件，但不会直接存储它
            task_control = ft.Text(task_text, color=ft.colors.WHITE)

            # 将任务控件添加到显示任务的列中
            task_column.controls.append(task_control)

            # 将任务文本存储到 client_storage
            # 使用 f"task_{add_button.data}" 作为唯一的键
            page.client_storage.set(f"task_{add_button.data}", task_text)

            # 清空输入框
            tf.value = ""

            # 更新页面以显示新任务和清空的输入框
            page.update()

            # 打印当前所有存储的键，用于调试
            print("当前存储的键:", page.client_storage.get_keys(''))

        # 如果输入框为空，则不执行任何操作
        else:
            tf.focus() # 重新聚焦输入框
            page.update()


    # 任务输入框
    tf = ft.TextField(
        label='输入新任务',
        expand=True, # 允许文本框扩展以填充可用空间
        color=ft.colors.WHITE,
        hint_text_style=ft.TextStyle(color=ft.colors.GREY_500)
    )

    # 添加任务按钮
    # data=0 用于作为任务ID的计数器
    add_button = ft.IconButton(
        icon=ft.icons.ADD,
        on_click=add_task,
        data=0,
        icon_color="#4B90BE",
        tooltip="添加任务"
    )

    # 用于显示所有任务的列
    task_column = ft.Column(
        controls=[],
        spacing=10 # 任务之间的间距
    )

    # 将输入框和添加按钮添加到页面顶部
    page.add(
        ft.Row(
            controls=[
                tf,
                add_button
            ],
            alignment=ft.MainAxisAlignment.CENTER
        )
    )

    # 将任务显示列添加到页面
    page.add(
        ft.Container(
            content=task_column,
            expand=True, # 允许任务列表扩展
            padding=ft.padding.all(10),
            alignment=ft.alignment.top_left
        )
    )

    # 3. 应用启动时加载已存储的任务
    # 检查 client_storage 中是否存在以 'task_' 开头的键
    stored_keys = page.client_storage.get_keys('task_')
    if stored_keys:
        # 对键进行排序，以确保任务按添加顺序显示
        # 提取数字部分进行排序，例如 'task_10' -> 10
        sorted_keys = sorted(stored_keys, key=lambda k: int(k.split('_')[1]))

        for key in sorted_keys:
            # 获取存储的任务文本
            task_text = page.client_storage.get(key)
            if task_text: # 确保获取到的值不为空
                # 根据任务文本创建 ft.Text 控件
                task_control = ft.Text(task_text, color=ft.colors.WHITE)
                # 将控件添加到任务显示列中
                task_column.controls.append(task_control)

                # 更新 add_button.data，确保新的任务ID不会与现有ID冲突
                # 找到最大的ID，并将其设置为 add_button.data 的起始值
                current_max_id = int(key.split('_')[1])
                if current_max_id > add_button.data:
                    add_button.data = current_max_id

        # 加载完成后，将 add_button.data 增加1，为下一个新任务做准备
        add_button.data += 1

        # 更新页面以显示加载的任务
        page.update()


# 运行 Flet 应用
ft.app(target=main)