引言

如前文（纯Python轻松构建Web UI：Remi组件-按钮、文本框、标签使用详解）我们学习 Remi 的基础组件，包括按钮、文本框和标签的使用时，用文本框输入密码，密码明文显示，这个不符合现在的使用规则，本篇日志将对此进行改进。经查阅资料，该问题可以使用 Remi 的input组件解决。

解决方案

使用 gui.Input组件替换 gui.TextInput组件，gui.Input解释如下：

gui.Input 功能

gui.Input 是一个用于接收用户单行文本输入的组件。它的功能包括：

文本输入：允许用户输入单行文本。
默认值和占位符：支持设置默认文本和占位符提示。
事件绑定：支持绑定 onchange 事件，当输入框内容变化时触发。
样式自定义：支持通过 CSS 样式自定义外观。

构造函数原型

gui.Input(width='100%', height='auto', single_line=True, placeholder="", **kwargs)

参数：

width：输入框的宽度（支持像素值或百分比，如 200 或 '100%'）。
height：输入框的高度（支持像素值或 'auto'）。
single_line：是否限制为单行输入（默认为 True）。
placeholder：占位符文本，提示用户输入内容。
**kwargs：其他可选参数（如样式、类名等）。

示例：
input_box = gui.Input(width='80%', height=40, placeholder="请输入用户名")

我们这个例子当中只需要把gui.Input构造函数的input_tpye参数设置为'password'即可，即：input_type='password'`

修改操作

继续在项目RemiEg目录下创建day02目录，添加login_app2.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_app2.py

和上一个例子相比，仅仅将login_app.py如下语句

self.password_input = gui.TextInput(width=200, height=30, style={'margin-bottom': '20px'})
self.password_input.attributes['type'] = 'password'  # 设置为密码输入框

改为如下语句

self.password_input = gui.Input(width=200, height=30, style={'margin-bottom': '10px'}, input_type='password')

完整的login_app2.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.Input(width=200, height=30, style={'margin-bottom': '10px'}, input_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)

运行效果

在终端中运行：

# 激活虚拟环境
.\.venv\Scripts\activate

# 执行代码
python login_app2.py

打开浏览器，访问 http://127.0.0.1:8080，你将看到一个用户登录界面。输入用户名和密码后，点击登录按钮，界面会显示你输入的内容。

总结

本例中我们用Remi的gui.Input组件替换gui.TextInput组件，实现了密码输入框。随着学习的深入我们将解决更多的问题，并能编写更优秀的Python WEB程序。

留言讨论

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

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

用纯Python轻松构建Web UI:Remi基础组件详解-密码输入框改进

引言