威三电子  

               威三电子

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

2026-07-03 09:31:57

浏览:

这一期我们讲解demo中登录、ok按键的回调函数以及界面的美化,以下是上期界面的图片如图所示:   首先点击界面在右侧的工具栏中调配颜色渐变色,具体设置如下图


         这一期我们讲解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);  // 添加点击事件回调

 

下一期讲解其他控件的基础使用以及常用代码。


本文章由威三学院出品

对课程感兴趣可以私信联系

0
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十讲)
这一期我们讲解demo中登录、ok按键的回调函数以及界面的美化,以下是上期界面的图片如图所示:   首先点击界面在右侧的工具栏中调配颜色渐变色,具体设置如下图
长按图片保存/分享

北京威三电子科技有限公司

突破技术壁垒,芯创智联领航未来

 


北京威三电子科技有限公司 版权所有
京ICP备2026012969号
 

热线:

159-2199-9232

 

图片展示

淘宝店铺:

威三科教

地址:

北京市延庆区辰龙国际6号楼406室

微信公众号:

北京威三电子科技有限公司 

热线:159-2199-9232

淘宝店铺:威三科教

地址:北京市延庆区辰龙国际6号楼406


微信公众号

图片展示
北京威三电子科技有限公司 版权所有| 京ICP备2026012969号
微信公众号
客服中心
热线电话
15921999232
上班时间
周一到周五
二维码
扫码关注
客服中心
热线电话
15921999232
上班时间
周一到周五
二维码
扫码关注
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功!
添加微信好友,详细了解产品
我知道了