根據你的需求,我將提供完整的實現方案,解決按鈕同時執行多個動作的問題,并確保注冊登錄功能正常工作。
所需文件結構
需要創建和修改的文件如下:
ui_events.h
?- 事件處理函數聲明events.c
?- 實際的事件處理邏輯ui.c
?- UI 初始化和事件綁定- 確保
CMakeLists.txt
和filelist.txt
包含新文件
詳細步驟
第一步:創建 ui_events.h 文件
#ifndef _UI_EVENTS_H
#define _UI_EVENTS_H#ifdef __cplusplus
extern "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 <string.h>// 模擬用戶數據庫
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.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)add_library(ui ${SOURCES})
操作:修改項目的CMakeLists.txt
,添加新創建的ui_events.h
和events.c
文件。
第五步:更新 filelist.txt
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
操作:修改filelist.txt
,添加新創建的文件。
第六步:在 SquareStudio 中移除默認事件
- 打開 SquareStudio,加載你的項目
- 找到注冊按鈕
uiButtonRegistration
- 檢查并移除在 SquareStudio 中為該按鈕設置的所有事件(特別是點擊事件)
- 對登錄按鈕
uiButtonLogin
執行相同操作 - 確保
Panel3
和Panel6
的初始狀態設置為隱藏
功能說明
實現后的功能如下:
注冊流程:
- 用戶輸入用戶名和密碼
- 點擊注冊按鈕
- 系統驗證輸入:
- 若輸入為空,顯示
Panel6
(錯誤提示)3 秒 - 若用戶名已存在,顯示
Panel6
(錯誤提示)3 秒 - 若注冊成功,顯示
Panel3
(成功提示)2 秒,然后跳轉到welcomeUI
頁面
- 若輸入為空,顯示
登錄流程:
- 用戶輸入用戶名和密碼
- 點擊登錄按鈕
- 系統驗證憑據:
- 若驗證成功,顯示
Panel3
(成功提示)2 秒,然后跳轉到welcomeUI
頁面 - 若驗證失敗,顯示
Panel6
(錯誤提示)3 秒
- 若驗證成功,顯示
所有流程結束后都會清空輸入框
測試步驟
- 編譯并運行項目
- 測試注冊功能:
- 不輸入任何內容點擊注冊 → 應顯示錯誤面板
- 輸入已存在的用戶名 → 應顯示錯誤面板
- 輸入新用戶名和密碼 → 應顯示成功面板,然后跳轉
- 測試登錄功能:
- 使用剛注冊的賬號登錄 → 應成功跳轉
- 使用錯誤的賬號或密碼 → 應顯示錯誤面板
這個方案應該能解決你遇到的按鈕同時執行多個動作的問題,并提供完整的注冊登錄功能。如果還有任何問題,請告訴我具體的錯誤現象或行為。