基于LVGL的登录界面设计

目录

一、演示

二、前言

三、部件知识 

3.1 图片按钮部件

3.1.1 图片按钮部件的组成

3.1.2 图片的来源

3.1.3  添加/清除的状态

3.1.4  图片按钮部件 API 函数 

3.2 键盘部件(lv_keyboard)

3.2.1 键盘部件的组成

3.2.2 键盘部件的相关知识

3.2.2.1 键盘部件模式

3.2.2.2 指定文本区域 

3.2.2.3 键盘部件 API 函数

四、登录界面的实现

4.1 screen通过图片按钮进入登录界面

4.2 screen_1的登录界面设计 

4.3 screen_2登录后界面的实现

五、总结

一、演示

基于LVGL的登录界面设计

二、前言

        这是一个基于LVGL的登录界面设计，可以通过键盘手动输入密码、图片按钮进入登录界面、记住密码以及自动登录的功能，在此之前，我已经讲解过该项目的部分部件，我们可以去跳转。LVGL部件篇：按钮部件(lv_btn)-CSDN博客文章浏览阅读1.2k次，点赞22次，收藏21次。在实际的LVGL项目工程中，按钮部件的使用频率是非常高的，它常用于控制设备的启停。在 LVGL中，当按钮部件被创建出来之后，其默认是一个圆角矩形，较为遗憾的是，按钮部件并不能直接设置文本。按钮部件(lv_btn)仅有一个组成部分：主体背景，示意图如下：关于部件样式设置的内容，请大家看我。 https://blog.csdn.net/m0_74676415/article/details/144822177?fromshare=blogdetail&sharetype=blogdetail&sharerId=144822177&sharerefer=PC&sharesource=m0_74676415&sharefrom=from_link、LVGL部件篇：复选框部件(lv_checkbox)_lvgl 复选框-CSDN博客、文章浏览阅读941次，点赞28次，收藏16次。复选框部件常用于条款、协议的确定，以及一些多选项控制的场景。勾选框：LV_PART_INDICATOR)关于部件样式设置的内容，请大家去看。_lvgl 复选框 https://blog.csdn.net/m0_74676415/article/details/144866782?fromshare=blogdetail&sharetype=blogdetail&sharerId=144866782&sharerefer=PC&sharesource=m0_74676415&sharefrom=from_link        LVGL部件篇：标签部件(lv_label)-CSDN博客文章浏览阅读1.3k次，点赞29次，收藏12次。在LVGL中，标签部件常用于文本显示，例如标题、提示文本等。这个是最简单的，但是也是最为常用的。标签部件由三个部分组成：主体背景、滚动条和所选文本。各组成部分的相关枚举如下所示：① 主体背景；② 滚动条；③ 所选文本。关于部件样式设置的内容，可以看。 https://blog.csdn.net/m0_74676415/article/details/144823923?fromshare=blogdetail&sharetype=blogdetail&sharerId=144823923&sharerefer=PC&sharesource=m0_74676415&sharefrom=from_link        LVGL实战训练——计算器实现-CSDN博客文章浏览阅读943次，点赞29次，收藏22次。我们之前在我的LVGL专栏里面讲了部分控件（LVGL专栏），我们这里决定把部件知识用到实战中，在实战中来学习LVGL各个部件的使用，这里我们利用CodeBlock这个模拟器，使用LVGL来设计出一个计算器，我们看一下演示的视频，视频如下。模拟器上用LVGL实现计算器功能这个计算器涉及了多个部件以及计算器管理的算法，个人觉得非常有意思，大家可以跟着讲解来进行复刻，需要模拟器工程的，在评论区留下邮箱即可。_lvgl https://blog.csdn.net/m0_74676415/article/details/147259350?fromshare=blogdetail&sharetype=blogdetail&sharerId=147259350&sharerefer=PC&sharesource=m0_74676415&sharefrom=from_link        该篇我们会把之前没讲过的控件在这里讲解一次（图片按钮），以及会把我们这个项目的逻辑部分给大家进行讲解。

三、部件知识 

3.1 图片按钮部件

3.1.1 图片按钮部件的组成

图片按钮部件只有一个组成部分：主体 LV_PART_MAIN。

3.1.2 图片的来源
        图片按钮部件支持 C 语言数组或者外部存储器读取图片源，值得注意的是，它并不支持图
标字体。关于这些我们在之前的图片控件篇讲解过： LVGL控件篇：图片部件(lv_img)-CSDN博客

        接下来，我们我们项目的源码来理解图片源的设置，示例代码如下所示：

        在我们的上述源码中，我们首先会调用 lv_imgbtn_create 函数创建图片按钮部件，然后调用
lv_imgbtn_set_src 函数设置图片源，该函数的第二个形参代表按钮的状态（图片何时生效），第三~五个形参为图片源，一般情况下，第三个和第五个形参设置为 NULL。注意：图片源必须声明后才能使用。

        效果如下：

3.1.3  添加/清除的状态

图片按钮部件支持六个状态，如下所示：
① LV_IMGBTN_STATE_RELEASED：释放状态；
② LV_IMGBTN_STATE_PRESSED：按下状态；
③ LV_IMGBTN_STATE_DISABLED：禁用状态；
④ LV_IMGBTN_STATE_CHECKED_RELEASED：点击释放状态；
⑤ LV_IMGBTN_STATE_CHECKED_PRESSED：点击按下状态；
⑥ LV_IMGBTN_STATE_CHECKED_DISABLED：点击禁用状态；
如果用户想清除或者添加上述的状态，可调用 lv_obj_add/clear_state 函数进行设置。

