LVGL组件设计之用户管理页面
1. 概述
用户管理页面组件(user_mgr_page)是基于LVGL实现的一个通用用户管理界面组件,为智能家居系统提供用户管理功能。该组件集成了用户管理组件(usermgr),提供了用户列表显示、用户添加、删除和密码修改等功能,具有友好的用户界面和交互体验。
2. 开发环境说明
2.1 开发环境
- 处理器:AM3354
- 显示屏:支持触摸功能的LCD屏幕
- 操作系统:Linux 3.2
- LVGL版本:v8.3
- 构建工具:CMake 3.16+
- 交叉编译工具链:arm-arago-linux-gnueabi-gcc 4.5.3
2.2 依赖组件
- LVGL核心库
- 用户管理组件(usermgr)
- 系统管理组件(sysmgr)
- 虚拟键盘组件(virt_kb)
- 触摸屏驱动(tslib)
2.3 源码路径
- 用户管理页面:
/pages/subpages/user_mgr_page/
- 用户管理组件:
/com/usermgr/
- 项目源码:https://gitcode.com/am335xt3/lvgl/tree/main/apps/smarthome/src/pages/subpages/user_mgr_page
3. 核心功能
3.1 组件结构
用户管理页面组件主要由以下部分组成:
typedef struct {lv_obj_t* obj; // 页面对象lv_obj_t* parent; // 父对象titlebar_t* titlebar; // 标题栏lv_obj_t* container; // 主容器lv_obj_t* table; // 用户列表表格lv_obj_t* btn_add; // 添加用户按钮lv_obj_t* btn_del; // 删除用户按钮lv_obj_t* btn_pwd; // 修改密码按钮close_cb_t close_cb; // 关闭回调函数
} user_mgr_page_t;
3.2 主要接口
组件提供以下核心接口:
user_mgr_page_create(lv_obj_t* parent, close_cb_t close_cb)
: 创建用户管理页面
4. 实现细节
4.1 用户管理页面布局
用户管理页面采用垂直布局,主要由以下三个部分组成:
-
标题栏
- 位于页面顶部
- 显示"User Management"标题
- 包含返回按钮,点击可关闭页面
-
主容器区域
- 位于标题栏下方,占据页面80%高度
- 内边距为5像素
- 包含用户列表表格和按钮容器
-
功能按钮区域
- 位于主容器底部
- 宽度420像素,高度40像素
- 包含三个等宽按钮(120x40像素):
- 添加用户按钮
- 删除用户按钮
- 修改密码按钮
- 按钮之间均匀分布
关键代码:
// 创建主页面对象
page->obj = lv_obj_create(parent);
lv_obj_set_size(page->obj, LV_PCT(100), LV_PCT(100));
lv_obj_set_style_border_width(page->obj, 0, 0);
lv_obj_set_style_pad_all(page->obj, 0, 0);// 创建标题栏
page->titlebar = titlebar_create(page->obj);
titlebar_set_title(page->titlebar, "User Management");
titlebar_set_close_cb(page->titlebar, user_mgr_page_close_handler, page);// 创建主容器
page->container = lv_obj_create(page->obj);
lv_obj_set_size(page->container, LV_PCT(100), LV_PCT(80));
lv_obj_align(page->container, LV_ALIGN_TOP_MID, 0, 40);
lv_obj_set_style_pad_all(page->container, 5, 0);
lv_obj_set_style_border_width(page->container, 0, 0);// 创建按钮容器
lv_obj_t* btn_container = lv_obj_create(page->container);
lv_obj_set_size(btn_container, 420, 40);
lv_obj_align(btn_container, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_set_flex_align(btn_container, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_all(btn_container, 0, 0);
lv_obj_set_style_border_width(btn_container, 0, 0);
布局特点:
- 采用百分比布局,适应不同屏幕尺寸
- 去除边框和内边距,实现无缝衔接
- 使用flex布局实现按钮均匀分布
- 根据用户权限动态控制按钮状态
4.2 用户列表显示
用户列表使用LVGL的表格组件实现,包含以下特点:
- 表格列配置
- ID列:显示用户ID
- 用户名列:显示用户名
- 创建时间列:显示用户创建时间
- 用户类型列:显示用户类型(管理员/普通用户)
关键代码:
// 创建用户列表表格
page->table = lv_table_create(page->container);
lv_obj_set_size(page->table, 450, 160);
lv_table_set_col_cnt(page->table, 4);
lv_table_set_col_width(page->table, 0, 50); // ID
lv_table_set_col_width(page->table, 1, 110); // 用户名
lv_table_set_col_width(page->table, 2, 180); // 创建时间
lv_table_set_col_width(page->table, 3, 90); // 用户类型// 设置表头
lv_table_set_cell_value(page->table, 0, 0, "ID");
lv_table_set_cell_value(page->table, 0, 1, "Username");
lv_table_set_cell_value(page->table, 0, 2, "Create Time");
lv_table_set_cell_value(page->table, 0, 3, "Type");
4.3 用户添加功能
用户添加功能通过对话框实现,包含以下特点:
-
界面布局
- 对话框尺寸:340x260像素
- 内边距:20像素
- 标题居中显示"Add New User"
- 输入区域采用垂直布局,各元素间距20像素
- 标签采用左对齐,固定宽度80像素
- 底部按钮栏采用水平布局,确定和取消按钮各120x40像素
-
输入项
- 用户名输入框:宽度180像素,高度40像素,带有占位文本"Enter username"
- 密码输入框:宽度180像素,高度40像素,启用密码模式,带有占位文本"Enter password"
- 用户类型选择:下拉框宽度180像素,高度40像素,选项包含"Normal"和"Admin"
-
输入验证
- 用户名和密码不能为空
- 使用当前登录用户的凭据进行验证
- 输入框获得焦点时自动弹出虚拟键盘
关键代码:
// 确认按钮事件回调
static void btn_ok_event_cb(lv_event_t* e) {user_add_dialog_t* dialog = (user_add_dialog_t*)lv_event_get_user_data(e);if (!dialog) return;const char* username = lv_textarea_get_text(dialog->username_ta);const char* password = lv_textarea_get_text(dialog->password_ta);uint16_t type = lv_dropdown_get_selected(dialog->type_dd);// 验证输入if (strlen(username) == 0 || strlen(password) == 0) {lv_obj_t* mbox = lv_msgbox_create(NULL, "Error", "Please enter username and password", NULL, true);lv_obj_center(mbox);return;}// 检查用户名是否已存在UserInfo user_info;if (usermgr_get_user_info(username, &user_info)) {lv_obj_t* mbox = lv_msgbox_create(NULL, "Error", "Username already exists", NULL, true);lv_obj_center(mbox);return;}// 添加用户const char* operator_username = sysmgr_get_username();const char* operator_password = sysmgr_get_password();if (usermgr_add_user(username, password, type, operator_username, operator_password)) {// 关闭对话框并刷新列表if (dialog->close_cb) {dialog->close_cb();}}
}
4.4 用户删除功能
用户删除功能通过对话框实现,包含以下特点:
-
界面布局
- 对话框尺寸:340x200像素
- 内边距:20像素
- 标题居中显示"删除用户"
- 内容区域采用紧凑布局,总高度不超过屏幕高度的1/3
- 警告图标位于顶部中央,大小32x32像素
- 确认按钮使用红色突出显示,增加警示效果
-
用户选择
- 下拉框宽度250像素,显示当前系统中的所有用户
- 下拉列表最大显示3个选项,超出部分可滚动
- 选项文本左对齐,右侧显示用户类型标识
-
安全验证
- 禁止删除当前登录用户
- 使用当前登录用户的凭据进行验证
- 删除操作需要二次确认
关键代码:
// 确认按钮事件回调
static void btn_ok_event_cb(lv_event_t* e) {user_del_dialog_t* dialog = (user_del_dialog_t*)lv_event_get_user_data(e);if (!dialog) return;char username[32];lv_dropdown_get_selected_str(dialog->user_dd, username, sizeof(username));// 验证是否为admin用户if (strcmp(username, "admin") == 0) {lv_obj_t* mbox = lv_msgbox_create(NULL, "Error", "Cannot delete admin user", NULL, true);lv_obj_center(mbox);return;}// 验证是否为当前用户const char* current_user = sysmgr_get_username();if (strcmp(username, current_user) == 0) {lv_obj_t* mbox = lv_msgbox_create(NULL, "Error", "Cannot delete current user", NULL, true);lv_obj_center(mbox);return;}// 删除用户const char* operator_username = sysmgr_get_username();const char* operator_password = sysmgr_get_password();if (usermgr_delete_user(username, operator_username, operator_password)) {// 关闭对话框并刷新列表if (dialog->close_cb) {dialog->close_cb();}}
}
4.5 密码修改功能
密码修改功能通过对话框实现,包含以下特点:
-
界面布局
- 对话框标题居中显示"修改密码"
- 表单布局采用网格形式,标签列宽度固定80像素
- 输入区域与虚拟键盘之间预留足够空间
- 所有输入框采用统一的样式和尺寸
-
输入项
- 用户选择下拉框:宽度200像素,禁用编辑
- 旧密码输入框:宽度200像素,密码模式显示
- 新密码输入框:宽度200像素,密码模式显示
- 确认密码输入框:宽度200像素,密码模式显示
-
密码验证
- 验证旧密码正确性
- 使用虚拟键盘输入,支持特殊字符
- 密码输入框启用密码模式,支持显示/隐藏切换
关键代码:
// 确认按钮事件回调
static void btn_ok_event_cb(lv_event_t* e) {user_pwd_dialog_t* dialog = (user_pwd_dialog_t*)lv_event_get_user_data(e);if (!dialog) return;char username[32];lv_dropdown_get_selected_str(dialog->user_dd, username, sizeof(username));const char* old_pwd = lv_textarea_get_text(dialog->old_pwd_ta);const char* new_pwd = lv_textarea_get_text(dialog->new_pwd_ta);// 验证旧密码if (!usermgr_verify_password(username, old_pwd)) {lv_obj_t* mbox = lv_msgbox_create(NULL, "Error", "Old password is incorrect", NULL, true);lv_obj_center(mbox);return;}// 修改密码if (usermgr_change_password(username, old_pwd, new_pwd)) {// 关闭对话框if (dialog->close_cb) {dialog->close_cb();}}
}
5. 使用示例
// 创建用户管理页面
lv_obj_t* user_mgr_page = user_mgr_page_create(parent, close_callback);
if (!user_mgr_page) {// 处理创建失败return;
}
6. 注意事项
-
权限控制
- 普通用户只能修改密码,不能添加和删除用户
- 管理员用户可以执行所有操作
-
安全性
- 所有操作都需要验证操作者的权限
- 密码输入采用密码模式显示
- 禁止删除当前登录用户
-
界面响应
- 操作失败时提供清晰的错误提示
- 操作成功后自动刷新用户列表
7. 未来优化方向
-
功能增强
- 添加用户权限详细配置
- 支持用户分组管理
- 添加用户操作日志
-
界面优化
- 支持用户列表排序和筛选
- 添加用户信息详细查看