使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十讲)
2026/4/10 19:27:41 网站建设 项目流程

这一期讲解的控件是二维码,二维码是一种基于矩阵排列的二维条码技术,它以矩阵的形式存储数据,与传统的条形码相比,二维码可以存储更多的信息,并且能够处理数字、字母和汉字等多种数据类型。二维码由寻像图形、定界符、数据区和校验码等部分组成。其中,寻像图形用于帮助扫描设备定位二维码的边缘,定界符明确二维码的大小和编码区域,数据区则包含了实际的编码信息,校验码则用于错误检测和纠正。
在lvgl中生成二维码需要使用 nayuki 的 QR-Code-generator 码生成器。
以下是在guider的平台使用:

1.lvgl中的二维码使用流程

(1)在 lv_conf.h 中启用 LV_USE_QRCODE 。
(2)函数 lv_qrcode_create() 创建二维码对象,函数 lv_qrcode_update() 以生成二维码。
(3)使用 lv_qrcode_set_size() 和 lv_qrcode_set_dark_color() 或 lv_qrcode_set_light_color()函数修改尺寸和颜色,最后使用 lv_qrcode_update() 以重新生成(刷新)新的二维码。

2.代码
//Write style for screen_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置screen1背景样式 完全不透明 白色背景 无渐变效果
lv_obj_set_style_bg_opa(ui->screen_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write codes screen_1_lottie_1

ui->screen_1_lottie_1 = lv_rlottie_create_from_raw(ui->screen_1, 338, 282, “”);
//设置位置以及大小
lv_obj_set_pos(ui->screen_1_lottie_1, 74, 78);
lv_obj_set_size(ui->screen_1_lottie_1, 338, 282);

//Write style for screen_1_lottie_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_1_lottie_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write codes screen_1_qrcode_1
//创建二维码组件
ui->screen_1_qrcode_1 = lv_qrcode_create(ui->screen_1, 300, lv_color_hex(0x2C3224), lv_color_hex(0xffffff));
//设置二维码内容
const char * screen_1_qrcode_1_data = “https://www.baidu.com/”;
lv_qrcode_update(ui->screen_1_qrcode_1, screen_1_qrcode_1_data, strlen(screen_1_qrcode_1_data));
//设置位置以及大小
lv_obj_set_pos(ui->screen_1_qrcode_1, 87, 92);
lv_obj_set_size(ui->screen_1_qrcode_1, 300, 300);
本文章由威三学社出品
对课程感兴趣可以私信联系

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询