3.1.4  图片按钮部件 API 函数 

LVGL 官方提供了一些与图片按钮部件相关 API，如下表所示：

函数原型作用形参说明
lv_obj_t* lv_imgbtn_create(lv_obj_t* parent, const lv_obj_t* copy)创建一个图片按钮部件parent: 父容器对象指针，用于放置图片按钮。
copy: 复制对象的指针（可选），若不为 NULL，则从该对象复制属性。
void lv_imgbtn_set_src(lv_obj_t* imgbtn, lv_btn_state_t state, const void* src_left, const void* src_mid, const void* src_right)设置图片按钮在特定状态下的左右及中间部分的图片源imgbtn: 图片按钮对象指针。
state: 按钮状态（如 LV_BTN_STATE_RELEASED、LV_BTN_STATE_PRESSED 等）。
src_left: 左侧图片源路径或指针（NULL 表示不显示）。
src_mid: 中间图片源路径或指针（NULL 表示不显示）。
src_right: 右侧图片源路径或指针（NULL 表示不显示）。
void lv_imgbtn_set_state(lv_obj_t* imgbtn, lv_btn_state_t state)设置图片按钮的当前状态（如激活、按下、禁用等）imgbtn: 图片按钮对象指针。
state: 目标状态（如 LV_BTN_STATE_DISABLED）。
const void* lv_imgbtn_get_src_left(lv_obj_t* imgbtn, lv_btn_state_t state)获取指定状态下左侧图片源的指针imgbtn: 图片按钮对象指针。
state: 要查询的按钮状态。
const void* lv_imgbtn_get_src_middle(lv_obj_t* imgbtn, lv_btn_state_t state)获取指定状态下中间图片源的指针imgbtn: 图片按钮对象指针。
state: 要查询的按钮状态。
const void* lv_imgbtn_get_src_right(lv_obj_t* imgbtn, lv_btn_state_t state)获取指定状态下右侧图片源的指针imgbtn: 图片按钮对象指针。
state: 要查询的按钮状态。

3.2 键盘部件(lv_keyboard)

键盘部件本质上是一个特殊的按钮矩阵，它具有预定义的键映射和逻辑处理，从而实现文本的输入功能。

3.2.1 键盘部件的组成

键盘部件与按钮矩阵的组成类似，一共有两个部分:
① LV_PART_MAIN：主体背景；
② LV_PART_ITEMS：按钮。

3.2.2 键盘部件的相关知识
3.2.2.1 键盘部件模式

        键盘部件内嵌了多种输入模式：大写字母、小写字母和特殊字符等，用户可以触摸相应的按键进行模式切换。如果用户需要手动切换输入模式，可调用 lv_keyboard_set_mode 函数进行设置，该函数的第二个形参代表要切换的输入模式，这些模式的枚举如下所示：
① LV_KEYBOARD_MODE_TEXT_LOWER：小写字母；
② LV_KEYBOARD_MODE_TEXT_UPPER：大写字母；
③ LV_KEYBOARD_MODE_TEXT_SPECIAL：特殊字符；
④ LV_KEYBOARD_MODE_NUMBER：数字键盘。
默认情况下，键盘部件为 LV_KEYBOARD_MODE_TEXT_LOWER 模式。 

3.2.2.2 指定文本区域 

    在默认的情况下，键盘部件没有与任何输入框关联，此时，即使用户输入内容，这些内容并不会更新到输入框中，因此，如果我们想要把键盘输入的内容传入在文本区域部件当中，就必须调用 lv_keyboard_set_textarea 函数，把键盘和文本区域部件关联起来。
    接下来，我们以简单示例来理解键盘和文本框的关联，示例代码如下所示：

        在上述源码中，我们先创建键盘部件和文本区域部件，最后调用 lv_keyboard_set_textarea 函数，为键盘指定一个文本区域，这样即可将它们关联起来。 

3.2.2.3 键盘部件 API 函数

LVGL 官方提供了一些与键盘部件相关 API，如下表所示：

