网站导航
> 技术文档 > 完整的 SquareStudio 注册登录功能实现方案：已经烧录到开发板正常使用

完整的 SquareStudio 注册登录功能实现方案：已经烧录到开发板正常使用

网友: 技术文档 2025-07-26 20:21:46

根据你的需求，我将提供完整的实现方案，解决按钮同时执行多个动作的问题，并确保注册登录功能正常工作。

所需文件结构

需要创建和修改的文件如下：

  1. ui_events.h - 事件处理函数声明
  2. events.c - 实际的事件处理逻辑
  3. ui.c - UI 初始化和事件绑定
  4. 确保CMakeLists.txt和filelist.txt包含新文件

详细步骤

第一步：创建 ui_events.h 文件

#ifndef _UI_EVENTS_H#define _UI_EVENTS_H#ifdef __cplusplusextern \"C\" {#endif// 注册按钮事件处理函数void event_register_btn(lv_event_t * e);// 登录按钮事件处理函数void event_login_btn(lv_event_t * e);#ifdef __cplusplus} /*extern \"C\"*/#endif#endif

操作：在项目中创建此文件，用于声明事件处理函数。

第二步：创建 events.c 文件

#include \"ui.h\"#include \"ui_helpers.h\"#include \"ui_events.h\"#include // 模拟用户数据库typedef struct { char username[50]; char password[50];} User;// 简单的用户存储（实际应用中应使用持久化存储）static User users[10];static int user_count = 0;// 声明回调函数（放在使用前）static void hide_error_panel(lv_timer_t *timer);static void hide_success_panel_and_go_welcome(lv_timer_t *timer);// 检查用户名是否已存在static bool is_username_exists(const char* username) { for(int i = 0; i < user_count; i++) { if(strcmp(users[i].username, username) == 0) { return true; } } return false;}// 验证用户凭据static bool validate_user(const char* username, const char* password) { for(int i = 0; i < user_count; i++) { if(strcmp(users[i].username, username) == 0 && strcmp(users[i].password, password) == 0) { return true; } } return false;}// 添加新用户static void add_user(const char* username, const char* password) { if(user_count < 10) { strncpy(users[user_count].username, username, 49); users[user_count].username[49] = \'\\0\'; // 确保字符串结束 strncpy(users[user_count].password, password, 49); users[user_count].password[49] = \'\\0\'; // 确保字符串结束 user_count++; }}// 错误面板自动隐藏回调static void hide_error_panel(lv_timer_t *timer) { lv_obj_add_flag(ui_Panel6, LV_OBJ_FLAG_HIDDEN); lv_timer_del(timer); // 删除定时器自身}// 成功面板自动隐藏并跳转页面回调static void hide_success_panel_and_go_welcome(lv_timer_t *timer) { lv_obj_add_flag(ui_Panel3, LV_OBJ_FLAG_HIDDEN); _ui_screen_change(&ui_welcomeUI, LV_SCR_LOAD_ANIM_FADE_ON, 500, 0, ui_welcomeUI_screen_init); lv_timer_del(timer); // 删除定时器自身}// 注册按钮事件处理void event_register_btn(lv_event_t * e) { // 阻止事件传播（LVGL v8.2 常用此函数） lv_event_stop_bubbling(e); // 获取输入框内容 const char *username = lv_textarea_get_text(ui_uiTextAreaUsername); const char *password = lv_textarea_get_text(ui_uiTextAreaPassword); // 验证输入 if(strlen(username) == 0 || strlen(password) == 0) { // 输入为空，显示错误面板 lv_obj_clear_flag(ui_Panel6, LV_OBJ_FLAG_HIDDEN); // 3秒后隐藏错误面板（使用C风格回调） lv_timer_create(hide_error_panel, 3000, NULL); } else if(is_username_exists(username)) { // 用户名已存在，显示错误面板 lv_obj_clear_flag(ui_Panel6, LV_OBJ_FLAG_HIDDEN); // 3秒后隐藏错误面板 lv_timer_create(hide_error_panel, 3000, NULL); } else { // 注册成功，添加用户 add_user(username, password); // 显示成功面板 lv_obj_clear_flag(ui_Panel3, LV_OBJ_FLAG_HIDDEN); // 2秒后跳转到欢迎页面并隐藏成功面板 lv_timer_create(hide_success_panel_and_go_welcome, 2000, NULL); } // 清空输入框 lv_textarea_set_text(ui_uiTextAreaUsername, \"\"); lv_textarea_set_text(ui_uiTextAreaPassword, \"\");}// 登录按钮事件处理void event_login_btn(lv_event_t * e) { // 获取输入框内容 const char *username = lv_textarea_get_text(ui_uiTextAreaUsername); const char *password = lv_textarea_get_text(ui_uiTextAreaPassword); // 验证用户 if(validate_user(username, password)) { // 登录成功，显示成功面板 lv_obj_clear_flag(ui_Panel3, LV_OBJ_FLAG_HIDDEN); // 2秒后跳转到欢迎页面并隐藏成功面板 lv_timer_create(hide_success_panel_and_go_welcome, 2000, NULL); } else { // 登录失败，显示错误面板 lv_obj_clear_flag(ui_Panel6, LV_OBJ_FLAG_HIDDEN); // 3秒后隐藏错误面板 lv_timer_create(hide_error_panel, 3000, NULL); } // 清空输入框 lv_textarea_set_text(ui_uiTextAreaUsername, \"\"); lv_textarea_set_text(ui_uiTextAreaPassword, \"\");}

