营销型网站建设的利与弊搜狐财经峰会直播
目录
前置篇章：
一.问题背景
二.失败方案
三.成功方案
1.Gui guider的源码结构
2.手动生成字体
3.Keil中配置相关文件
编辑
4.修改文字
四.字体样式函数说明
前置篇章：
【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)_lvgl 菜鸟教程-CSDN博客
一.问题背景
笔者最近在学习LVGL框架，同时准备使用该框架作为课程设计的一部分，于是需要从静态显示进阶到动态显示以及事件交互。一方面由于笔者是初次接触LVGL，对它并不熟悉，另一方面由于其网络上的针对性具体资料太少，所以学习效率很低。
由于上一篇文章笔者完成了很基础的静态界面设计和移植。于是此次便向原有工程上先进行试验，先将原有文本改成可以动态变化的文本。
二.失败方案
笔者一开始选择使用设置Label属性中的setText函数对文本进行设置，在主函数中加入这个函数以为能够修改文本值：
lv_label_set_text(guider_ui.screen_label_1, "6");
结果：
除了屏幕中的一个白框之外，文本全部消失不见。
然后笔者又换了很多不同的位置，无论是将这句放到主函数还是界面ui函数中，显示均不能正常。无关乎位置以及数量，修改之后显示的均为白框。
最后笔者观察发现为字库问题，后验证了成功方案。
三.成功方案
1.Gui guider的源码结构
首先我们要清楚的是GUI guider这个设计工具生成出来的源码结构构成。其生成的src文件夹下包含两个文件夹：
其中：
- custom文件夹包含由用户进行自由操作的文件，主要完成用户特定的功能实现。
- generated文件夹包含由Gui guider生成的源文件，其中部分是用户设计的界面数据，部分是字库数据和控件数据，还有一些接入LVGL的接口
这个文件夹下包含的就是我们设计且使用了的字库文件（即UI界面上的文字数据）这个文件包含了我们用户生成的字库文件（生成但未使用），也就是说我们再使用某个自定义字体文字时需要先手动生成，这里也是笔者踩坑的地方。
这里包含的是用户设计的界面函数
这里包含的是Gui guider工具生成所有源码的外部接口，调用这里的函数即可绘制界面。
2.手动生成字体
前面强调过，在我们使用某个字体时（特别是自己导入的自定义字体）一定一定要先在Gui guider中生成字体。
输入想要生成的字体后看到以下提示即为成功：
生成的字库文件全部在这个文件夹里：
3.Keil中配置相关文件
向管理器中添加我们生成的字库文件：
点开文件能很清楚地看到我们自己生成的文字数据：
一般来说UI中已经设计使用的字体都会在gui_guider.h中进行声明，如：
//声明图片
LV_IMG_DECLARE(_cloudblack_alpha_160x128);
LV_IMG_DECLARE(_1693149324150_alpha_58x57);//声明文字
LV_FONT_DECLARE(lv_font_YunFeng_24)
LV_FONT_DECLARE(lv_font_montserratMedium_16)
函数原型为：
#define LV_FONT_DECLARE(font_name) extern const lv_font_t font_name;如果想要使用刚刚生成的文字的话需要在这里手动声明：
4.修改文字
完成以上工作后我们就可以在我们自己的代码里自由修改文字了。
lv_label_set_text(ui->screen_label_1, "难逃爱意");
lv_obj_set_style_text_font(ui->screen_label_1, &lv_font_YunFeng_24, LV_PART_MAIN|LV_STATE_DEFAULT);
四.字体样式函数说明
最后对setup_scr_screen.c中的以下有关文字的函数做一个说明：
lv_obj_set_style_bg_opa(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置背景的不透明度（opa）为0，即完全透明。
LV_PART_MAIN指定样式应用于整个对象，LV_STATE_DEFAULT指定样式应用于对象的默认状态。
lv_obj_set_style_border_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置边框的宽度为0，这意味着对象不会有边框。同样，样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_radius(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置对象的圆角半径为0，这意味着对象不会有圆角。该样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_shadow_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置对象阴影的宽度为0，即对象不会有阴影。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_text_color(ui->screen_label_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置文本颜色为白色（十六进制值为
0xffffff）。该样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_text_font(ui->screen_label_1, &lv_font_YunFeng_24, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置文本字体为
lv_font_YunFeng_24，这是LVGL支持的字体之一。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_text_opa(ui->screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置文本的不透明度为255，即文本完全不透明。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_text_letter_space(ui->screen_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置文本中字母之间的间距为2个像素。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_text_line_space(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置文本行之间的间距为0个像素。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_text_align(ui->screen_label_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置文本对齐方式为居中对齐。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_pad_top(ui->screen_label_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置对象顶部内边距为8个像素。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_pad_right(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置对象右侧内边距为0个像素。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_pad_bottom(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置对象底部内边距为0个像素。样式应用于整个对象并在默认状态下生效。
lv_obj_set_style_pad_left(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
- 设置对象左侧内边距为0个像素。样式应用于整个对象并在默认状态下生效。