函数原型作用形参说明
lv_obj_t* lv_keyboard_create(lv_obj_t* parent, const lv_obj_t* copy)创建键盘部件parent: 父容器对象指针。
copy: 复制对象指针（可选，NULL 表示不复制）。
void lv_keyboard_set_textarea(lv_obj_t* kb, lv_obj_t* ta)关联键盘到指定文本区域kb: 键盘对象指针。
ta: 目标文本区域对象指针（NULL 表示解绑）。
void lv_keyboard_set_mode(lv_obj_t* kb, lv_keyboard_mode_t mode)设置键盘模式（如数字、文本大写等）kb: 键盘对象指针。
mode: 模式值（如 LV_KEYBOARD_MODE_TEXT_LOWER）。
void lv_keyboard_set_popovers(lv_obj_t* kb, bool en)启用或禁用按键长按弹窗kb: 键盘对象指针。
en: true 启用弹窗，false 禁用。
void lv_keyboard_set_map(lv_obj_t* kb, lv_keyboard_mode_t mode, const char* map[], const lv_btnmatrix_ctrl_t ctrl_map[])设置指定模式的按键映射kb: 键盘对象指针。
mode: 目标模式。
map: 按键文本数组。
ctrl_map: 按键控制标志数组。
lv_obj_t* lv_keyboard_get_textarea(const lv_obj_t* kb)获取关联的文本区域对象kb: 键盘对象指针。
lv_keyboard_mode_t lv_keyboard_get_mode(const lv_obj_t* kb)获取当前键盘模式kb: 键盘对象指针。
bool lv_btnmatrix_get_popovers(const lv_obj_t* btnm)判断按键弹窗是否启用btnm: 按钮矩阵对象指针（键盘内部基于按钮矩阵）。
const char** lv_keyboard_get_map_array(const lv_obj_t* kb)获取当前按键映射的文本数组kb: 键盘对象指针。
uint16_t lv_keyboard_get_selected_btn(const lv_obj_t* kb)获取当前按下按键的索引kb: 键盘对象指针。
const char* lv_keyboard_get_btn_text(const lv_obj_t* kb, uint16_t btn_id)获取指定按键的文本内容kb: 键盘对象指针。
btn_id: 按键索引。
void lv_keyboard_def_event_cb(lv_event_t* e)默认键盘事件回调（处理输入和模式切换）e: 事件对象指针（含事件类型和用户数据）。

四、登录界面的实现

4.1 screen通过图片按钮进入登录界面

创建一个图片按钮的控件，并对其基础样式进行设置，然后初始化事件回调。

void setup_scr_screen(lv_ui *ui)
{//Write codes screenui->screen = lv_obj_create(NULL);lv_obj_set_size(ui->screen, 480, 272);lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_imgbtn_1ui->screen_imgbtn_1 = lv_imgbtn_create(ui->screen);lv_obj_add_flag(ui->screen_imgbtn_1, LV_OBJ_FLAG_CHECKABLE);lv_imgbtn_set_src(ui->screen_imgbtn_1, LV_IMGBTN_STATE_RELEASED, NULL, &_1_alpha_200x200, NULL);ui->screen_imgbtn_1_label = lv_label_create(ui->screen_imgbtn_1);lv_label_set_text(ui->screen_imgbtn_1_label, "");lv_label_set_long_mode(ui->screen_imgbtn_1_label, LV_LABEL_LONG_WRAP);lv_obj_align(ui->screen_imgbtn_1_label, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_pad_all(ui->screen_imgbtn_1, 0, LV_STATE_DEFAULT);lv_obj_set_pos(ui->screen_imgbtn_1, 141, 27);lv_obj_set_size(ui->screen_imgbtn_1, 200, 200);//Write style for screen_imgbtn_1, Part: LV_PART_MAIN, State: LV_STATE_PRESSED.lv_obj_set_style_img_recolor_opa(ui->screen_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_img_opa(ui->screen_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_text_color(ui->screen_imgbtn_1, lv_color_hex(0xFF33FF), LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_text_font(ui->screen_imgbtn_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_text_opa(ui->screen_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_shadow_width(ui->screen_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_PRESSED);//Write style for screen_imgbtn_1, Part: LV_PART_MAIN, State: LV_STATE_CHECKED.lv_obj_set_style_img_recolor_opa(ui->screen_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_CHECKED);lv_obj_set_style_img_opa(ui->screen_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_CHECKED);lv_obj_set_style_text_color(ui->screen_imgbtn_1, lv_color_hex(0xFF33FF), LV_PART_MAIN|LV_STATE_CHECKED);lv_obj_set_style_text_font(ui->screen_imgbtn_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_CHECKED);lv_obj_set_style_text_opa(ui->screen_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_CHECKED);lv_obj_set_style_shadow_width(ui->screen_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_CHECKED);//Write style for screen_imgbtn_1, Part: LV_PART_MAIN, State: LV_IMGBTN_STATE_RELEASED.lv_obj_set_style_img_recolor_opa(ui->screen_imgbtn_1, 0, LV_PART_MAIN|LV_IMGBTN_STATE_RELEASED);lv_obj_set_style_img_opa(ui->screen_imgbtn_1, 255, LV_PART_MAIN|LV_IMGBTN_STATE_RELEASED);//The custom code of screen.//Update current screen layout.lv_obj_update_layout(ui->screen);//Init events for screen.events_init_screen(ui);
}

对图片按钮按下后触发的事件进行处理，即切换到登录界面。

void events_init_screen (lv_ui *ui)
{lv_obj_add_event_cb(ui->screen_imgbtn_1, screen_imgbtn_1_event_handler, LV_EVENT_ALL, ui);
}static void screen_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_PRESSED:{ui_load_scr_animation(&guider_ui, &guider_ui.screen_2, guider_ui.screen_2_del, &guider_ui.screen_1_del, setup_scr_screen_2, LV_SCR_LOAD_ANIM_NONE, 200, 200, false, true);break;}default:break;}
}

