使用flet创建todo应用

简介: 使用flet创建todo应用

使用 Flet 在 Python 中创建待办事项应用 Create To-Do app in Python with Flet

翻译官网教程https://flet.dev/docs/tutorials/python-todo,对一些地方进行了注释和修改。

安装flet

Python版本需要3.8及以上,使用pip安装:

pip install flet

创建hello.py,写入:

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text(value="Hello, world!"))

ft.app(target=main)


运行该程序

python hello.py

看到一个写着Hello, world!的窗口:

添加页面控件(controls)和处理事件

在页面上添加:

  • 用来输入任务的文本框(TextField)
  • 用于添加任务的按钮(FloatingActionButton)
import flet as ft

def main(page: ft.Page):
  # 文本框,用来输入任务
    new_task = ft.TextField(hint_text="Whats needs to be done?")

    def add_clicked(e):
        # 添加复选框, 刷新页面
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        page.update()
        
    # 添加任务的按钮
    create_task_btn = ft.FloatingActionButton(
        icon=ft.icons.ADD,
        on_click=add_clicked # 绑定方法add_clicked
    )
    page.add(
        new_task,
        create_task_btn,
             )

ft.app(target=main)

页面布局

我们希望调整页面布局,让任务文本框和添加按钮 在一行,

让创建出来的任务框在 下面。

使用Row按行放置其中的控件, Column按列放置其中的控件。

Row可以看成是一个容器,水平放置其中的组件。Row本身也是一个控件,因此可以嵌套使用。Column同理,用来竖直放置其中控件。

row_1 = ft.Row(
  width=600,
  controls=[new_task,create_task_btn]
)

...
# Row可以嵌套。
view = ft.Column(
        width=600,
        controls=[row_1, tasks_view]
    )

完整代码:

import flet as ft

def main(page: ft.Page):
  # 文本框,用来输入任务
    new_task = ft.TextField(hint_text="Whats needs to be done?")
    # 保存复选框
    tasks_view = ft.Column()

    def add_clicked(e):
        # 添加复选框, 刷新页面
        tasks_view.controls.append(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        view.update()
        
    # 添加任务的按钮
    create_task_btn = ft.FloatingActionButton(
        icon=ft.icons.ADD,
        on_click=add_clicked # 绑定方法add_clicked
    )
    #  水平放置文本框和添加按钮
    row_1 = ft.Row(
        width=600,
        controls=[new_task,create_task_btn]
    )

    # 整个应用
    view = ft.Column(
        width=600,
        controls=[row_1, tasks_view]
    )
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.add(view)


ft.app(target=main)

运行结果:

可重用的 UI 组件

为了制作一个可重用的 ToDo 应用组件,我们将将其状态和表示逻辑封装在一个单独的类中:

import flet as ft

class TodoApp(ft.UserControl):
    def build(self):
        # 文本框,用来输入任务
        self.new_task = ft.TextField(hint_text="Whats needs to be done?")
        # 任务
        self.tasks = ft.Column()
        # 添加任务的按钮
        create_task_btn = ft.FloatingActionButton(
            icon=ft.icons.ADD,
            on_click=self.add_clicked # 绑定方法add_clicked
        )    
        # 整个应用
        self.view = ft.Column(
            width=600,
            controls=[
                ft.Row(
                    width=600,
                    controls=[self.new_task,create_task_btn]),
                self.tasks]
        )
        return self.view
    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()

    todo = TodoApp()

    page.add(todo)

ft.app(target=main)

用户控件 ( UserControl ) 允许通过组合现有的 Flet 控件来构建独立的可重用组件。UserControl 必须实现 build() 方法生成控件的 UI ,并且应返回单个 Control 实例或 List 控件。

查看、编辑和删除列表项

在任务名称旁边添加“编辑”和“删除"按钮。

任务的组成变得复杂起来了,我们创建一个Task类来表示任务。

Task有两种模式,显示视图(display_view)和编辑视图(edit_view),通常情况下,我们看到的是显示视图,当点击编辑按钮时才会切换到编辑视图。可见性是通过设置它们的.visible属性实现的。

class Task(ft.UserControl):
    def __init__(self, task_name,task_delete):
        super().__init__()
        self.task_name = task_name
        self.task_delete = task_delete
        
    def delete_clicked(self, e):
        self.task_delete(self)

    def build(self):
        self.display_task = ft.Checkbox(value=False, label=self.task_name)
        self.edit_name = ft.TextField(expand=1)

        self.display_view = ft.Row(
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                self.display_task,
                ft.Row(
                    spacing=0,
                    controls=[
                        ft.IconButton(
                            icon=ft.icons.CREATE_OUTLINED,
                            tooltip="Edit To-Do",
                            on_click=self.edit_clicked,
                        ),
                        ft.IconButton(
                            ft.icons.DELETE_OUTLINE,
                            tooltip="Delete To-Do",
                            on_click=self.delete_clicked,
                        ),
                    ],
                ),
            ],
        )

        self.edit_view = ft.Row(
            visible=False,
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                self.edit_name,
                ft.IconButton(
                    icon=ft.icons.DONE_OUTLINE_OUTLINED,
                    icon_color=ft.colors.GREEN,
                    tooltip="Update To-Do",
                    on_click=self.save_clicked,
                ),
            ],
        )
        return ft.Column(controls=[self.display_view, self.edit_view])

    def edit_clicked(self, e):
        self.edit_name.value = self.display_task.label
        self.display_view.visible = False
        self.edit_view.visible = True
        self.update()

    def save_clicked(self, e):
        self.display_task.label = self.edit_name.value
        self.display_view.visible = True
        self.edit_view.visible = False
        self.update()

