使用flet创建todo应用

news2024/7/4 4:37:18

使用 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()

注意到Task的delete_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)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1366598.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

怎么批量在文件名前面加编号？

怎么批量在文件名前面加编号？

怎么批量在文件名前面加编号？我们时常需要给文件的名称进行编号，通过给文件名进行编号，可以使文件按照编号的顺序进行排序，方便进行查找和整理。特别是在处理大量文件时，编号可以提供一种有序的方式来组织文件&#xf…
阅读更多...
【redis】Redis中的字典类型：数据结构与使用方法

【redis】Redis中的字典类型：数据结构与使用方法

文章目录 Redis中的字典类型：数据结构与使用方法简介如何提高哈希表性能如何使用 Redis中的字典类型：数据结构与使用方法 简介 Redis中的字典类型的底层实现是哈希表（Hash Table）。 Redis的字典使用哈希表作为底层实现&#xf…
阅读更多...
软件测试|MySQL主键约束详解：保障数据完整性与性能优化

软件测试|MySQL主键约束详解：保障数据完整性与性能优化

简介 主键（PRIMARY KEY）的完整称呼是“主键约束”，是 MySQL 中使用最为频繁的约束。一般情况下，为了便于 DBMS 更快的查找到表中的记录，都会在表中设置一个主键。 MySQL是一种广泛使用的开源关系型数据库管理系统&am…
阅读更多...
海豚²来了丨DolphinDB 集成 DolphinScheduler，任务调度更轻松

海豚²来了丨DolphinDB 集成 DolphinScheduler，任务调度更轻松

DolphinDB 是一款高性能时序数据库。DolphinDB 集成了功能强大的编程语言和高容量高速度的批流一体数据分析系统，为海量数据（特别是时间序列数据）的快速存储、检索、计算及分析提供一站式解决方案。在实际生产环境中，经常存在数据…
阅读更多...
LeetCode刷题12:贪心算法解决1402.做菜顺序

LeetCode刷题12:贪心算法解决1402.做菜顺序

一个厨师收集了他 n 道菜的满意程度 satisfaction ，这个厨师做出每道菜的时间都是 1 单位时间。 一道菜的 「 like-time 系数 」定义为烹饪这道菜结束的时间（包含之前每道菜所花费的时间）乘以这道菜的满意程度，也就是 time[i]*sa…
阅读更多...
决策树--CART回归树算法详解

决策树--CART回归树算法详解

1、介绍 （1）简介 CART（Classification and Regression Trees）回归树是一种基于决策树的机器学习算法，用于预 测连续型目标变量而不是离散型类别变量。 （2）生成过程 ① 选择一个特征和相应的…
阅读更多...
安达发APS|PDM产品数据管理可以帮助企业实现的价值

安达发APS|PDM产品数据管理可以帮助企业实现的价值

在实际运用中，APS系统的PDM产品数据管理功能可以帮助企业实现以下价值： 1. 提高产品设计和制造的效率：通过对产品结构和文档的统一管理，可以实现对产品信息的快速查询和检索，提高产品设计和制造的效率。 2. 保证产品数…
阅读更多...
软件测试|测试平台开发-Flask入门：Flask动态路由

软件测试|测试平台开发-Flask入门：Flask动态路由

前言 之前我们介绍了flask发送http请求，以及flaskURL的详解，我们使用的路由都是固定的，一个路径和一个视图函数绑定，当访问这条路径时会触发相应的处理函数。但是当我们要处理更为复杂的情况时，比如我们有多个用户&am…
阅读更多...
PyTorch|保存与加载自己的模型

PyTorch|保存与加载自己的模型

训练好一个模型之后，我们往往要对其进行保存，除非下次用时想再次训练一遍。 下面以一个简单的回归任务来详细讲解模型的保存和加载。 来看这样一组数据： xtorch.linspace(-1,1,50)xx.view(50,1)yx.pow(2)0.3*torch.rand(50).view(50,1) 画…
阅读更多...
SpringBoot + Mybatis 实现多数据源原来如此简单

SpringBoot + Mybatis 实现多数据源原来如此简单

