使用GUI Guider工具开发嵌入式GUI应用 (3) - 使用label组件

GUIGuider教程：嵌入式GUI应用中使用LVGLlabel组件,

最新推荐文章于 2025-04-17 21:15:51 发布

原创

最新推荐文章于 2025-04-17 21:15:51 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #嵌入式系统 #GUI #LVGL

本文详细介绍了如何在GUIGuider中创建和配置LVGL的label组件，包括添加、编辑属性、生成源码并将其集成到Keil工程中，最后预览和部署到MCU开发板上显示字符信息。

使用GUI Guider工具开发嵌入式GUI应用 (3) - 使用label组件

文章目录

使用GUI Guider工具开发嵌入式GUI应用 (3) - 使用label组件

引言

本节讲述在GUI Guider中，应用各种UI的基本元素，并顺利部署到MCU的过程。在GUI Guider中使用各LVGL的组件时，将会涉及到GUI Guider的操作，以及将某些组件额外生成的源码添加到Keil工程中。至于具体产品中的UI应用，可以是这些基本UI元素的组合使用，以实现更加丰富的显示效果。

在本文中，将说明使用通过GUI Guider创建并使用LVGL的label组件显示字符信息。

在GUI Guider工程中创建label组件

在新建GUI Guider工程搭建MCU运行时的框架工程时，曾使用了label组件实现在屏幕上显示一个“Hello World”字符串的演示效果。Label是GUI Guider中最简单的组件，可用于显示字符。

当需要为某个页面添加一个显示字符串的对象时，可在编辑区域左边的工具栏中选择label按钮，此时，在组件窗口中就可以看到，当前的页面screen下出现了一个label_1的对象。如图x所示。

在这里插入图片描述

图x 新增label对象

双击在当前页面上出现的label对象，可以在编辑区域的右侧激活该对象的属性设置对话框，如图x所示。在其中，可以执行该对象的名字、位置、文本内容、字体、颜色等属性。当然，既然是在图形编辑界面，对象的位置也可以通过在图形编辑区拖拽对象来调整。

在这里插入图片描述

图x 编辑label对象属性

然后，重新生成代码。在运行时的Keil工程已经包含了静态页面的源文件，因此不用额外再执行添加文件的操作。但实际上，这里新生成的源码位于./gui/generated/setup_scr_screen.c文件中。有源码如下：

/*
 * Copyright 2023 NXP
 * SPDX-License-Identifier: MIT
 * The auto-generated can only be used on NXP devices
 */

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "custom.h"


void setup_scr_screen(lv_ui *ui){
   
   

	//Write codes screen
	ui->screen = lv_obj_create(NULL);
	lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

	//Set style for screen. Part: LV_PART_MAIN, State: LV_STATE_DEFAULT
	lv_obj_set_style_bg_color(ui->screen, lv_color_make(0xff, 0xff, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_c

最低0.47元/天解锁文章