然后在TodoAPP中使用Task替代之前的简单复选框:

class TodoApp(ft.UserControl):
    def build(self):
        # 文本框,用来输入任务
        self.new_task = ft.TextField(hint_text="Whats needs to be done?")
        # 任务
        self.tasks = ft.Column()
        # ...

    def add_clicked(self, e):
      # 添加任务, 刷新页面
        task = Task(self.new_task.value, self.task_delete) # 注意self.task_delete是TodoAPP的方法,作为参数传递给Task 
        self.tasks.controls.append(task)
        self.new_task.value = ""
        self.update()
    def task_delete(self, task):
        self.tasks.controls.remove(task)
        self.update()

注意到Taskdelete_clicked 调用了self.task_delete,而task_delete是在TodoAPP.add_clicked 中作为初始化参数传递给Task的。

筛选列表项

我们希望能够按任务状态筛选任务。

我们使用Tabs控件来显示多个选项卡,用不同的选项卡来显示不同状态的任务。


# ...

class TodoApp(ft.UserControl):
    def __init__(self):
        self.tasks = []
        self.new_task = ft.TextField(hint_text="Whats needs to be done?", expand=True)
        self.tasks = ft.Column()
    # 3个选项卡,作为过滤器
        self.filter = ft.Tabs(
            selected_index=0,
            on_change=self.tabs_changed,
            tabs=[ft.Tab(text="all"), ft.Tab(text="active"), ft.Tab(text="completed")],
        )

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

我们可以维护三个页面,分别显示“全部”、“活动”和“已完成”任务。但我们可以用更简单的方式,只维护一个页面,根据选择的选项卡更改任务的可见性。

def update(self):
  status = self.filter.tabs[self.filter.selected_index].text
  for task in self.tasks.controls:
    task.visible = (
      status == "all"
      or (status == "active" and task.completed == False)
      or (status == "completed" and task.completed)
    )
  super().update()

当我们单击选项卡或更改任务状态时,应该进行过滤。

class TodoApp(ft.UserControl):

    # ...

    def tabs_changed(self, e):
        self.update()

class Task(ft.UserControl):
    def __init__(self, task_name, task_status_change, task_delete):
        super().__init__()
        self.completed = False # 任务是否完成
        self.task_name = task_name
        self.task_status_change = task_status_change
        self.task_delete = task_delete

    def build(self):
      # 改变任务状态
        self.display_task = ft.Checkbox(
            value=False, label=self.task_name, on_change=self.status_changed
        )
        # ...

    def status_changed(self, e):
        self.completed = self.display_task.value
        self.task_status_change(self)

