【Flet经典实例代码解剖麻雀深入肌理剖析理解】待办事项任务清单实例示例代码逐行解释讲解和知识点归纳，源代码IDE运行和调试通过

[传奇开心果编程]

import flet as ft

class TodoApp(ft.UserControl):
    def build(self):
        self.new_task = ft.TextField(hint_text="Whats needs to be done?", expand=True)
        self.tasks = ft.Column()

        # application's root control (i.e. "view") containing all other controls
        return ft.Column(
            width=600,
            controls=[
                ft.Row(
                    controls=[
                        self.new_task,
                        ft.FloatingActionButton(icon=ft.icons.ADD, on_click=self.add_clicked),
                    ],
                ),
                self.tasks,
            ],
        )

    def add_clicked(self, e):
        self.tasks.controls.append(ft.Checkbox(label=self.new_task.value))
        self.new_task.value = ""
        self.update()


def main(page: ft.Page):
    page.title = "ToDo App"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.update()

    # create application instance
    todo = TodoApp()

    # add application's root control to the page
    page.add(todo)

ft.app(target=main)

一、代码的详细解读

这段Python代码使用了Flet库来创建一个简单的待办事项应用。以下是代码的详细解读：

导入模块：

python
import flet as ft

导入Flet库，并给它一个别名ft，这样可以简化后续代码中的引用。

定义TodoApp类：

class TodoApp(ft.UserControl):
    def build(self):

TodoApp继承自ft.UserControl，这是一个Flet提供的用户控件基类。通过覆盖build方法来定义UI组件。

初始化UI组件：

self.new_task = ft.TextField(hint_text="Whats needs to be done?", expand=True)
self.tasks = ft.Column()

self.new_task是一个文本输入框，用于输入新的待办事项。
self.tasks是一个垂直排列的容器，用来存放待办事项列表。
构建主界面布局：

return ft.Column(
    width=600,
    controls=[
        ft.Row(
            controls=[
                self.new_task,
                ft.FloatingActionButton(icon=ft.icons.ADD, on_click=self.add_clicked),
            ],
        ),
        self.tasks,
    ],
)

使用ft.Column和ft.Row来组织界面元素。主要包含了一个输入框和一个添加按钮，以及一个显示任务列表的区域。

处理添加事件：

def add_clicked(self, e):
    self.tasks.controls.append(ft.Checkbox(label=self.new_task.value))
    self.new_task.value = ""
    self.update()

当点击添加按钮时，会触发add_clicked方法。此方法将当前输入框的内容作为一个新的待办事项添加到任务列表中，并清空输入框。

定义主函数：

def main(page: ft.Page):

主函数设置页面标题，并实例化TodoApp类，将其添加到页面上。

启动应用程序：

ft.app(target=main)

最后一行代码启动Flet应用程序，并指定main作为入口函数。

总结来说，这段代码实现了一个基本的待办事项应用，用户可以在其中输入新的待办事项并将其添加到列表中。所有操作都是通过Flet框架提供的UI组件和事件处理机制来完成的。

二、归纳知识点

下面是上述示例代码的知识点归纳：

1. Flet库基础
   • Flet库：
   Flet是一个现代的、响应式的框架，用于用Python编写跨平台的桌面和移动应用。
   • UserControl类：
   ft.UserControl 是 Flet 提供的一个用户控件基类，可以用来创建可复用的 UI 组件。

2. 控件介绍
   • TextField：用于输入文本的控件。

   self.new_task = ft.TextField(hint_text="Whats needs to be done?", expand=True)  
   ◦ hint_text：提示文本。 
   ◦ expand=True：使文本框扩展以填充可用空间。   
   •  Column 和 Row：用于布局的容器。 
   python  
   self.tasks = ft.Column()  
   ◦ Column：垂直排列的容器。 
   ◦ Row：水平排列的容器。   
   •  FloatingActionButton：浮动的操作按钮。 
   python  
   ft.FloatingActionButton(icon=ft.icons.ADD, on_click=self.add_clicked) 
   

   ◦ icon：按钮图标。
   ◦ on_click：点击事件处理函数。
   • Checkbox：复选框。

   ft.Checkbox(label=self.new_task.value)  
   

   ◦ label：复选框的标签文本。

3. 事件处理
   • add_clicked 方法：处理添加按钮的点击事件。

   def add_clicked(self, e):
    self.tasks.controls.append(ft.Checkbox(label=self.new_task.value))
    self.new_task.value = ""
    self.update()  
   

   ◦ self.tasks.controls.append：向任务列表中添加一个新的复选框。
   ◦ self.new_task.value = ""：清空输入框。
   ◦ self.update()：更新UI。

4. 页面管理
   • main 函数：设置页面的基本属性并启动应用。

   def main(page: ft.Page):
    page.title = "ToDo App"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.update()
   
    todo = TodoApp()
    page.add(todo)  
   

   ◦ page.title：设置页面标题。
   ◦ page.horizontal_alignment：设置页面的水平对齐方式。
   ◦ page.update()：更新页面。 ◦ todo = TodoApp()：创建 TodoApp 实例。
   ◦ page.add(todo)：将 TodoApp 添加到页面上。

5. 启动应用
   • ft.app 函数：启动 Flet 应用。

   ft.app(target=main) 
   

   ◦ target：指定启动函数。

   总结

   这段代码展示了如何使用 Flet 框架创建一个简单的待办事项应用。通过定义 UserControl 类来封装 UI 组件，并使用各种控件（如 TextField、Column、Row、FloatingActionButton 和 Checkbox）来构建界面。事件处理函数 add_clicked 负责处理用户的交互，并通过 update 方法更新界面。最后，通过 main 函数启动整个应用。