EEZ Studio（LVGL 9.5.0）：控件中文汉字显示成方块

1. EEZ Studio 简介与安装本文环境WindowsEEZ Studio 约 0.28.0LVGL 9.5.0示例工程名 app。后面会建工程、设分辨率、加文本 / 中文字体 / 图片再 Build 导出并接到 LVGL。它是什么EEZ Studio 在 PC 上画界面导出 LVGL 的 C 源码。开源导出代码可以商用。介绍EEZ Studio | EEZ下载https://github.com/eez-open/studio/releases源码https://github.com/eez-open/studio它不替代显示驱动。板上仍要自己初始化 display / input再调 ui_init()。只用 Studio屏幕不会自己亮。本文用模板 LVGL不用 LVGL with EEZ Flow。纯 LVGL 导出后调 ui_init() / ui_tick() 即可选了 Flow 还要自己补 action_xxx 一类回调和这次目标无关。Windows 安装打开上面的下载地址下最新的 EEZ-Studio-Setup-*.exe。文档写的时候是 0.28.x这一支 LVGL 相关修复比较多和本文的 9.5.0 对得上。不要下.AppImageLinux.dmg / .pkgMacSource code zip那是源码不是安装包双击 exe按向导装完从开始菜单打开。装好后不必先改全局设置下一节直接 New Project。若已安装但版本过旧同样从 Releases 下新的 Setup 覆盖即可先确认工程里的 LVGL version 仍是 9.5.0不要和板端差一个大版本。2. 新建 LVGL 工程安装完后打开 EEZ Studio启动页点 New Project。模板选 LVGL工程名可用 appLVGL version 选 9.5.0设好路径后点绿色 Create Project。创建成功后进入 Edit 模式默认 Main 页画布中间默认显示「Hello, world!」。3. 添加文本Label右下 Widgets → 拖 Label 到画布。选中 Label → SPECIFIC → Text 输入文字。输入自定义的文字常用属性属性说明Text显示内容SPECIFICFont在 STYLE → TEXT 中设置字号由字体资源决定Long modeWRAP / DOT / SCROLL 等Text colorSTYLE → TEXTSPECIFIC → Text 输入中文汉字「测试」画布却是 □□。英文正常中文是方块。默认字体只有 ASCII。要用汉字得导入字库并把用到的字写进 Symbols。添加中文字体软件不会嵌入整本中文字库只生成 Ranges Symbols 里声明过的字符。这里用阿里巴巴普惠体 3.0免费选其中的 .ttf 再导入 Fonts。文件名里的 35、55 是字重不是字号。不要把 zip 直接丢进 EEZ。添加中文字体方法右边 Fonts → 新建字体 → 填字体名 → 选本地 TTFFont file→ OK等列表里出现该字体。这里没有设置字体的大小默认字体大小为14。可以再添加字体时将使用到的汉字也一并添加字体添加成功以后不会自动套到控件上要先在 Fonts 里点刚加的字体把用到的汉字写入 Symbols如果后续需要添加新的汉字时可以点击添加到字体然后再弹出的界面中添加Symbols 有了Label 也不会马上变中文还要选中控件把 Font 改成刚加的那份字体。修改完Label 的字体以后汉字才会显示。当时没有修改字体的大小Font size 设的是 14对于大屏幕来说会偏小。要更大字只能再新建一份字体把 Font size 设成 48。新字体也要再填 Symbols不填这份大字里不会有任何汉字。缺字时在字体属性里用 Add or Remove Characters 补。补完后大号中文才能显示。小的字体是14大的字体是48点顶部 Run 预览小字号和大字号中文都正常显示。4. 添加图片Bitmaps加图片分两步先把图进工程再在 Image 控件里用它。右侧竖条 Bitmaps → 弹出 New Bitmap。Name 填 logo。Image 用 … 浏览选磁盘上的文件例如 你的工程目录\logo.png。Color format 一般选 ARGB8888点 OK。不要把图片直接粘贴进对话框。一粘路径会变成 data:image/...;base64Build 会去打开这串字符当文件名报 ui_image_logo.c 一类错误。Properties 里 Image 应是本地路径不是 embedded image。右下 Widgets 拖 Image 到画布选中后 SPECIFIC → Image 选 logo。点 Runlogo 应出现在画布上。资源名用英文图按显示尺寸做好再导。5. 设置屏幕分辨率建议最开始建立工程就设分辨率。我是先加了字和 logo再改成 1920×1080。控件坐标没变画布变大布局会挤到一侧常见是左上我这次整体偏到右上要再对一遍。这次是为了试分辨率事先没管布局当教训看。手边板子 HDMI 接的是 1080P 显示器GUI 要和屏幕一致设成 1920×1080。画布大小由 Display width / Display height 决定必须和目标屏幕或 Full Sim 窗口一致。打开 Settings齿轮或顶部 Settings 标签。左侧 General → 填 Display width / Display height。保存CtrlS。Main 页面的 W/H 也要和 Display 相同。不一样的话点工具栏 Check左下 Checks 会提示不一致。选中左侧 Main → Properties → POSITION AND SIZE把 W/H 改成 1920×1080再 Check 应变 OK。改完分辨率之前摆好的 Label、图片位置会偏在画布上重新对齐一次。Run 一眼就能看出比改之前大。6. Build 导出工具栏 Check勾没有问题以后保存工程CtrlS后点工具栏 Build扳手图标。左下 Output 应显示 Build successfully finished表示 C 代码已生成。产物在 app/src/ui/。接到 Linux 或板端时拷的是这个 src/ui/ 整目录其他的都不要。Full Sim可选没有 Docker 可跳过板端不依赖它。若要用Settings → Build 勾上 Use Docker Desktop再点 Full Sim。Build Logs 里出现 Build files extracted successfully 和 Full Simulator Ready 即成功。Preview 应和 Edit/Run 一致日志里能看到如 1920x1080。7. 导入 Linux LVGL 工程把整个 src/ui/ 拷进 Linux 上的 LVGL 工程不要只拷 ui.c。漏文件常见是中文、图片没了或链接找不到 ui_init。目录里的 eez-flow.cpp 必须编进去否则链接会缺 eez_flow_initui_font_*.c、ui_image_*.c 也要在编译列表里。板上先初始化 display / input再调用 ui_init()循环里配合 lv_timer_handler() 调用 ui_tick()。之后改 UIEEZ 里再 Build用新的 src/ui 整目录覆盖工程里的 ui/重新编译即可。不要拷整个 src也不要带 .docker-build-output。设计的分辨率和屏幕分辨率也对的上