获取用户输入 Getting user input

使用 Flet 制作交互式 Web 应用非常简单！它不仅限于显示数据，还可以从用户那里请求输入，并响应页面控件生成的各种事件。

按钮

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

btn = ft.ElevatedButton("点击我！")
page.add(btn)

页面上的所有控件生成的事件都会持续返回到您的脚本中，那么如何响应按钮的点击？

事件处理程序

带有事件的按钮在 "Counter" 应用程序中：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    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 = "请输入您的姓名"
            page.update()
        else:
            name = txt_name.value
            page.clean()
            page.add(ft.Text(f"你好，{name}！"))

    txt_name = ft.TextField(label="您的姓名")

    page.add(txt_name, ft.ElevatedButton("打招呼！", 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"您已经学会滑雪了：{todo_check.value}."
        )
        page.update()

    output_text = ft.Text()
    todo_check = ft.Checkbox(label="ToDo: 学会使用滑雪", 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"下拉框的值是：{color_dropdown.value}"
        page.update()

    output_text = ft.Text()
    submit_btn = ft.ElevatedButton(text="提交", on_click=button_clicked)
    color_dropdown = ft.Dropdown(
        width=100,
        options=[
            ft.dropdown.Option("红色"),
            ft.dropdown.Option("绿色"),
            ft.dropdown.Option("蓝色"),
        ],
    )
    page.add(color_dropdown, submit_btn, output_text)

ft.app(target=main)