操作：创建此文件，实现注册和登录的核心逻辑。代码中使用lv_event_stop_propagation(e)来阻止 SquareStudio 设置的默认动作，解决按钮同时执行多个动作的问题。

第三步：修改 ui.c 文件

找到ui_init()函数，添加以下代码：

// 在ui_init()函数中添加以下代码// 确保面板初始状态为隐藏lv_obj_add_flag(ui_Panel3, LV_OBJ_FLAG_HIDDEN);lv_obj_add_flag(ui_Panel6, LV_OBJ_FLAG_HIDDEN);// 设置密码框模式lv_textarea_set_password_mode(ui_uiTextAreaPassword, true);lv_textarea_set_one_line(ui_uiTextAreaUsername, true);lv_textarea_set_one_line(ui_uiTextAreaPassword, true);// 移除可能存在的旧事件回调lv_obj_remove_event_dsc(ui_uiButtonRegistration, NULL);lv_obj_remove_event_dsc(ui_uiButtonLogin, NULL);// 绑定新的事件处理函数lv_obj_add_event_cb(ui_uiButtonRegistration, event_register_btn, LV_EVENT_CLICKED, NULL);lv_obj_add_event_cb(ui_uiButtonLogin, event_login_btn, LV_EVENT_CLICKED, NULL);

操作：在现有ui.c文件的ui_init()函数中添加上述代码，确保在 UI 初始化时正确设置组件属性并绑定事件处理函数。

第四步：更新 CMakeLists.txt

SET(SOURCES screens/ui_loginUI.c screens/ui_welcomeUI.c screens/ui_deskUI.c screens/ui_waitUI.c screens/ui_gameUI.c screens/ui_game1UI.c screens/ui_game2UI.c screens/ui_Screen8.c screens/ui_Screen9.c screens/ui_pictureUI.c ui.c ui_events.h # 添加头文件 events.c # 添加事件处理文件 components/ui_comp_hook.c ui_helpers.c images/ui_img_window_png.c images/ui_img_car1_png.c images/ui_img_car2_png.c images/ui_img_kun_png.c images/ui_img_desk_png.c images/ui_img_cat_png.c images/ui_img_woman_png.c images/ui_img_car3_png.c fonts/ui_font_Font32.c fonts/ui_font_Font16.c)add_library(ui ${SOURCES})

操作：修改项目的CMakeLists.txt，添加新创建的ui_events.h和events.c文件。

第五步：更新 filelist.txt

screens/ui_loginUI.cscreens/ui_welcomeUI.cscreens/ui_deskUI.cscreens/ui_waitUI.cscreens/ui_gameUI.cscreens/ui_game1UI.cscreens/ui_game2UI.cscreens/ui_Screen8.cscreens/ui_Screen9.cscreens/ui_pictureUI.cui.cui_events.h # 添加头文件events.c # 添加事件处理文件components/ui_comp_hook.cui_helpers.cimages/ui_img_window_png.cimages/ui_img_car1_png.cimages/ui_img_car2_png.cimages/ui_img_kun_png.cimages/ui_img_desk_png.cimages/ui_img_cat_png.cimages/ui_img_woman_png.cimages/ui_img_car3_png.cfonts/ui_font_Font32.cfonts/ui_font_Font16.c

操作：修改filelist.txt，添加新创建的文件。

第六步：在 SquareStudio 中移除默认事件

  1. 打开 SquareStudio，加载你的项目
  2. 找到注册按钮uiButtonRegistration
  3. 检查并移除在 SquareStudio 中为该按钮设置的所有事件（特别是点击事件）
  4. 对登录按钮uiButtonLogin执行相同操作
  5. 确保Panel3和Panel6的初始状态设置为隐藏

功能说明

实现后的功能如下：

  1. 注册流程：

    • 用户输入用户名和密码
    • 点击注册按钮
    • 系统验证输入：
      • 若输入为空，显示Panel6（错误提示）3 秒
      • 若用户名已存在，显示Panel6（错误提示）3 秒
      • 若注册成功，显示Panel3（成功提示）2 秒，然后跳转到welcomeUI页面

  2. 登录流程：

    • 用户输入用户名和密码
    • 点击登录按钮
    • 系统验证凭据：
      • 若验证成功，显示Panel3（成功提示）2 秒，然后跳转到welcomeUI页面
      • 若验证失败，显示Panel6（错误提示）3 秒

  3. 所有流程结束后都会清空输入框

测试步骤

  1. 编译并运行项目
  2. 测试注册功能：
    • 不输入任何内容点击注册 → 应显示错误面板
    • 输入已存在的用户名 → 应显示错误面板
    • 输入新用户名和密码 → 应显示成功面板，然后跳转
  3. 测试登录功能：
    • 使用刚注册的账号登录 → 应成功跳转
    • 使用错误的账号或密码 → 应显示错误面板

这个方案应该能解决你遇到的按钮同时执行多个动作的问题，并提供完整的注册登录功能。如果还有任何问题，请告诉我具体的错误现象或行为。

网络标签：

相关问题