LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)

文章介绍了如何从百度下载.ttf字体文件,将其放入项目assets文件夹,然后在SquareLineStudio中设置字体,包括字体选择、字号、Bpp等参数。当遇到屏幕显示乱码时,需在字体库中添加缺失的字符并保存修改。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先在百度上下载.ttf的字体。下载链接:江城黑体 700W|字体下载(此链接不唯一)

 大约等待2分钟左右。如果不喜欢此字体,也可以下载别的字体。将下载好后的字体重命名(也可省略此步骤),本人下载的字体为黑体,重命名为黑体(字体文件可以有中文)。

 将下载后的字体复制到项目的assets文件夹里面。(本人新创建的项目项目在E盘lvgl_demo文件夹中。(E:\lvgl_demo))

 打开SquareLine Studio中新建的项目,在窗口的右边来设置字体。

 具体操作如下图所示。

 名称:可以默认,后续为了更好的分辨字体的大小以及分辨率,本人将名称改为Font16b4,含义为16号字体,Bpp为Bpp4。

Select font asset(字体选择):选择相应的字体即可(在此之前,一定要将字体复制到项目的assets文件夹中。

Font size(字体大小):用户设置字体的大小。

Bpp:可默认,也可设置Bpp1---Bpp4,屏幕越大,Bpp数值越小。反之越大。

Letters:默认即可。

Range:默认即可。

Symbols:添加需要输出的字库,如图所示,字库为“你好中国”。(若字库中没有相应文件,在屏幕中显示为乱码)。

Custom:默认即可。

以上操作只是是设置字库的过程。

在窗口的左边来给屏幕添加文字。

点击之后是以下的界面。

如上图所示,先双击屏幕上的文本框,选择inspector选项,在Text中添加需要输入的文字。

 在Text中添加需要输入的文字之后(本次我输入的文字为:“你好小李”),依旧在inspector选项中的STYLE SETTINGS中Text Font打勾,并且选择之前保存好的字体库名称(Font16b4)。

通过屏幕可以看到,“你好”可以正常显示,而小李却显示乱码。遇到这种情况,只需要在字体库中添加相应的字体即可。如下所示。

点击右边设置字体选项(Font Manger),在CREATED FONTS中展开之前设置的字体库,可以看到以前只设置了“你好中国”。想要添加别的库,在其中继续添加即可。

 修改之后点击MODIFY即可。然后再点击inspector选项,乱码的字体便恢复正常。

<think>好的,用户想要了解LVGL入门开发教程。我需要先回忆一下LVGL的基本信息,确保自己了解最新的版本和资源。首先,LVGL是一个轻量级的嵌入式GUI库,适用于微控制器和嵌入式系统。用户可能是刚开始接触嵌入式GUI开发,或者想要将LVGL应用到他们的项目中。 用户的需求是入门教程,所以需要从基础开始,分步骤讲解。我需要考虑他们可能的开发环境,比如常用的硬件平台(如STM32、ESP32)、操作系统(是否使用FreeRTOS等)、以及LVGL的版本。目前最新的是v8.x或v9.x,需要确认文档是否有变化。 接下来,应该包括安装和配置LVGL的步骤,如何移植到目标硬件,以及编写第一个“Hello World”程序。还要提到模拟器的使用,这对没有硬件的用户来说很重要。另外,文档和社区资源是学习的关键,需要推荐官方文档和示例代码。 用户可能遇到的问题包括移植过程中的驱动配置、内存不足、或者显示异常。在教程中需要提醒常见问题及解决方法。此外,是否需要提到LVGL的图形工具,如SquareLine Studio?这对快速设计UI可能有帮助,但可能涉及第三方工具,需要说明。 需要确保回答结构清晰,分步骤,并且提供实际代码示例。同时,按照系统指令,所有行内数学表达式用$...$,独立公式用$$...$$,但LVGL教程可能较少涉及数学公式,所以这部分可能用不上。但需注意中英文标点,使用中文回答,避免Markdown格式。 最后,检查是否有遗漏的重要步骤,比如依赖的库、如何配置显示和输入设备驱动、内存管理的最佳实践等。确保用户能够按照步骤顺利入门,并引导他们进一步学习的资源。</think>以下为LVGL入门开发的分步教程,采用结构清晰的工程化框架说明: 一、环境准备 1. 硬件选择 - 推荐MCU:Cortex-M4/M7级别及以上(主频≥100MHz) - 内存要求:≥64KB RAM(建议128KB+) - 显示屏:支持RGB、SPI或8080接口(240x320分辨率起步) 2. 开发工具链 - 编译器:GCC/ARMCC/IAR - 开发环境:VSCode+PlatformIO/Keil/STM32CubeIDE - 模拟器:LVGL官方PC模拟器(Windows/Linux/macOS通用) 二、工程搭建(以STM32为例) 1. 获取LVGL源码 ```bash git clone --branch v9.1.0 https://github.com/lvgl/lvgl.git ``` 2. 文件结构配置 ``` /my_project ├── Drivers/ # HAL驱动 ├── Core/ ├── LVGL/ # 官方源码 │ ├── src/ │ ├── examples/ │ └── ... ├── lv_conf.h # 配置文件模板 └── Src/main.c ``` 三、关键配置步骤 1. 修改lv_conf.h: ```c #define LV_MEM_SIZE (48U * 1024U) // 内存池配置 #define LV_HOR_RES_MAX 480 // 水平分辨率 #define LV_VER_RES_MAX 320 // 垂直分辨率 #define LV_USE_LOG 1 // 启用日志系统 ``` 2. 显示驱动实现(SPI接口示例): ```c void my_flush_cb(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p) { uint16_t w = area->x2 - area->x1 + 1; uint16_t h = area->y2 - area->y1 + 1; ILI9341_SetWindow(area->x1, area->y1, area->x2, area->y2); ILI9341_WritePixels((uint16_t*)color_p, w * h); lv_disp_flush_ready(disp_drv); } ``` 四、第一个GUI程序 ```c void lv_example_btn_1(void) { lv_obj_t * btn = lv_btn_create(lv_scr_act()); lv_obj_set_size(btn, 120, 50); lv_obj_center(btn); lv_obj_t * label = lv_label_create(btn); lv_label_set_text(label, "Click Me!"); lv_obj_center(label); lv_obj_add_event_cb(btn, btn_event_handler, LV_EVENT_CLICKED, NULL); } static void btn_event_handler(lv_event_t * e) { lv_obj_t * label = lv_label_create(lv_scr_act()); lv_label_set_text(label, "Hello LVGL!"); lv_obj_center(label); } ``` 五、最佳实践建议 1. 性能优化 - 启用双帧缓冲(需至少2*屏幕分辨率内存) - 使用LVGL的异步刷新机制 - 启用DMA2D加速(Cortex-M7/M33) 2. 内存管理 - 优先使用lv_mem_alloc()代替malloc() - 对象创建后必须设置parent参数 - 及时使用lv_obj_del()销毁不需要的对象 六、调试工具 1. 内置性能监控: ```c lv_mem_monitor_t mon; lv_mem_monitor(&mon); printf("Used: %d, Frag: %d%%\n", mon.used_pct, mon.frag_pct); ``` 2. 使用LittelvGL官方调试插件: - LV_USE_DEBUG 1 - 内存泄漏检测 - 对象树可视化 七、进阶学习路径 1. 官方资源: - 文档:https://docs.lvgl.io/8.1/ - 示例库:lvgl/demos目录 - 在线API参考:https://lvgl.100ask.net/9.1/ 2. 推荐学习顺序: 基础组件 → 动画系统 → 文件系统集成 → 多语言支持 → 自定义样式开发 → 硬件加速优化 常见问题解决方案: 1. 显示异常:检查lv_conf.h中的颜色深度设置(LV_COLOR_DEPTH) 2. 触控不响应:校准输入设备坐标系统 3. 内存不足:启用LV_MEM_CUSTOM配置自定义内存管理 建议从官方模拟器开始实验,逐步移植到真实硬件。通过LVGL的在线示例生成器(https://sim.lvgl.io/)可快速验证UI设计
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值