控件引用
· 阅读需 3 分钟
Flet 控件是对象,要访问它们的属性,我们需要保留对这些对象的引用(变量)。
请看下面的示例:
import flet as ft
def main(page):
first_name = ft.TextField(label="First name", autofocus=True)
last_name = ft.TextField(label="Last name")
greetings = ft.Column()
def btn_click(e):
greetings.controls.append(ft.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,
ft.ElevatedButton("Say hello!", on_click=btn_click),
greetings,
)
ft.app(target=main)
在 main()
方法的一开始,我们创建了三个控件,这些控件将在按钮的 on_click
处理程序中使用:两个用于输入名字和姓氏的 TextField
,以及一个用于显示问候信息的 Column
。我们创建控件并设置其所有属性,在 main()
方法的最后,通过 page.add()
调用,我们使用它们的引用(变量)。
当添加越来越多的控件和事件处理程序时,将所有控件定义放在一个地方变得具有挑战性,因此它们会散布在 main()
的主体中。浏览 page.add()
的参数时,很难想象(不用不断跳转到 IDE 中的变量定义)最终的表单会是什么样子:
page.add(
first_name,
last_name,
ft.ElevatedButton("Say hello!", on_click=btn_click),
greetings,
)
first_name
是一个 TextField
吗?它是否设置了自动聚焦(autofocus)?greetings
是 Row
还是 Column
?
Ref
类
Flet 提供了 Ref
实用程序类,它允许定义对控件的引用,在事件处理程序中使用该引用,并在构建树时将引用设置为实际控件。这个想法来自于 React。
要定义一个新的类型控件引用:
first_name = ft.Ref[ft.TextField]()
要访问引用的控件(控件解引用),请使用 Ref.current
属性:
# 清空名字
first_name.current.value = ""
要将控件分配给引用,请将 Control.ref
属性设置为引用:
page.add(
ft.TextField(ref=first_name, label="First name", autofocus=True)
)
备注
所有 Flet 控件都有 ref
属性。
我们可以重写程序以使用引用:
import flet as ft
def main(page):
first_name = ft.Ref[ft.TextField]()
last_name = ft.Ref[ft.TextField]()
greetings = ft.Ref[ft.Column]()
def btn_click(e):
greetings.current.controls.append(
ft.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(
ft.TextField(ref=first_name, label="First name", autofocus=True),
ft.TextField(ref=last_name, label="Last name"),
ft.ElevatedButton("Say hello!", on_click=btn_click),
ft.Column(ref=greetings),
)
ft.app(target=main)
现在我们可以在 page.add()
中清楚地看到页面的结构以及它包含的所有控件。
是的,逻辑变得有点冗长,因为需要添加 .current.
来访问引用的控件,但这只是个人喜好的问题 :)