LVGL Pro 使用指南[05]LVGL XML-Screen

本文说明如何使用 LVGL XML 创建和使用 Screen。

概述 链接到标题

Screen 是 LVGL 中一个特殊的概念，你可以把它想象成手机上的一个个​​全屏应用界面​​或网页浏览器中的​​不同标签页。因此将 Screen 直接翻译为屏幕并不合适，在本系列文章中就不做翻译，就叫 Screen。

Sceens 的工作方式和组件非常像似：

  • 可以从 XML 加载
  • 可包含控件 (Widgets) 和组件

Screen 的 XML 文件被包裹在 <screen> XML 根元素中。Screen 只能有以下子 XML 标签：

Screen 不能有以下子 XML 标签：

  • <api>: Screen 按照其本身的内容创建，没有参数。
  • <preview>：<preview> 对于 Screen，预览选项在 project.xml 中定义。

XML 链接到标题

一个 XML 文件描述一个 Screen, XML 的文件名就是 Screen 的名字。下面示例展示在 XML 中的 screen，使用<my_button> 和 <my_group_button> 组件来简化 Screen, 例如 main_screen.xml

<screen permanent="true">
	<view>
		<lv_obj align="center" width="content" height="content" flex_flow="column">
			<my_button my_name="Frank" />
			<my_group_button red_text="r1" green_text="g1" blue_text="b1" />
			<my_group_button red_text="r2" green_text="g2" blue_text="b2" />
			<my_group_button red_text="r3" green_text="g" blue_text="b3" />
		</lv_obj>
	</view>
</screen>

导出代码 链接到标题

XML Editor 可以将 Screen 的 XML 导出为 C 代码，如果 Screen xml 的名称叫 screen_name.xml, 则自动自动产生screen_name_gen.c/h 文件，其中只包含一个 lv_obj_t * screen_name_create(void) 创建函数。可根据需要使用该函数创建任意数量的 Screen 实例。

常驻 (Permanent)Screen 链接到标题

<screen> 只有一个属性 permanent ，可以是 true 或 false（默认）。该属性会影响 Screen 的加载（load）和创建（create）事件。

在加载新 Screen 时，常驻（permanent）Screen 不会被删除，在内存中保持其状态。非常驻（permanent）在打开和关闭时会被自动删除和重新创建。

通常假设常驻（permanent）Screen 在 UI 初始化时就已经创建。当从 XML Editor 导出代码时，常驻（permanent）Screen 会被创建并存储在全局指针中。

对于常驻（permanent）Screen，只需通过 <screen_load_event screen="my_permanent_screen"/> 加载即可；而非常驻（permanent）Screen 则需要通过 <screen_create_event screen="my_non_permanent_screen"/> 创建。

<preview> 链接到标题

Screen 不支持 <preview> 标签，因此 Screen 在不同分辨率下进行预览没有实际意义。

由于 Screen 与 project.xml 文件中的目标硬件以及定义的多 <display> 元素相关。在 XML Editor 中开发 Screen 时，用户可以在预览窗口中选择所有已定义的 displays，Screen 将以所选的分辨率和颜色深度显示。这对于验证响应式设计非常有用。

例如在 project.xml 内容如下

<project>
	<targets>
		<target name="target1">
			<display width="240" height="320" />
		</target>
		<target name="target2">
			<display width="240" height="240" color_format="rgb565" />
			<display width="320" height="320" color_format="argb8888" />
		</target>
	</targets>
</project>

在 Screen 的预览界面就可以对 display 进行选择 preview

加载 Screen 事件 链接到标题

点击按钮或其他事件触发加载 (screen_load_event) 或创建 (screen_create_event) Screen 非常常用，通过在组件（Components）或控件（Widgets）下添加特殊的 XML 标签来支持这两种方式：

例如前面 main_screen.xml 中点击 my_button 要创建并加载 about_screen，使用screen_create_event

<my_button my_name="Frank">
    <screen_create_event screen="about_screen" />
</my_button>

about_screen.xml 中点击一个 button，返回到 main_screen，由于 main_screen 是常驻 screen，因此需要使用screen_load_event

<screen>
	<view>
		<lv_button align="center">
			<lv_label text="BACK" />
			<screen_load_event screen="main_screen" />
		</lv_button>
	</view>
</screen>

以上代码添加到 XML Editor 中可以直接在预览窗口中看到效果，包括按钮的事件效果：

参考 链接到标题

https://docs.lvgl.io/master/details/xml/ui_elements/Screen.html