最后的润色

最后,我们将添加一个页脚,显示未完成任务的数量,以及一个“清除已完成”按钮。

class TodoApp():
    def __init__(self):
        # ...

        self.items_left = ft.Text("0 items left")

        self.view = ft.Column(
            width=600,
            controls=[
                ft.Row([ ft.Text(value="Todos", style="headlineMedium")], alignment=ft.MainAxisAlignment.CENTER),
                ft.Row(
                    controls=[
                        self.new_task,
                        ft.FloatingActionButton(icon=ft.icons.ADD, on_click=self.add_clicked),
                    ],
                ),
                ft.Column(
                    spacing=25,
                    controls=[
                        self.filter,
                        self.tasks,
                        ft.Row(
                            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                            vertical_alignment=ft.CrossAxisAlignment.CENTER,
                            controls=[
                                self.items_left,
                                ft.OutlinedButton(
                                    text="Clear completed", on_click=self.clear_clicked
                                ),
                            ],
                        ),
                    ],
                ),
            ],
        )

    # ...

    def clear_clicked(self, e): 
      # 注意这里 [:] 用的是一个copy来遍历,因为下面可能会进行删除操作
        for task in self.tasks.controls[:]:
            if task.completed:
                self.task_delete(task)

    def update(self):
        status = self.filter.tabs[self.filter.selected_index].text
        count = 0
        for task in self.tasks.controls:
            task.visible = (
                status == "all"
                or (status == "active" and task.completed == False)
                or (status == "completed" and task.completed)
            )
            if not task.completed:
                count += 1
        self.items_left.value = f"{count} active item(s) left"
        super().update()

完整代码:

import flet as ft

# 任务, 可以 完成、编辑、删除
class Task(ft.UserControl):
    def __init__(self, task_name,task_status_change,task_delete):
        super().__init__()
        self.completed = False
        self.task_name = task_name
        self.task_status_change = task_status_change
        self.task_delete = task_delete 

    def build(self):
        self.display_task = ft.Checkbox(value=False, 
                                        label=self.task_name,
                                        on_change=self.status_changed)
        self.edit_name = ft.TextField(expand=1)
        # 显示 
        self.display_view = ft.Row(
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                self.display_task,
                ft.Row(
                    spacing=0,
                    controls=[
                        ft.IconButton(
                            icon=ft.icons.CREATE_OUTLINED,
                            tooltip="Edit To-Do",
                            on_click=self.edit_clicked,
                        ),
                        ft.IconButton(
                            ft.icons.DELETE_OUTLINE,
                            tooltip="Delete To-Do",
                            on_click=self.delete_clicked,
                        ),
                    ],
                ),
            ],
        )

        # 编辑
        self.edit_view = ft.Row(
            visible=False,
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                self.edit_name,
                ft.IconButton(
                    icon=ft.icons.DONE_OUTLINE_OUTLINED,
                    icon_color=ft.colors.GREEN,
                    tooltip="Update To-Do",
                    on_click=self.save_clicked,
                ),
            ],
        )
        return ft.Column(controls=[self.display_view, self.edit_view])
    
    def delete_clicked(self, e):
        self.task_delete(self)

    def edit_clicked(self, e):
        self.edit_name.value = self.display_task.label
        self.display_view.visible = False
        self.edit_view.visible = True
        self.update()

    def save_clicked(self, e):
        self.display_task.label = self.edit_name.value
        self.display_view.visible = True
        self.edit_view.visible = False
        self.update()

    def status_changed(self, e):
        self.completed = self.display_task.value
        self.task_status_change(self)


