使用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 ftdef 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 ftdef 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 ftdef 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.CENTERpage.add(view)ft.app(target=main)

运行结果：
在这里插入图片描述

可重用的 UI 组件

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

import flet as ftclass 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.viewdef 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.CENTERpage.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_nameself.task_delete = task_deletedef 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.labelself.display_view.visible = Falseself.edit_view.visible = Trueself.update()def save_clicked(self, e):self.display_task.label = self.edit_name.valueself.display_view.visible = Trueself.edit_view.visible = Falseself.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].textfor 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_nameself.task_status_change = task_status_changeself.task_delete = task_deletedef 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.valueself.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].textcount = 0for 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 += 1self.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 = Falseself.task_name = task_nameself.task_status_change = task_status_changeself.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.labelself.display_view.visible = Falseself.edit_view.visible = Trueself.update()def save_clicked(self, e):self.display_task.label = self.edit_name.valueself.display_view.visible = Trueself.edit_view.visible = Falseself.update()def status_changed(self, e):self.completed = self.display_task.valueself.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.viewdef 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].textcount = 0for 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 += 1self.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.CENTERpage.update()todo = TodoApp()page.add(todo)ft.app(target=main)

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

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

相关文章

test fuzz-01-模糊测试（Fuzz Testing）入门 Atheris、Jazzer、jqf、kelinci、FLA、libfuzzer 对比

test fuzz-01-模糊测试（Fuzz Testing）入门 Atheris、Jazzer、jqf、kelinci、FLA、libfuzzer 对比

拓展阅读 开源 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息) 开源 Junit performance rely on junit5 and jdk8.(java 性能测试框架。性能测试。压测。测试报告生成。) test fuzz-01-模糊测试（Fuzz Testing） test fuzz-…
阅读更多...
代码随想录算法训练营day6|242.有效的字母异位词、349.两个数组的交集、202.快乐数

代码随想录算法训练营day6|242.有效的字母异位词、349.两个数组的交集、202.快乐数

哈希表理论基础 建议：大家要了解哈希表的内部实现原理，哈希函数，哈希碰撞，以及常见哈希表的区别，数组，set 和map。 什么时候想到用哈希法，当我们遇到了要快速判断一个元素是否出现集合里的时…
阅读更多...
Unity Urp 渲染管线 创建透明材质球

Unity Urp 渲染管线 创建透明材质球

按照以上方式设置后就可以得到一个透明的材质球 Tips：Blending mode ： alpha 和 Blending mode ： additive都是完全透明效果具体差异暂时不知道
阅读更多...
模型创建与nn.Module

模型创建与nn.Module

一、网络模型创建步骤 二、nn.Module 下面描述了在 PyTorch 中常见的一些属性和功能，用于存储和管理神经网络模型的参数、模块、缓冲属性和钩子函数。 parameters：用于存储和管理 nn.Parameter 类的属性。nn.Parameter 是一种特殊的张量，它被…
阅读更多...
在做题中学习（44）：无重复字符的最长字串

在做题中学习（44）：无重复字符的最长字串

3. 无重复字符的最长子串 - 力扣（LeetCode） 解法：同向双指针————“滑动窗口” 思路：如下图，当right进窗口后，就出现了a重复，所以在left出窗口时时，需要跳到第一个a 后面的位置&…
阅读更多...
【QML COOK】- 004-添加动画

【QML COOK】- 004-添加动画

