参考：
https://nicegui.io/
https://nicegui.io/#demos
版本
nicegui 1.4.30
代码：
python todolist.py
from nicegui import ui
from typing import List
import jsonclass Todo:def __init__(self, text: str, completed: bool = False):self.text = textself.completed = completedclass TodoList:def __init__(self):self.todos: List[Todo] = []self.load_todos()def add_todo(self, text: str):self.todos.insert(0, Todo(text))self.save_todos()def remove_todo(self, todo: Todo):self.todos.remove(todo)self.save_todos()def toggle_todo(self, todo: Todo):todo.completed = not todo.completedself.todos.sort(key=lambda t: t.completed)self.save_todos()def load_todos(self):try:with open('todos.json', 'r') as f:data = json.load(f)self.todos = [Todo(**item) for item in data]except FileNotFoundError:self.todos = []def save_todos(self):with open('todos.json', 'w') as f:json.dump([todo.__dict__ for todo in self.todos], f)todo_list = TodoList()@ui.page('/')
def todo_page():ui.add_head_html('''<style>body {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;}.todo-item {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;}.todo-item.completed {text-decoration: line-through;opacity: 0.6;}.delete-button {margin-left: auto;background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;}</style>''')ui.label('TodoList').style('font-size: 24px; text-align: center;')todo_container = ui.column()def update_todos():todo_container.clear()for todo in todo_list.todos:with todo_container:with ui.row().classes('todo-item' + (' completed' if todo.completed else '')):ui.checkbox(value=todo.completed, on_change=lambda e, t=todo: todo_list.toggle_todo(t) or update_todos())ui.label(todo.text)ui.button('Delete', on_click=lambda e, t=todo: todo_list.remove_todo(t) or update_todos()).classes('delete-button')def add_todo():if todo_input.value:todo_list.add_todo(todo_input.value)todo_input.value = ''update_todos()with ui.row().classes('todo-form'):todo_input = ui.input(placeholder='Enter a new todo').classes('todo-input')ui.button('Add', on_click=add_todo).classes('add-button')update_todos()ui.run()
网页打开查看：