# 完整的todo界面。
class TodoApp(ft.UserControl):
    def build(self):
        # 文本框,用来输入任务
        self.new_task = ft.TextField(hint_text="Whats needs to be done?")
        # 任务
        self.tasks = ft.Column()
        # 过滤器。通过切换选项卡过滤不同状态的任务
        self.filter = ft.Tabs(
            selected_index=0,
            on_change=self.tabs_changed,
            tabs=[ft.Tab(text="all"), ft.Tab(text="active"), ft.Tab(text="completed")],
        )

        # 添加任务的按钮
        create_task_btn = ft.FloatingActionButton(
            icon=ft.icons.ADD,
            on_click=self.add_clicked # 绑定方法add_clicked
        )
        #  页脚,显示剩余任务
        self.items_left = ft.Text("0 items left")

        # 整个应用
        self.view = ft.Column(
            width=600,
            controls=[
                 ft.Row([ ft.Text(value="Todos", style="headlineMedium")], 
                        alignment=ft.MainAxisAlignment.CENTER),
                 ft.Row(
                    controls=[
                        self.new_task,
                        create_task_btn]
                    ),
                 ft.Column(
                    spacing=25,
                    controls=[
                        self.filter,
                        self.tasks,
                        ft.Row(
                            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                            vertical_alignment=ft.CrossAxisAlignment.CENTER,
                            controls=[
                                self.items_left,
                                ft.OutlinedButton(
                                    text="Clear completed", on_click=self.clear_clicked
                                ),
                            ],
                        ),
                    ],
                ),
                ],
                    
            
        )
        return self.view
    def add_clicked(self,e):
        # 添加任务, 刷新页面
        task = Task(self.new_task.value, self.task_status_change, self.task_delete)
        self.tasks.controls.append(task)
        self.new_task.value = ""
        self.update()

    def tabs_changed(self, e):
        self.update()

    def task_delete(self, task):
        self.tasks.controls.remove(task)
        self.update()
    
    def task_status_change(self, task):
        self.update()

    def clear_clicked(self, e):
        for task in self.tasks.controls[:]:
            if task.completed:
                self.task_delete(task)

    def update(self):
        status = self.filter.tabs[self.filter.selected_index].text
        count = 0
        for task in self.tasks.controls:
            task.visible = (
                status == "all"
                or (status == "active" and task.completed == False)
                or (status == "completed" and task.completed)
            )
            if not task.completed:
                count += 1
        self.items_left.value = f"{count} active item(s) left"
        super().update()

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

    todo = TodoApp()

    page.add(todo)

ft.app(target=main)

相关文章
|
2月前
|
搜索推荐 Java
TODO有什么妙用
`TODO` 是Java开发中用于标记未完成功能或待修复问题的注解,能帮助追踪和管理开发任务。在代码中添加 `// TODO` 标记,如 `// TODO do something`,之后可通过搜索快速定位。IDEA还支持自定义`TODO`类型和颜色,以及全局查看和过滤器功能。阿里巴巴开发手册建议使用 `TODO` 表示待实现功能,`FIXME` 标记错误代码。推荐创建个性化代码模板以提高效率。
|
2月前
|
缓存
使用Riverpod在Flutter中创建Todo列表
学习如何使用Riverpod在Flutter中构建一个功能完整的Todo列表应用。通过Consumer组件、ConsumerStatefulWidget类、ref.read方法和provider build重写,了解Riverpod的状态管理和更新状态机制。
303 7
使用Riverpod在Flutter中创建Todo列表
|
JavaScript 前端开发 Linux
实现一个简单的 node 应用之 todo list1
实现一个简单的 node 应用之 todo list1
92 0
|
JavaScript 测试技术 数据安全/隐私保护
实现一个简单的 node 应用之 todo list2
实现一个简单的 node 应用之 todo list2
65 0
|
IDE Java 开发工具
Java中的//TODO、//FIXME、//XXX 注释
本文以Eclipse为参考,介绍Java中的//TODO、//FIXME、//XXX 注释的含义。
537 0
Java中的//TODO、//FIXME、//XXX 注释
|
数据库 Python
AssertionError: Model app can‘t have more than one auto-generated field.
AssertionError: Model app can‘t have more than one auto-generated field.
328 0
AssertionError: Model app can‘t have more than one auto-generated field.
|
Java Android开发
Todo List
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/voidreturn/article/details/78702613 fragment里面如何处理back按键事件。
1003 0
|
存储 搜索推荐 NoSQL
TIPC协议(todo)
http://blog.chinaunix.net/uid-24020646-id-3317615.html http://tipc.sourceforge.net/tipc_linux.shtml
1337 0