LVGL组件设计之登录页面

LVGL组件设计之登录页面

1. 概述

登录页面组件(login)是基于LVGL实现的一个通用登录界面组件，为智能家居系统提供用户登录入口。该组件集成虚拟键盘组件(virt_kb),使用用户管理组件(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）
• 虚拟键盘组件（virt_kb）
• 触摸屏驱动（tslib）

2.3 源码路径

• 登录组件：/com/login/
• 虚拟键盘组件：/com/virt_kb/
• 项目源码：https://gitcode.com/am335xt3/lvgl/tree/main/apps/smarthome/src/com/login

3. 核心功能

3.1 组件结构

登录页面组件主要由以下部分组成：

typedef struct {
   
   
    lv_obj_t *container;          /* 登录组件的容器 */
    lv_obj_t *username_input;     /* 用户名输入框 */
    lv_obj_t *password_input;     /* 密码输入框 */
    lv_obj_t *show_pwd_label;     /* 显示密码按钮的标签 */
    virt_kb_t *kb;                /* 虚拟键盘 */
    verify_callback_t verify_cb;   /* 验证回调函数 */
} login_t;

3.2 主要接口

组件提供以下核心接口：

• login_create(lv_obj_t *parent, verify_callback_t verify_cb, virt_kb_t *kb): 创建登录组件
• login_destroy(login_t *login): 销毁登录组件

4. 实现细节

4.1 登录页面布局

登录页面的布局包括：

1. 滚动容器（支持垂直滚动）
2. 用户名输入区域（标签 + 输入框）
3. 密码输入区域（标签 + 输入框 + 显示密码按钮）
4. 登录按钮

关键代码：

// 创建滚动容器
static lv_obj_t* create_scroll_container(lv_obj_t *parent)
{
   
   
    lv_obj_t *container = lv_obj_create(parent);
    lv_obj_set_size(container, lv_pct(100), lv_pct(90));
    lv_obj_align(container, LV_ALIGN_BOTTOM_MID, 0, 0);
    lv_obj_set_style_border_width(container,