4.2 screen_1的登录界面设计 

        代码依旧非常常规，首先在父对象中不断的创建对应的子对象，然后对子对象的样式进行设置，最后对部分控件进行事件初始化。

        这里有几个需要注意的地方，首先是我们初始化了三个全局变量来存取密码、是否去记住密码和是否自动登录，他们分别要在登录界面的初始化中起作用，我们去初始化文本框的时候需要调用lv_textarea_set_text(ui->screen_1_ta_1,saved_password);来把我们存取到的密码放在文本框中，复选框中需要去判断全局变量 remember_password、auto_login，然后调用lv_obj_add_state()、lv_obj_clear_state()，来决定复选框一开始的状态。

extern char saved_password[64];  // 保存的密码
extern bool remember_password ; // 是否记住密码
extern bool auto_login;        // 是否自动登录void setup_scr_screen_1(lv_ui *ui)
{//Write codes screen_1ui->screen_1 = lv_obj_create(NULL);lv_obj_set_size(ui->screen_1, 480, 272);lv_obj_set_scrollbar_mode(ui->screen_1, LV_SCROLLBAR_MODE_OFF);//Write style for screen_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_1_cont_1ui->screen_1_cont_1 = lv_obj_create(ui->screen_1);lv_obj_set_pos(ui->screen_1_cont_1, 3, 2);lv_obj_set_size(ui->screen_1_cont_1, 476, 266);lv_obj_set_scrollbar_mode(ui->screen_1_cont_1, LV_SCROLLBAR_MODE_OFF);//Write style for screen_1_cont_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_border_width(ui->screen_1_cont_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_opa(ui->screen_1_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_color(ui->screen_1_cont_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_side(ui->screen_1_cont_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_cont_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_cont_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_top(ui->screen_1_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_bottom(ui->screen_1_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_1_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_1_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_1_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_1_label_1ui->screen_1_label_1 = lv_label_create(ui->screen_1_cont_1);lv_label_set_text(ui->screen_1_label_1, "User:1812795016@qq.com\n");lv_label_set_long_mode(ui->screen_1_label_1, LV_LABEL_LONG_WRAP);lv_obj_set_pos(ui->screen_1_label_1, 98, 61);lv_obj_set_size(ui->screen_1_label_1, 287, 27);//Write style for screen_1_label_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_border_width(ui->screen_1_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_opa(ui->screen_1_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_color(ui->screen_1_label_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_side(ui->screen_1_label_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_1_label_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_1_label_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_1_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_letter_space(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_line_space(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_1_label_1, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_top(ui->screen_1_label_1, 3, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_bottom(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_1_label_1, 3, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_1_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_1_ta_1ui->screen_1_ta_1 = lv_textarea_create(ui->screen_1_cont_1);lv_textarea_set_text(ui->screen_1_ta_1,saved_password);lv_textarea_set_placeholder_text(ui->screen_1_ta_1, "");lv_textarea_set_password_bullet(ui->screen_1_ta_1, "*");lv_textarea_set_password_mode(ui->screen_1_ta_1, true);lv_textarea_set_one_line(ui->screen_1_ta_1, true);lv_textarea_set_accepted_chars(ui->screen_1_ta_1, "");lv_textarea_set_max_length(ui->screen_1_ta_1, 12);lv_obj_set_scrollbar_mode(ui->screen_1_ta_1, LV_SCROLLBAR_MODE_OFF);lv_obj_set_scroll_dir(ui->screen_1_ta_1, LV_DIR_NONE); // 禁用滚动方向lv_textarea_set_one_line(ui->screen_1_ta_1, true);
#if LV_USE_KEYBOARD != 0 || LV_USE_ZH_KEYBOARD != 0lv_obj_add_event_cb(ui->screen_1_ta_1, ta_event_cb, LV_EVENT_ALL, ui->g_kb_top_layer);
#endiflv_obj_set_pos(ui->screen_1_ta_1, 98, 95);lv_obj_set_size(ui->screen_1_ta_1, 287, 27);//Write style for screen_1_ta_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_text_color(ui->screen_1_ta_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_1_ta_1, &lv_font_montserratMedium_14, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_1_ta_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_letter_space(ui->screen_1_ta_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_1_ta_1, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_ta_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_ta_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_ta_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_1_ta_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_opa(ui->screen_1_ta_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_color(ui->screen_1_ta_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_side(ui->screen_1_ta_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_1_ta_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_top(ui->screen_1_ta_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_1_ta_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_1_ta_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_bottom(ui->screen_1_ta_1, 2, LV_PART_MAIN | LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_ta_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style for screen_1_ta_1, Part: LV_PART_SCROLLBAR, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_1_ta_1, 255, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_ta_1, lv_color_hex(0x2195f6), LV_PART_SCROLLBAR|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_ta_1, LV_GRAD_DIR_NONE, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_ta_1, 0, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);//Write codes screen_1_img_2ui->screen_1_img_2 = lv_img_create(ui->screen_1_cont_1);lv_obj_add_flag(ui->screen_1_img_2, LV_OBJ_FLAG_CLICKABLE);lv_img_set_src(ui->screen_1_img_2, &_user_alpha_58x54);lv_img_set_pivot(ui->screen_1_img_2, 50,50);lv_img_set_angle(ui->screen_1_img_2, 0);lv_obj_set_pos(ui->screen_1_img_2, 209, 3);lv_obj_set_size(ui->screen_1_img_2, 58, 54);//Write style for screen_1_img_2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_img_recolor_opa(ui->screen_1_img_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_img_recolor(ui->screen_1_img_2, lv_color_hex(0x010101), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_img_opa(ui->screen_1_img_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_img_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_clip_corner(ui->screen_1_img_2, true, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_1_cb_1ui->screen_1_cb_1 = lv_checkbox_create(ui->screen_1_cont_1);lv_checkbox_set_text(ui->screen_1_cb_1, "Remember");lv_obj_set_pos(ui->screen_1_cb_1, 258, 145);if(remember_password==true){lv_obj_add_state(ui->screen_1_cb_1, LV_STATE_CHECKED);}else{lv_obj_clear_state(ui->screen_1_cb_1, LV_STATE_CHECKED);}//Write style for screen_1_cb_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_pad_top(ui->screen_1_cb_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_1_cb_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_1_cb_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_bottom(ui->screen_1_cb_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_1_cb_1, lv_color_hex(0x0D3055), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_1_cb_1, &lv_font_montserratMedium_14, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_1_cb_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_letter_space(ui->screen_1_cb_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_1_cb_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_cb_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_cb_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_cb_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_cb_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_1_cb_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style for screen_1_cb_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.lv_obj_set_style_pad_all(ui->screen_1_cb_1, 3, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_1_cb_1, 2, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_opa(ui->screen_1_cb_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_color(ui->screen_1_cb_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_side(ui->screen_1_cb_1, LV_BORDER_SIDE_FULL, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_cb_1, 6, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_cb_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_cb_1, lv_color_hex(0xffffff), LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_cb_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);//Write codes screen_1_cb_2ui->screen_1_cb_2 = lv_checkbox_create(ui->screen_1_cont_1);lv_checkbox_set_text(ui->screen_1_cb_2, "Auto Loading");lv_obj_set_pos(ui->screen_1_cb_2, 101, 144);if(auto_login==true){lv_obj_add_state(ui->screen_1_cb_2, LV_STATE_CHECKED);}else{lv_obj_clear_state(ui->screen_1_cb_2, LV_STATE_CHECKED);}//Write style for screen_1_cb_2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_pad_top(ui->screen_1_cb_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_1_cb_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_1_cb_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_bottom(ui->screen_1_cb_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_1_cb_2, lv_color_hex(0x0D3055), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_1_cb_2, &lv_font_montserratMedium_13, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_1_cb_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_letter_space(ui->screen_1_cb_2, 2, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_1_cb_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_cb_2, 6, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_cb_2, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_cb_2, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_cb_2, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_1_cb_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style for screen_1_cb_2, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.lv_obj_set_style_pad_all(ui->screen_1_cb_2, 3, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_1_cb_2, 2, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_opa(ui->screen_1_cb_2, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_color(ui->screen_1_cb_2, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_border_side(ui->screen_1_cb_2, LV_BORDER_SIDE_FULL, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_cb_2, 6, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_1_cb_2, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_cb_2, lv_color_hex(0xffffff), LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_cb_2, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);//Write codes screen_1_btn_1ui->screen_1_btn_1 = lv_btn_create(ui->screen_1_cont_1);ui->screen_1_btn_1_label = lv_label_create(ui->screen_1_btn_1);lv_label_set_text(ui->screen_1_btn_1_label, "Loading\n");lv_label_set_long_mode(ui->screen_1_btn_1_label, LV_LABEL_LONG_WRAP);lv_obj_align(ui->screen_1_btn_1_label, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_pad_all(ui->screen_1_btn_1, 0, LV_STATE_DEFAULT);lv_obj_set_width(ui->screen_1_btn_1_label, LV_PCT(100));lv_obj_set_pos(ui->screen_1_btn_1, 188, 178);lv_obj_set_size(ui->screen_1_btn_1, 100, 50);//Write style for screen_1_btn_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_1_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_1_btn_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_1_btn_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_1_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_1_btn_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_1_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_1_btn_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_1_btn_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_1_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_1_btn_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);//The custom code of screen_1.//Update current screen layout.lv_obj_update_layout(ui->screen_1);//Init events for screen.events_init_screen_1(ui);}

对应的基本事件回调如下 ，需要注意的是，我们的自动登录是通过LVGL软件定时器实现的。

static void auto_login_timer_cb(lv_timer_t *timer)
{// 检查 auto_login 状态if (auto_login) {printf("Auto login triggered\n");ui_load_scr_animation(&guider_ui, &guider_ui.screen_2, guider_ui.screen_2_del, &guider_ui.screen_1_del, setup_scr_screen_2, LV_SCR_LOAD_ANIM_NONE, 0, 0, false, true);}// 删除定时器，防止重复触发lv_timer_del(timer);
}static void screen_imgbtn_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{ui_load_scr_animation(&guider_ui, &guider_ui.screen_1, guider_ui.screen_1_del, &guider_ui.screen_del, setup_scr_screen_1, LV_SCR_LOAD_ANIM_NONE, 200, 200, false, true);break;}default:break;}
}void events_init_screen (lv_ui *ui)
{lv_obj_add_event_cb(ui->screen_imgbtn_1, screen_imgbtn_1_event_handler, LV_EVENT_ALL, ui);
}static void screen_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_PRESSED:{ui_load_scr_animation(&guider_ui, &guider_ui.screen_2, guider_ui.screen_2_del, &guider_ui.screen_1_del, setup_scr_screen_2, LV_SCR_LOAD_ANIM_NONE, 200, 200, false, true);break;}default:break;}
}static void screen_1_cb_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_VALUE_CHANGED:{lv_obj_t * status_obj = lv_event_get_target(e);int status = lv_obj_get_state(status_obj) & LV_STATE_CHECKED ? true : false;remember_password=status;break;}default:break;}
}static void screen_1_cb_2_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_VALUE_CHANGED:{lv_obj_t * status_obj = lv_event_get_target(e);int status = lv_obj_get_state(status_obj) & LV_STATE_CHECKED ? true : false;auto_login=status;break;}default:break;}
}static void screen_1_btn_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{// 获取用户名和密码const char *password = lv_textarea_get_text(guider_ui.screen_1_ta_1);// 如果选择记住密码，保存用户名和密码if (remember_password) {strncpy(saved_password, password, sizeof(saved_password) - 1);} else {// 如果未选择记住密码，清空保存的数据saved_password[0] = '\0';}ui_load_scr_animation(&guider_ui, &guider_ui.screen_2, guider_ui.screen_2_del, &guider_ui.screen_1_del, setup_scr_screen_2, LV_SCR_LOAD_ANIM_NONE, 0, 0, false, true);break;}default:break;}
}void events_init_screen_1 (lv_ui *ui)
{lv_obj_add_event_cb(ui->screen_1, screen_1_event_handler, LV_EVENT_ALL, ui);lv_obj_add_event_cb(ui->screen_1_cb_1, screen_1_cb_1_event_handler, LV_EVENT_ALL, ui);lv_obj_add_event_cb(ui->screen_1_cb_2, screen_1_cb_2_event_handler, LV_EVENT_ALL, ui);lv_obj_add_event_cb(ui->screen_1_btn_1, screen_1_btn_1_event_handler, LV_EVENT_ALL, ui);// 如果勾选了自动登录，创建一个定时器if (auto_login) {lv_timer_t *timer = lv_timer_create(auto_login_timer_cb, 2000, NULL); // 2 秒后触发printf("Auto login timer created\n");}
}

 键盘与文本框的交互如下：

