Flet 控件

用户界面由 控件 (也称为小部件) 组成。要使控件对用户可见，必须将其添加到 Page 或其他控件中。Page 是最顶层的控件。将控件嵌套在一起可以表示为一棵树，以 Page 为根。

控件只是普通的 Python 类。使用带参数的构造函数创建控件实例，例如：

t = ft.Text(value="Hello, world!", color="green")

要在页面上显示控件，请将其添加到 Page 的 controls 列表中，并调用 page.update() 以将页面更改发送到浏览器或桌面客户端：

import flet as ft

def main(page: ft.Page):
    t = ft.Text(value="Hello, world!", color="green")
    page.controls.append(t)
    page.update()

ft.app(target=main)

备注

在以下示例中，我们将只显示 main 函数的内容。

可以修改控件的属性，并在下一次 page.update() 时更新 UI：

t = ft.Text()
page.add(t) # 是 page.controls.append(t) 和 page.update() 的快捷方式

for i in range(10):
    t.value = f"Step {i}"
    page.update()
    time.sleep(1)

一些控件是“容器”控件（如 Page），可以包含其他控件。例如，Row 控件允许将其他控件排列在一行中：

page.add(
    ft.Row(controls=[
        ft.Text("A"),
        ft.Text("B"),
        ft.Text("C")
    ])
)

或将 TextField 和 ElevatedButton 并排排列：

page.add(
    ft.Row(controls=[
        ft.TextField(label="Your name"),
        ft.ElevatedButton(text="Say my name!")
    ])
)

page.update() 足够智能，可以仅发送自上次调用以来所做的更改，因此您可以将一些新控件添加到页面中，删除一些控件，修改其他控件的属性，然后调用 page.update() 以执行批量更新，例如：

for i in range(10):
    page.controls.append(ft.Text(f"Line {i}"))
    if i > 4:
        page.controls.pop(0)
    page.update()
    time.sleep(0.3)

一些控件，如按钮，可以具有事件处理程序，以响应用户输入，例如 ElevatedButton.on_click：

def button_clicked(e):
    page.add(ft.Text("Clicked!"))

page.add(ft.ElevatedButton(text="Click me", on_click=button_clicked))

还有一个简单的 To-Do 示例：

import flet as ft

def main(page):
    def add_clicked(e):
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        new_task.focus()
        new_task.update()

    new_task = ft.TextField(hint_text="What's needs to be done?", width=300)
    page.add(ft.Row([new_task, ft.ElevatedButton("Add", on_click=add_clicked)]))

ft.app(target=main)

信息

Flet 实现了 imperative UI 模型，其中您手动构建应用程序 UI 使用有状态控件，然后通过更新控件属性来 mutate 它。Flutter 实现了 declarative 模型，其中 UI 会根据应用程序数据的变化自动重新构建。 在现代前端应用程序中，管理应用程序状态是一个复杂的任务，Flet 的“老式”方法可能对没有前端经验的程序员更具吸引力。

visible 属性

每个控件都有一个 visible 属性，该属性默认为 true，表示控件将被渲染到页面上。将 visible 设置为 false 将完全防止控件（及其所有子控件）被渲染到页面画布上。隐藏的控件不能被聚焦或使用键盘或鼠标选择，并且它们不会发出任何事件。

disabled 属性

每个控件都有一个 disabled 属性，该属性默认为 false，表示控件和所有子控件都是启用的。 disabled 属性主要用于数据输入控件，如 TextField、Dropdown、Checkbox、按钮。 然而，disabled 也可以设置为父控件，并将其值传播到所有子控件中。

例如，如果您有一个表单，其中包含多个输入控件，可以单独设置每个控件的 disabled 属性：

first_name = ft.TextField()
last_name = ft.TextField()
first_name.disabled = True
last_name.disabled = True
page.add(first_name, last_name)

或您可以将表单控件放入容器中，例如 Column，然后设置 disabled 属性为该列：

first_name = ft.TextField()
last_name = ft.TextField()
c = ft.Column(controls=[
    first_name,
    last_name
])
c.disabled = True
page.add(c)

按钮

Button 是最基本的输入控件，它生成 click 事件当按下时：

btn = ft.ElevatedButton("Click me!")
page.add(btn)

所有事件都由控件生成并发送回您的脚本，因此如何响应按钮点击？

事件处理程序

按钮事件在“Counter”应用程序中的示例：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 计数器示例"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align="right", width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(target=main)

文本框

Flet 提供了多种控件来构建表单：TextField、Checkbox、Dropdown、ElevatedButton。

让我们询问用户的姓名：

import flet as ft

def main(page):
    def btn_click(e):
        if not txt_name.value:
            txt_name.error_text = "Please enter your name"
            page.update()
        else:
            name = txt_name.value
            page.clean()
            page.add(ft.Text(f"Hello, {name}!"))

    txt_name = ft.TextField(label="Your name")

    page.add(txt_name, ft.ElevatedButton("Say hello!", on_click=btn_click))

ft.app(target=main)

复选框

Checkbox 控件提供了多种属性和事件发射器，以便使用。

让我们创建一个 ToDo 项：

import flet as ft


def main(page):
    def checkbox_changed(e):
        output_text.value = (
            f"You have learned how to ski :  {todo_check.value}."
        )
        page.update()

    output_text = ft.Text()
    todo_check = ft.Checkbox(label="ToDo: Learn how to use ski", value=False, on_change=checkbox_changed)
    page.add(todo_check, output_text)

ft.app(target=main)

下拉菜单

import flet as ft


def main(page: ft.Page):
    def button_clicked(e):
        output_text.value = f"Dropdown value is:  {color_dropdown.value}"
        page.update()

    output_text = ft.Text()
    submit_btn = ft.ElevatedButton(text="Submit", on_click=button_clicked)
    color_dropdown = ft.Dropdown(
        width=100,
        options=[
            ft.dropdown.Option("Red"),
            ft.dropdown.Option("Green"),
            ft.dropdown.Option("Blue"),
        ],
    )
    page.add(color_dropdown, submit_btn, output_text)

ft.app(target=main)