用纯Python轻松构建Web UI:Remi 动态更新，实时刷新界面内容
引言
在前几篇文章中，我们介绍了 Remi 的基础组件、布局管理和事件处理功能。本文将深入探讨 Remi 的动态更新功能，学习如何实时刷新界面内容，从而打造更流畅的用户体验。通过动态更新，我们可以实现实时数据展示、进度条更新等功能。
动态更新简介
在 Remi 中，动态更新是通过修改组件的属性或内容实现的。例如：
- 使用 set_text 方法更新标签的内容。
- 使用 set_value 方法更新文本框的值。
- 使用 append 方法动态添加子组件。
通过结合事件处理和动态更新，我们可以实现实时刷新界面内容的功能。
案例：创建一个实时任务进度条
我们将通过一个实时任务进度条的案例，演示如何使用 Remi 实现动态更新。最终效果如下：
- 显示一个进度条和一个标签，用于展示任务进度。
- 点击“开始任务”按钮后，进度条和标签会实时更新，直到任务完成。
新增类和API
1. gui.Progress 类
功能：创建一个进度条组件。
原型：
gui.Progress(
width=None, # 进度条宽度（如 '100%' 或 '300px'）
height=None, # 进度条高度（如 '30px'）
style=None, # CSS 样式（字典形式）
**kwargs # 其他属性
)
常用方法：
- set_value(value)：设置进度条的当前值（0 到 100）。
- get_value()：获取进度条的当前值。
2. Button.set_enabled 方法
功能：启用或禁用按钮。
原型：
button.set_enabled(enable) # enable 为 True 启用按钮，为 False 禁用按钮
3. threading.Thread 类
功能：创建一个新线程来执行任务。
原型：
threading.Thread(target=function, args=())
示例：
threading.Thread(target=self.run_task).start()
代码实现
from remi import start, App, gui
import threading
import time
class ProgressBarApp(App):
def __init__(self, *args):
super(ProgressBarApp, self).__init__(*args)
def main(self):
# 创建一个垂直布局容器作为根容器
root_container = gui.VBox(width=400, style={'margin': 'auto', 'padding': '20px', 'border': '1px solid #ccc'})
# 创建标题标签
title = gui.Label("实时任务进度条", style={'font-size': '24px', 'text-align': 'center', 'margin-bottom': '20px'})
# 创建进度条
self.progress_bar = gui.Progress(width='100%', height=30, style={'margin-bottom': '10px'})
self.progress_bar.set_value(0) # 初始值为 0
# 创建进度标签
self.progress_label = gui.Label("0%", style={'font-size': '16px', 'text-align': 'center', 'margin-bottom': '20px'})
# 创建开始任务按钮
start_button = gui.Button("开始任务", width=100, height=30)
start_button.onclick.do(self.on_start_clicked)
# 将所有组件添加到根容器中
root_container.append(title)
root_container.append(self.progress_bar)
root_container.append(self.progress_label)
root_container.append(start_button)
# 返回根容器
return root_container
def on_start_clicked(self, widget):
# 禁用按钮，防止重复点击
widget.set_enabled(False)
# 启动一个新线程来执行任务
threading.Thread(target=self.run_task).start()
def run_task(self):
# 模拟任务执行过程
for i in range(101):
time.sleep(0.1) # 模拟任务耗时
self.update_progress(i)
# 任务完成后启用按钮
self.progress_label.set_text("任务完成！")
self.progress_bar.set_value(100)
self.get_button().set_enabled(True)
def update_progress(self, value):
# 更新进度条和标签
self.progress_bar.set_value(value)
self.progress_label.set_text(f"{value}%")
def get_button(self):
# 获取开始任务按钮
return self.progress_label.parent.children['start_task_button']
# 启动应用
if __name__ == "__main__":
start(ProgressBarApp, address='0.0.0.0', port=8080)
代码解析
- 根容器：
使用 gui.VBox 创建一个垂直布局容器，作为整个应用的根容器。
- 进度条：
使用 gui.Progress 创建一个进度条，初始值为 0。
- 进度标签：
使用 gui.Label 创建一个标签，用于显示当前进度百分比。
- 开始任务按钮：
使用 gui.Button 创建一个按钮，并绑定点击事件。
- 事件处理：
在 on_start_clicked 方法中，禁用按钮以防止重复点击，并启动一个新线程来执行任务。
- 任务执行：
在 run_task 方法中，模拟任务执行过程，并通过 update_progress 方法实时更新进度条和标签。
- 动态更新：
使用 set_value 方法更新进度条的值。
使用 set_text 方法更新标签的内容。
运行效果
保存代码为 RemiEg 项目的day05目录下，命名为 progress_bar_app.py，RemiEg项目目录结构大致如下：
├───.venv
│ ├───Lib
│ ├───.gitignore
│ ├───CACHEDIR.TAG
│ ├───pyvenv.cfg
│ └───Scripts
├───.python-version
├───pyproject.toml
├───README.md
├───uv.lock
├───day01
│ └───hello.py
├───day02
│ └───login_app.py
├───day03
│ └───user_form_app.py
├───day04
│ └───calculator_app.py
└───day05
└───progress_bar_app.py
然后在终端中运行：
# 激活虚拟环境
.\.venv\Scripts\activate
# 运行项目脚本
python day05\progress_bar_app.py
打开浏览器，访问 http://127.0.0.1:8080，你将看到一个实时任务进度条。点击“开始任务”按钮后，进度条和标签会实时更新，直到任务完成。
动态更新技巧
- 多线程任务：
- 对于耗时任务，建议使用多线程（如 threading.Thread）来避免阻塞主线程。
- 禁用按钮：
- 在任务执行期间，禁用按钮可以防止用户重复点击。
- 实时更新：
- 通过 set_value 和 set_text 方法，可以实现界面内容的实时更新。
总结
本文详细介绍了 Remi 的动态更新功能，并通过一个实时任务进度条的案例演示了如何实时刷新界面内容。在接下来的文章中，我们将深入探讨 Remi 的多页面应用开发。
交流讨论
- 你在使用 Remi 动态更新时遇到过哪些问题？欢迎在评论区分享！
- 你希望在本系列中看到哪些 Remi 的实际应用场景？欢迎留言告诉我们！
附录：本篇案例用到的函数原型
希望这篇文章对你有帮助！如果需要进一步调整或补充，请告诉我！
将陆续更新 Python 编程相关的学习资料！
头条号作者：ICodeWR
标签：#python# #分享我的头条荣誉# #发优质内容享分成# #Python#