引言
之前学习了 Remi 框架的基本概念，并实现了一个简单的 "Hello, World!" 应用。接下来我们将进一步深入 Remi 的基础组件，包括按钮、文本框和标签的使用。通过这些组件，可以构建更复杂的 Web 界面，并实现基本的用户交互功能。
案例：创建一个用户登录界面
本例将通过一个用户登录界面的案例，演示如何使用 Remi 的按钮、文本框和标签组件。最终效果如下：
- 显示一个标题标签。
- 提供用户名和密码输入框。
- 点击登录按钮后，显示用户输入的内容。
代码实现
继续在项目RemiEg目录下创建day02目录，添加login_app.py，目录结构大致如下：
├───.venv
│ ├───Lib
│ ├───.gitignore
│ ├───CACHEDIR.TAG
│ ├───pyvenv.cfg
│ └───Scripts
├───.python-version
├───pyproject.toml
├───README.md
├───uv.lock
├───day01
│ └───hello.py
└───day02
└───login_app.py
login_app.py代码内容如下：
from remi import start, App, gui
class LoginApp(App):
def __init__(self, *args):
super(LoginApp, self).__init__(*args)
def main(self):
# 创建一个垂直布局容器
container = gui.VBox(width=300, height=200, style={'margin': 'auto', 'padding': '20px'})
# 创建一个标题标签
title = gui.Label("用户登录", style={'font-size': '24px', 'text-align': 'center', 'margin-bottom': '20px'})
# 创建用户名输入框
username_label = gui.Label("用户名:", style={'font-size': '16px'})
self.username_input = gui.TextInput(width=200, height=30, style={'margin-bottom': '10px'})
# 创建密码输入框
password_label = gui.Label("密码:", style={'font-size': '16px'})
self.password_input = gui.TextInput(width=200, height=30, style={'margin-bottom': '20px'})
self.password_input.attributes['type'] = 'password' # 设置为密码输入框
# 创建登录按钮
login_button = gui.Button("登录", width=100, height=30)
login_button.onclick.do(self.on_login_clicked) # 绑定点击事件
# 创建结果显示标签
self.result_label = gui.Label("", style={'font-size': '16px', 'text-align': 'center'})
# 将组件添加到容器中
container.append(title)
container.append(username_label)
container.append(self.username_input)
container.append(password_label)
container.append(self.password_input)
container.append(login_button)
container.append(self.result_label)
# 返回容器作为应用的根元素
return container
def on_login_clicked(self, widget):
# 获取用户名和密码
username = self.username_input.get_value()
password = self.password_input.get_value()
# 显示结果
self.result_label.set_text(f"用户名: {username}, 密码: {password}")
# 启动应用
if __name__ == "__main__":
start(LoginApp, address='0.0.0.0', port=8080)
代码解析
- 标题标签：
- 使用 gui.Label 创建一个标题标签，设置字体大小和对齐方式。
- 用户名输入框：
- 使用 gui.TextInput 创建一个文本框，用于输入用户名。
- 密码输入框：
- 使用 gui.TextInput 创建一个文本框，并通过 attributes['type'] = 'password' 将其设置为密码输入框。
- 登录按钮：
- 使用 gui.Button 创建一个按钮，并通过 onclick.do 方法绑定点击事件。
- 结果显示标签：
- 使用 gui.Label 创建一个标签，用于显示用户输入的内容。
- 事件处理：
- 在 on_login_clicked 方法中，获取用户名和密码，并更新结果显示标签的内容。
运行效果
在终端中运行：
# 激活虚拟环境
.\.venv\Scripts\activate
# 执行代码
python login_app.py
打开浏览器，访问 http://127.0.0.1:8080，你将看到一个用户登录界面。输入用户名和密码后，点击登录按钮，界面会显示你输入的内容。
注：我们大概用来30多行纯Python代码编写了一个WEB应用，美中不足的是：输入密码为明文显示，这个问题接下来我们再专门解决。
Remi 基础组件详解
1. gui.Button 按钮组件
功能：创建一个按钮，用于触发用户交互。
常用属性和方法：
- text：按钮显示的文本。
- width 和 height：按钮的宽度和高度。
- onclick.do(callback)：绑定点击事件，callback 是事件处理函数。 原型：
gui.Button(
text='', # 按钮显示的文本
width=None, # 按钮宽度（如 '100px'）
height=None, # 按钮高度（如 '30px'）
style=None, # CSS 样式（字典形式）
**kwargs # 其他属性
)
示例：
button = gui.Button("Click Me", width=100, height=30)
button.onclick.do(self.on_button_clicked)
2. gui.TextInput 文本框组件
功能：创建一个文本框，用于用户输入。
常用属性和方法：
- width 和 height：文本框的宽度和高度。
- get_value()：获取用户输入的内容。
- set_value(text)：设置文本框的内容。
- attributes：设置 HTML 属性（如 type='password'）。
原型：
gui.TextInput(
width=None, # 文本框宽度（如 '200px'）
height=None, # 文本框高度（如 '30px'）
style=None, # CSS 样式（字典形式）
**kwargs # 其他属性
)
示例：
text_input = gui.TextInput(width=200, height=30)
text_input.attributes['type'] = 'password' # 设置为密码输入框
3. gui.Label 标签组件
功能：创建一个标签，用于显示静态文本或动态内容。
常用属性和方法：
- text：标签显示的文本。
- set_text(text)：动态更新标签的内容。
- style：设置 CSS 样式。 原型：
label.set_text(text) # 设置标签显示的文本
示例：
label = gui.Label("Hello, World!", style={'font-size': '20px'})
label.set_text("New Text") # 动态更新内容
总结
在本例中，我们学习了 Remi 的基础组件（按钮、文本框、标签），并通过一个用户登录界面的案例演示了如何使用这些组件。接下来，我们将继续探讨 Remi 的布局管理和事件处理等功能。
留言讨论
- 你在使用 Remi 的过程中遇到过哪些问题？欢迎在评论区分享！
- 你希望在后续的学习中看到哪些 Remi 的实际应用场景？欢迎留言告诉我们！
将陆续更新 Python 编程相关的学习资料！
头条号作者：ICodeWR
发布时间：2025年3月17日