__attribute__((unused)) void kb_event_cb (lv_event_t *e) {lv_event_code_t code = lv_event_get_code(e);lv_obj_t *kb = lv_event_get_target(e);if(code == LV_EVENT_READY || code == LV_EVENT_CANCEL) {lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);}
}__attribute__((unused)) void ta_event_cb (lv_event_t *e) {lv_event_code_t code = lv_event_get_code(e);
#if LV_USE_KEYBOARD || LV_USE_ZH_KEYBOARDlv_obj_t *ta = lv_event_get_target(e);
#endiflv_obj_t *kb = lv_event_get_user_data(e);if (code == LV_EVENT_FOCUSED || code == LV_EVENT_CLICKED){
#if LV_USE_ZH_KEYBOARD != 0lv_zh_keyboard_set_textarea(kb, ta);
#endif
#if LV_USE_KEYBOARD != 0lv_keyboard_set_textarea(kb, ta);
#endiflv_obj_move_foreground(kb);lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);}if (code == LV_EVENT_CANCEL || code == LV_EVENT_DEFOCUSED){#if LV_USE_ZH_KEYBOARD != 0lv_zh_keyboard_set_textarea(kb, ta);
#endif
#if LV_USE_KEYBOARD != 0lv_keyboard_set_textarea(kb, ta);
#endiflv_obj_move_background(kb);lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);}
}

