使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十讲)

这一期我们讲解demo中登录、ok按键的回调函数以及界面的美化，以下是上期界面的图片如图所示：

首先点击界面在右侧的工具栏中调配颜色渐变色，具体设置如下图所示：

然后是关于界面内框也就是容器的美化，具体如下图所示：

然后是边框的美化

最终得到美化后的界面：

最后我们右键点击登录按键选择clicked信号添加自定义函数：
逻辑是只要账号或者密码不为空，用户则登录成功。

以下是具体代码：
static bool flag_z=true;
static bool flag_m=true;

void check_v3_z()
{
const char * text = lv_textarea_get_text(guider_ui.screen_v3_z); // 获取输入框中的文本
if (text == NULL || text[0] == ‘\0’) {
flag_z=false;
} else {
flag_z=true;
}
}
void check_v3_m()
{
const char * text = lv_textarea_get_text(guider_ui.screen_v3_m); // 获取输入框中的文本
if (text == NULL || text[0] == ‘\0’) {
flag_m=false;
} else {
flag_m=true;
}
}

void denglu()
{
//检查账号与密码是否有数据
check_v3_z();
check_v3_m();
if(flag_z&flag_m==true)
{
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,true, true);
}
else{
lv_obj_set_pos(guider_ui.screen_msgbox_1, 105, 168);
}
}

接下来是ok按键的回调函数，我们在该界面的初始化代码中添加以下代码即可：
逻辑是当用户点击ok按键时，删除消息框。
// 回调函数定义
static void ok_button_event_handler(lv_event_t * e) {
// 这里编写按钮点击后的处理代码
LV_LOG_USER(“OK button clicked!”);
// 例如关闭消息框：
lv_obj_del(e->current_target); // 删除消息框
}

// 为ok按钮添加事件回调
lv_obj_t * ok_button = lv_msgbox_get_btn(ui->screen_msgbox_1, 0); // 获取ok按钮
lv_obj_add_event_cb(ok_button, ok_button_event_handler, LV_EVENT_CLICKED, NULL); // 添加点击事件回调

下一期讲解其他控件的基础使用以及常用代码。
本文章由威三学社出品
对课程感兴趣可以私信联系