1、为什么需要整合多数据源 在开发的过程中，我们可能会遇到一个工程使用多个数据源的情况，总体而言分为以下几个原因 a、数据隔离：将不同的数据存储在不同的数据库中，如多租户场景 b、性能优化：将数据分散到多个数据库…
阅读更多...
【项目实战】Cadence工具的使用2

【项目实战】Cadence工具的使用2

代码覆盖率的收集 双击total，打开imc工具。total 下的文件是代码覆盖率文件 找到DUT模块！从图中可以看到代码的覆盖率已经是94.43% 添加exclude文件，注意和Synopsys的后缀不同。 导入.vRefine文件 代码覆盖率为100%。 原因是我们添加了exclu…
阅读更多...
大学生如何当一个程序员——第三篇：热门专业学习之路5

大学生如何当一个程序员——第三篇：热门专业学习之路5

第三篇：热门专业学习之路5 1.WEB前端快速入门2.JavaScript基础与深入解析3.jQuery应用与项目开发4.PHP、数据库编程与设计5. Http服务于Ajax编程6. 做一个阶段项目7. H5新特性与移动端开发8.高级框架9.微信小程序 各位小伙伴想要博客相关资料的话关注公众号&#xf…
阅读更多...
LabVIEW在设备状态监测与故障诊断中的应用

LabVIEW在设备状态监测与故障诊断中的应用

在现代工业自动化领域，LabVIEW的系统设计平台在设备状态监测与故障诊断中扮演着举足轻重的角色。通过提供一个可视化和数据流编程语言，LabVIEW大大提升了设备安全监测的效率，减少了系统维护成本，同时增强了设备的可靠性和可维护性…
阅读更多...
office only read

office only read

阅读更多...
QT上位机开发（日志调试）

QT上位机开发（日志调试）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing 163.com】 程序开发中有很多的调试方法，比如说IDE调试，也就是设置断点、查看变量等等；比如说日志调试；比如说c…
阅读更多...
OCP NVME SSD规范解读-5.命令超时限制-2

OCP NVME SSD规范解读-5.命令超时限制-2

Sanitize清除的数据很彻底，对FTL映射表、User Data(包括已经写入NAND和仍在cache里的)、Meta Data、安全密匙、CMB中SQ/CQ相关信息、可能含有用户数据的log等等会全部清除。不过，sanitize操作不会改变RPMB、boot分区、不包含用户数据的cache等内容。 RP…
阅读更多...
2.4 DEVICE GLOBAL MEMORY AND DATA TRANSFER

2.4 DEVICE GLOBAL MEMORY AND DATA TRANSFER

在当前的CUDA系统中，设备通常是带有自己的动态随机存取存储器（DRAM）的硬件卡。例如，NVIDIA GTX1080具有高达8 GB的DRAM，称为全局内存。我们将互换使用全局内存和设备内存这两个术语。为了在设备上执行内核，…
阅读更多...
CSS 圆形分割按钮动画 带背景、图片

CSS 圆形分割按钮动画 带背景、图片

<template><view class="main"><view class="up"> <!-- 主要部分上 --><button class="card1"><image class="imgA" src="../../static/A.png"></image></button><butt…
阅读更多...
数据库系统-甘晴void学习笔记

数据库系统-甘晴void学习笔记

数据库系统笔记 计科210X 甘晴void 202108010XXX 教材&#xff1a;《数据库系统概论》第6版 &#xff08;图片来源于网络&#xff0c;侵删&#xff09; 文章目录 数据库系统<br>笔记第一篇 基础篇1 绪论1.1数据库系统概述1.2数据模型1.3数据库系统的结构(三级模式结构…
阅读更多...
【优选算法】专题三:二分查找 --- 34. 在排序数组中查找元素的第一个和最后一个位置

【优选算法】专题三:二分查找 --- 34. 在排序数组中查找元素的第一个和最后一个位置

从今天开始,xxxflower 带着小伙伴们一起学习算法 ~ 今天我们要写的题目是: 34. 在排序数组中查找元素的第一个和最后一个位置 以下是题目的详细解析: class Solution {public int[] searchRange(int[] nums, int target) {// 判断数组为空的情况下返回-1,-1int[] ret new in…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023