4.3 screen_2登录后界面的实现

开始同样非常常规，创建对应的组件，然后对其样式进行设置，然后注册回调函数。

void setup_scr_screen_2(lv_ui *ui)
{//Write codes screen_2ui->screen_2 = lv_obj_create(NULL);lv_obj_set_size(ui->screen_2, 480, 272);lv_obj_set_scrollbar_mode(ui->screen_2, LV_SCROLLBAR_MODE_OFF);//Write style for screen_2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_2_img_1ui->screen_2_img_1 = lv_img_create(ui->screen_2);lv_obj_add_flag(ui->screen_2_img_1, LV_OBJ_FLAG_CLICKABLE);lv_img_set_src(ui->screen_2_img_1, &_2_alpha_475x267);lv_img_set_pivot(ui->screen_2_img_1, 50,50);lv_img_set_angle(ui->screen_2_img_1, 0);lv_obj_set_pos(ui->screen_2_img_1, 4, 1);lv_obj_set_size(ui->screen_2_img_1, 475, 267);//Write style for screen_2_img_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_img_recolor_opa(ui->screen_2_img_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_img_opa(ui->screen_2_img_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_2_img_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_clip_corner(ui->screen_2_img_1, true, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_2_btn_1ui->screen_2_btn_1 = lv_btn_create(ui->screen_2);ui->screen_2_btn_1_label = lv_label_create(ui->screen_2_btn_1);lv_label_set_text(ui->screen_2_btn_1_label, "Back Home");lv_label_set_long_mode(ui->screen_2_btn_1_label, LV_LABEL_LONG_WRAP);lv_obj_align(ui->screen_2_btn_1_label, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_pad_all(ui->screen_2_btn_1, 0, LV_STATE_DEFAULT);lv_obj_set_width(ui->screen_2_btn_1_label, LV_PCT(100));lv_obj_set_pos(ui->screen_2_btn_1, 199, 184);lv_obj_set_size(ui->screen_2_btn_1, 100, 50);//Write style for screen_2_btn_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_2_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_2_btn_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_2_btn_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_2_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_2_btn_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_2_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_2_btn_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_2_btn_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_2_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_2_btn_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);//The custom code of screen_2.//Update current screen layout.lv_obj_update_layout(ui->screen_2);//Init events for screen.events_init_screen_2(ui);
}

