引言

之前学习了 Remi 框架的基本概念，并实现了一个简单的 "Hello, World!" 应用。接下来我们将进一步深入 Remi 的基础组件，包括按钮、文本框和标签的使用。通过这些组件，可以构建更复杂的 Web 界面，并实现基本的用户交互功能。

案例：创建一个用户登录界面

本例将通过一个用户登录界面的案例，演示如何使用 Remi 的按钮、文本框和标签组件。最终效果如下：

1. 显示一个标题标签。
2. 提供用户名和密码输入框。
3. 点击登录按钮后，显示用户输入的内容。

代码实现

继续在项目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)

代码解析

1. 标题标签：
2. 使用 gui.Label 创建一个标题标签，设置字体大小和对齐方式。
3. 用户名输入框：
4. 使用 gui.TextInput 创建一个文本框，用于输入用户名。
5. 密码输入框：
6. 使用 gui.TextInput 创建一个文本框，并通过 attributes['type'] = 'password' 将其设置为密码输入框。
7. 登录按钮：
8. 使用 gui.Button 创建一个按钮，并通过 onclick.do 方法绑定点击事件。
9. 结果显示标签：
10. 使用 gui.Label 创建一个标签，用于显示用户输入的内容。
11. 事件处理：
12. 在 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 的布局管理和事件处理等功能。

留言讨论

1. 你在使用 Remi 的过程中遇到过哪些问题？欢迎在评论区分享！
2. 你希望在后续的学习中看到哪些 Remi 的实际应用场景？欢迎留言告诉我们！

将陆续更新 Python 编程相关的学习资料！

头条号作者：ICodeWR

发布时间：2025年3月17日

标签：#python# #python自学# #每天学python#