如何在 Flet 中更新完整布局

Question

在下面的代码中，我创建了一个 Flet 应用程序，其中两个文本控件应根据按钮的点击次数更新其数字。为什么这没有发生？

一点背景知识：这是我的实际代码的简化版本，其中我根据字典的值生成一个相当复杂的布局（网格），具体取决于字典，这个布局有更多或更少的行，所以我想要立即更新整个布局和其中的值。

我尝试了很多事情并查看了文档，但我找不到任何有关更新布局的信息。

import flet as ft


class MyWidget(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.data = 0
        self.layout = []

    def build_function(self):
        self.layout = ft.Row(
            [
                ft.Text(f"Button clicked {self.data} time(s)"),
                ft.Text(f"Button clicked {self.data} time(s)"),
            ]
        )
        print(self.layout)

    def button_clicked(self, e):
        self.data += 1
        self.build_function()
        print("data = ", self.data)
        self.update()

    def build(self):
        self.build_function()
        return ft.Column(
            [
                ft.ElevatedButton(
                    "Button with 'click' event", on_click=self.button_clicked
                ),
                self.layout,
            ]
        )


def main(page: ft.Page):
    page.add(MyWidget())


ft.app(target=main)

Answer 1

您无法更新已放置在布局上的控件，但可以重建它们。如果您像下面这样更新 ini 和 build_function，它应该可以工作：

def __init__(self):
    super().__init__()
    self.data = 0
    self.layout = []
    self.btn_list = []

def build_function(self):
    self.btn_list.clear()
    self.btn_list.append(ft.Text(f"Button clicked {self.data} time(s)"))
    self.btn_list.append(ft.Text(f"Button clicked {self.data} time(s)"))
    self.layout = ft.Row(self.btn_list)
    """
        [
            #ft.Text(f"Button clicked {self.data} time(s)"),
            #ft.Text(f"Button clicked {self.data} time(s)"),
        ]
       
    )
    print(self.layout)
    """

Answer 2

直接更新小部件中的布局变量不会更改构建函数中附加的列的内容。 下面的代码有效，它限制了对文本框的更新并对其调用刷新。

import flet as ft


class MyWidget(ft.UserControl):
    def __init__(self,root: ft.Page):
        super().__init__()
        self.data = 0
        self.layout = []

    def build_function(self):
        self.layout = ft.Row(
            [
                ft.Text(f"Button clicked {self.data} time(s)"),
                ft.Text(f"Button clicked {self.data} time(s)"),
            ]
        )
        print(self.layout)

    def button_clicked(self, e):
        self.data += 1
        print("data = ", self.data)
        for i in self.layout.controls:
            i.value=f"Button clicked {self.data} time(s)"
            i.update()
        #self.update()

    def build(self):
        self.build_function()
        self.col=ft.Column(
            [
                ft.ElevatedButton(
                    "Button with 'click' event", on_click=self.button_clicked
                ),
                self.layout,
            ]
        )
        return self.col


def main(page: ft.Page):
    page.add(MyWidget(page))


ft.app(target=main)

我没有考虑效率，一次在小部件上调用更新的更简单的优化会导致 page.py 中出现异常，并且使用异步（跟踪提示锁定作为潜在问题）会因递归对象而崩溃编码更新。我

这是异步代码：

import flet as ft


class MyWidget(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.data = 0
        self.layout = []

    def build_function(self):
        self.layout = ft.Row(
            [
                ft.Text(f"Button clicked {self.data} time(s)"),
                ft.Text(f"Button clicked {self.data} time(s)"),
            ]
        )
        print(self.layout)

    async def button_clicked(self, e):
        self.data += 1
        #self.build_function()
        print("data = ", self.data)
        for i in self.layout.controls:
            i.value=f"Button clicked {self.data} time(s)"
            await i.update_async()
        #await self.update_async()

    def build(self):
        self.build_function()
        self.col=ft.Column(
            [
                ft.ElevatedButton(
                    "Button with 'click' event", on_click=self.button_clicked
                ),
                self.layout,
            ]
        )
        return self.col


async def main(page: ft.Page):
    await page.add_async(MyWidget())


ft.app(target=main)