回调函数如下，就是按下按钮之后，就返回到登录界面。

static void screen_2_btn_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{ui_load_scr_animation(&guider_ui, &guider_ui.screen_1, guider_ui.screen_1_del, &guider_ui.screen_2_del, setup_scr_screen_1, LV_SCR_LOAD_ANIM_NONE, 0, 0, false, true);break;}default:break;}
}void events_init_screen_2 (lv_ui *ui)
{lv_obj_add_event_cb(ui->screen_2_btn_1, screen_2_btn_1_event_handler, LV_EVENT_ALL, ui);
}

五、总结

        之所以会去做这个界面，是因为这个界面非常的常用，如果产品需要与人交互的情况下，登录界面的意义就非常大，个人觉得非常有意思，大家可以跟着讲解来进行复刻，需要模拟器工程的，在评论区留下邮箱即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/78465.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

S3 跨账户复制：增强云中的灾难恢复计划

S3 跨账户复制：增强云中的灾难恢复计划

您准备好提升您的云和 DevOps 技能了吗？ 🐥《云原生devops》专门为您打造，我们精心打造的 30 篇文章库，这些文章涵盖了 Azure、AWS 和 DevOps 方法论的众多重要主题。无论您是希望精进专业知识的资深专业人士，还是渴望…
阅读更多...
线程与进程深度解析：从fork行为到生产者-消费者模型

线程与进程深度解析：从fork行为到生产者-消费者模型

线程与进程深度解析：从fork行为到生产者-消费者模型 一、多线程环境下的fork行为与线程安全 1. 多线程程序中fork的特殊性 核心问题：fork后子进程的线程模型 当多线程程序中的某个线程调用fork时： 子进程仅包含调用fork的线程&#xff1…
阅读更多...
Circular Plot系列(五): circle plot展示单细胞互作

Circular Plot系列(五): circle plot展示单细胞互作

这是我们circle系列的最后一节，我想常见的弦图是绕不开的，所以最后从前面介绍的circle plot思路，做一遍弦图。其实前面的内容如果消化了，plot互作弦图也就不成什么问题了。 效果如下： #cellchat提取互作结果&#xff…
阅读更多...
（11）Vue-Router路由的详细使用

（11）Vue-Router路由的详细使用

本系列教程目录：Vue3Element Plus全套学习笔记-目录大纲 文章目录 第2章 路由 Vue-Router2.1 Vue路由快速入门2.1.1 创建项目2.1.2 路由运行流程 2.2 传递参数-useRoute2.2.1 路径参数-params1）普通传参2）传递多个参数3）对象方式传…
阅读更多...
react + antd 实现后台管理系统

react + antd 实现后台管理系统

文章目录 完整路由搭建Layout 和 Aside组件引入 AntdAside组件实现 项目效果图 项目完整代码地址 https://gitee.com/lyh1999/react-back-management 项目完整代码地址 react依赖安装 最好采用yarn 安装 react-router 安装依赖 配置路由 history模式 / // src/router/…
阅读更多...
基于AWS Marketplace的快速解决方案：从选型到部署实战

基于AWS Marketplace的快速解决方案：从选型到部署实战

1. 引言：为什么选择AWS Marketplace？ 在数字化转型的背景下，企业需要快速获取成熟的软件工具和服务以降低开发成本。AWS Marketplace 作为亚马逊云科技的官方应用商店，提供超过万款预配置的第三方和AWS原生解决方案，涵…
阅读更多...
2021年第十二届蓝桥杯省赛B组C++题解

2021年第十二届蓝桥杯省赛B组C++题解

2021年第十二届蓝桥杯省赛B组C题解 关键词：蓝桥杯、省赛、题解、C、算法 一、个人见解 第十二届蓝桥杯省赛B组共有10道题目，包含5道填空题（T1-T5）和5道编程题（T6-T10），总分150分。比赛时长4小…
阅读更多...
日语学习-日语知识点小记-进阶-JLPT-N1阶段（1）：语法单词

日语学习-日语知识点小记-进阶-JLPT-N1阶段（1）：语法单词

日语学习-日语知识点小记-进阶-JLPT-N1阶段（1）：语法单词 1、前言（1）情况说明（2）工程师的信仰（3）高级语法N1语法和难点一、N1语法学习内容（高级语法&#xff…
阅读更多...
Python|Pyppeteer实现自动登录小红书(32)

Python|Pyppeteer实现自动登录小红书(32)

前言 本文是该专栏的第32篇，结合优质项目案例持续分享Pyppeteer的干货知识，记得关注。 本文中，笔者以小红书为例，基于Pyppeteer实现自动登录“小红书”。 需要注意的是，对Pyppeteer不太熟悉的同学，可往前翻阅本专栏前面介绍的Pyppeteer知识点，本专栏将带你了解并熟练使…
阅读更多...
【翻译、转载】【转载】LLM 的函数调用与 MCP