1. 编辑main.qml import QtQuickWindow {width: 800height: 800visible: truetitle: qsTr("Hello World")Image {id: backgroudanchors.fill: parentsource: "qrc:/Resources/Images/arrow.png"Behavior on rotation {NumberAnimation {duration: 1000}}}…
阅读更多...
Master01节点免密钥登录其他节点

Master01节点免密钥登录其他节点

1、执行命令 ssh-keygen -t rsa，一直敲回车 2、for i in k8s-master01 k8s-node01 k8s-node02;do ssh-copy-id -i .ssh/id_rsa.pub $i;done 输入yes和对应节点密码
阅读更多...
【CSS】首个字符占用多行，并自定义样式

【CSS】首个字符占用多行，并自定义样式

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>首字母大写</title><style&…
阅读更多...
【QT】计算器-模拟实现

【QT】计算器-模拟实现

目录 准本工作 槽函数实现 数字按键槽函数 退格槽函数 运算符 按键 槽函数 等号槽函数 初始化及计算器页面布局 整体代码 widget.h widget.cpp 准本工作 工程创建&#xff1a; 计算器模拟实现需求分析&#xff1a; 样式预览&#xff1a; &#x1f3a0;主要功能&…
阅读更多...
uni-app如何生成骨架屏

uni-app如何生成骨架屏

骨架屏是页面的一个空白版本&#xff0c;通常会在页面完全渲染之前&#xff0c;通过一些灰色的区块大致勾勒出轮廓&#xff0c;待数据加载完成后&#xff0c;再替换成真实的内容。 参考效果 骨架屏作用是缓解用户等待时的焦虑情绪&#xff0c;属于用户体验优化方案。 生成骨…
阅读更多...
视频剪辑方法：智能转码从视频到图片序列，高效转换攻略

视频剪辑方法：智能转码从视频到图片序列，高效转换攻略

在视频编辑和后期处理中&#xff0c;经常要将视频转换为图片序列&#xff0c;以便进行单独编辑或应用。下面一起来看云炫AI智剪如何批量智能转码的方法&#xff0c;高效地将视频转换为图片序列。 视频转为序列图片缩略图效果 视频转为序列图片的效果图&#xff0c;画面清晰&a…
阅读更多...
基于WIFI指纹的室内定位算法matlab仿真

基于WIFI指纹的室内定位算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1WIFI指纹定位原理 4.2 指纹数据库建立 4.3定位 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .....................................…
阅读更多...
【SpringCloud Alibaba笔记】（4）Seata处理分布式事务

【SpringCloud Alibaba笔记】（4）Seata处理分布式事务

Seata 分布式事务问题 单机单库没这个问题&#xff0c;分布式之前从1: 1 -> 1:N ->N:N 分布式之后 单体应用被拆分成微服务应用&#xff0c;原来的三个模块被拆分成三个独立的应用分别使用三个独立的数据源&#xff0c;业务操作需要调用三个服务来完成。 此时每个服务…
阅读更多...
网络调试 UDP1，开发板用动态地址-入门6

网络调试 UDP1，开发板用动态地址-入门6

https://www.bilibili.com/video/BV1zx411d7eC?p11&vd_source109fb20ee1f39e5212cd7a443a0286c5 1, 开发板连接路由器 1.1&#xff0c;烧录无OS UDP例程 1.2&#xff0c;Mini USB连接电脑 1.3&#xff0c;开发板LAN接口连接路由器 2. Ping开发板与电脑之间通信* 2.1 根据…
阅读更多...
浅谈归并排序：合并 K 个升序链表的归并解法

浅谈归并排序：合并 K 个升序链表的归并解法

在面试中遇到了这道题&#xff1a;如何实现多个升序链表的合并。这是 LeetCode 上的一道原题&#xff0c;题目具体如下&#xff1a; 用归并实现合并 K 个升序链表 LeetCode 23. 合并K个升序链表 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到…
阅读更多...
【学习总结】地面路谱分析

【学习总结】地面路谱分析

本文仅用于记录自己的学习总结&#xff0c;包括个人理解。不保证内容严格正确。 0. 参考资料 [1] 国标GB/T 703-2005/ISO 8608:1995。[2] Bilibili 路面不平度统计特性[3] 网络参考文档. 网盘&#xff1a;https://pan.baidu.com/s/1ameuQwdOquCrk2V1PIS-Xw?pwdut9m 1. 路面…
阅读更多...
Vue框架底层

Vue框架底层

一、前端框架的由来 1、服务端渲染 sequenceDiagram 浏览器->>服务器: https://www.bilibili.com/ Note right of 服务器: 组装页面(服务端渲染) 服务器->>-浏览器: 完整页面2、前后端分离 sequenceDiagram 浏览器->>服务器: https://www.bilibili.com/ 服务…
阅读更多...
Tensorflow2.0笔记 - 基本数据类型，数据类型转换

Tensorflow2.0笔记 - 基本数据类型，数据类型转换

【TensorFlow2.0】(1) tensor数据类型&#xff0c;类型转换_tensorflow tensor转int-CSDN博客文章浏览阅读1.5w次&#xff0c;点赞8次&#xff0c;收藏28次。各位同学好&#xff0c;今天和大家分享一下TensorFlow2.0中的tensor数据类型&#xff0c;以及各种类型之间的相互转换方…
阅读更多...
Spring见解4 基于注解的AOP配置

Spring见解4 基于注解的AOP配置

5.基于注解的AOP配置 5.1.创建工程 5.1.1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation…
阅读更多...
余震强度预测能力升级，Nature 刊文认证基于神经网络的模型性能优于传统模型

余震强度预测能力升级，Nature 刊文认证基于神经网络的模型性能优于传统模型

作者&#xff1a;李宝珠 编辑&#xff1a;李玮栋、xixi&#xff0c;三羊 地震的发生涉及诸多变量&#xff0c;「预测」存在挑战&#xff0c;但余震发生次数及强度的预测已取得重大进展。 2023 年 12 月 18 日 23 时 59 分&#xff0c;甘肃省临夏州积石山县发生 6.2 级地震&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023