控制参考

Flet 控件是对象，要访问它们的属性，我们需要保留对这些对象的引用（变量）。

考虑以下示例：

import flet
from flet import Column, ElevatedButton, Text, TextField

def main(page):

    first_name = TextField(label="First name", autofocus=True)
    last_name = TextField(label="Last name")
    greetings = Column()

    def btn_click(e):
        greetings.controls.append(Text(f"Hello, {first_name.value} {last_name.value}!"))
        first_name.value = ""
        last_name.value = ""
        page.update()
        first_name.focus()

    page.add(
        first_name,
        last_name,
        ElevatedButton("Say hello!", on_click=btn_click),
        greetings,
    )

flet.app(target=main)

在main()方法的最开始，我们创建了三个控件，我们将在按钮的on_click处理程序中使用它们：两个TextField用于名字和姓氏，一个Column- 用于问候消息的容器。我们创建具有所有属性集的控件，并且在main()方法结束时，在page.add()调用中，我们使用它们的引用（变量）。

当添加更多和模式控件和事件处理程序时，将所有控件定义保存在一个地方变得具有挑战性，因此它们分散在main()正文中。看一眼page.add()参数很难想象（没有不断跳转到 IDE 中的变量定义）最终形式会是什么样子：

    page.add(
        first_name,
        last_name,
        ElevatedButton("Say hello!", on_click=btn_click),
        greetings,
    )

是first_nameTextField，是否设置了自动对焦？问候是 aRow还是 a Column？

Ref

Flet 提供了Ref实用程序类，它允许定义对控件的引用，在事件处理程序中使用该引用，并稍后在构建树时设置对真实控件的引用。这个想法来自React。

要定义新的类型化控件引用：

first_name = Ref[TextField]()

要访问引用的控件（控件取消引用），请使用Ref.current属性：

# empty first name
first_name.current.value = ""

注意 所有 Flet 控件都有ref属性。

我们可以重写我们的程序来使用引用：

import flet
from flet import Column, ElevatedButton, Text, TextField
from flet.ref import Ref

def main(page):

    first_name = Ref[TextField]()
    last_name = Ref[TextField]()
    greetings = Ref[Column]()

    def btn_click(e):
        greetings.current.controls.append(
            Text(f"Hello, {first_name.current.value} {last_name.current.value}!")
        )
        first_name.current.value = ""
        last_name.current.value = ""
        page.update()
        first_name.current.focus()

    page.add(
        TextField(ref=first_name, label="First name", autofocus=True),
        TextField(ref=last_name, label="Last name"),
        ElevatedButton("Say hello!", on_click=btn_click),
        Column(ref=greetings),
    )

flet.app(target=main)

现在我们可以清楚地看到page.add()页面的结构和它所构建的所有控件。

是的，逻辑变得有点冗长，因为您需要添加.current.访问ref的控件，但这是个人喜好问题:)