LVGL组件设计之用户管理页面

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 用户管理页面布局

用户管理页面采用垂直布局，主要由以下三个部分组成：

1. 标题栏

   • 位于页面顶部
   • 显示"User Management"标题
   • 包含返回按钮，点击可关闭页面

2. 主容器区域

   • 位于标题栏下方，占据页面80%高度
   • 内边距为5像素
   • 包含用户列表表格和按钮容器

3. 功能按钮区域

   • 位于主容器底部
   • 宽度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