【翻译、转载】【转载】LLM 的函数调用与 MCP

来源： https://www.dailydoseofds.com/p/function-calling-mcp-for-llms/ 【代码以图像显示的是原文内容，以代码形式显示的是大模型给出的参考】 LLM 的函数调用与 MCP 在 MCP 变得像现在这样主流（或流行）之前，大多…
阅读更多...
【QT】QT中http协议和json数据的解析-http获取天气预报

【QT】QT中http协议和json数据的解析-http获取天气预报

QT中http协议和json数据的解析 1.http协议的原理2.QT中http协议的通信流程2.1 方法步骤 3.使用http协议（通过http下载图片和获取天气预报信息）3.1 http下载网络上的图片(下载小文件)3.1.1 示例代码3.1.2 现象 3.2 获取网络上天气预报3.2.1 免费的天气预报…
阅读更多...
hot100:链表倒数k个节点- 力扣(LeetCode)

hot100:链表倒数k个节点- 力扣(LeetCode)

题目： 实现一种算法，找出单向链表中倒数第 k 个节点。返回该链表中倒数第k个节点。 示例一： 输入：{1,2,3,4,5},2 返回值：{4,5} 说明：返回倒数第2个节点4，系统会打印后面所有的节点来比较。 …
阅读更多...
Spring AI 实战：第十一章、Spring AI Agent之知行合一

Spring AI 实战：第十一章、Spring AI Agent之知行合一

引言：智能体的知行辩证法 “知为行之始，行为知之成”，王阳明的哲学智慧在AI时代焕发光彩。智能体（LLM Agent）的进化之路，正是"认知-决策-执行"这一闭环的完美诠释： 知明理：融合大语言模型的推理能力与知识图谱的结构化认知行致用：基于ReAct模式的动态工具调…
阅读更多...
365打卡第R6周: LSTM实现糖尿病探索与预测

365打卡第R6周: LSTM实现糖尿病探索与预测

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 🏡 我的环境： 语言环境：Python3.10 编译器：Jupyter Lab 深度学习环境：torch2.5.1 torchvision0…
阅读更多...
W-TinyLFU缓存驱逐算法解析

W-TinyLFU缓存驱逐算法解析

文章目录 1. 背景与概述1.1 什么是缓存驱逐算法1.2 W-TinyLFU 的定义与价值 2. 核心思想与设计理念2.1 时间局部性与频率局部性的结合2.2 高效的频率统计2.3 窗口机制的引入 3. 架构设计与组件3.1 整体架构3.2 窗口缓存（Window Cache）3.3 主缓存&#xf…
阅读更多...
[特殊字符] 人工智能大模型之开源大语言模型汇总（国内外开源项目模型汇总） [特殊字符]

[特殊字符] 人工智能大模型之开源大语言模型汇总（国内外开源项目模型汇总） [特殊字符]

Large Language Model (LLM) 即大规模语言模型，是一种基于深度学习的自然语言处理模型，它能够学习到自然语言的语法和语义，从而可以生成人类可读的文本。 所谓 "语言模型"，就是只用来处理语言文字（或者符号…
阅读更多...
文章记单词 | 第60篇（六级）

文章记单词 | 第60篇（六级）

一，单词释义 liar：英 [ˈlaɪə(r)]；美 [ˈlaɪər]；n. 说谎者verbal：英 [ˈvɜːbl]；美 [ˈvɜːrbl]；adj. 言语的；文字的；口头的；动词的comprehension&…
阅读更多...
AI日报 · 2025年04月30日｜OpenAI 回滚 GPT-4o 更新以解决“谄媚”问题

AI日报 · 2025年04月30日｜OpenAI 回滚 GPT-4o 更新以解决“谄媚”问题

过去24小时，全球人工智能领域持续快速发展。从模型行为调整到平台工具更新，再到行业安全规范的探讨，以下是为您精选的重点动态： 1、OpenAI 回滚 GPT-4o 更新以解决“谄媚”问题 针对用户反馈最新版 GPT-4o 模型表现出过度“谄媚…
阅读更多...
Linux54 源码包的安装、修改环境变量解决 axel命令找不到；getfacl；测试

Linux54 源码包的安装、修改环境变量解决 axel命令找不到；getfacl；测试

始终报错 . 补充链接 tinfo 库时报错软件包 ncurses-devel-5.9-14.20130511.el7_4.x86_64 已安装并且是最新版本 没有可用软件包 tinfo-devel。 无须任何处理 make LDLIBS“-lncurses"报错编译时报错make LDLIBS”-lncurses" ？ /opt/rh/devtoolset-11/roo…
阅读更多...
FPGA----基于ZYNQ 7020实现EPICS通信系统

FPGA----基于ZYNQ 7020实现EPICS通信系统

1、本实验过程来自博b站大神《神电测控》，原文地址： EPICS实战(上位机篇)：基于LV ZYNQ实现的EPICS通信系统(大物理) - 哔哩哔哩https://www.bilibili.com/opus/933476043369480224EPICS实战(下位机篇)：基于LV ZYNQ实现的EPICS通信…
阅读更多...
最新文章

Copyright @ 2022~2023