PicoPixel

PicoPixel 资源库与可复用 LVGL 组件指南

了解 PicoPixel 资源库包含哪些内容,如何发布和关联资源库,以及如何在团队文件之间复用组件。发布资源库只会与团队共享,本文也会说明对外分享内容的两种方式。

PIPicoPixel
librarycomponentssharingreuselvglpicopixel
已更新2026-05-31
01/09

概览

每个 PicoPixel 文件都有自己的资源库,包含该文件使用的颜色、字体、图片、动画图片和组件,可以在 Assets 面板中查看。默认情况下,这些资源只属于当前文件。将文件发布为资源库后,团队成员就能在其他文件中关联它,直接使用其中的资源。

PicoPixel 的 Assets 面板中,本地资源库包含图片、颜色、字体和速度表组件,旁边画布上显示 Library Basic starter example 速度表界面
▸ Assets 面板集中显示文件的图片、颜色、字体和组件,可发布为资源库供团队使用。

本指南介绍资源库的内容、Publish 的作用、如何发布和关联资源库,以及发布后在哪里查找。首先要明确一点:

WARNING

发布资源库不会公开你的作品。 Publish 只会让文件中的资源供同一团队复用,不会将其发布到互联网,也不会让团队以外的人看到。只有你主动对外分享时,内容才会离开团队,具体方式见本文末尾。

02/09

什么是资源库?

资源库是一个文件中所有可复用资源的集合。在 Assets 面板里,当前文件的资源位于 local library(本地库) 下,默认会展开显示。

关联团队的另一个资源库后,面板中会在本地库下方出现一个独立区域,以该库的文件名作为标题,例如 Animation Examples。当前文件的资源和关联库的资源都会显示在这里,可以直接拖入设计。

NOTE

可以把资源库想成工具架:本地库存放当前文件的资源,关联库存放团队其他文件的资源。设计时,你可以随时取用任意一组。

03/09

资源库包含哪些内容?

发布时,文件的 Assets 面板中的资源都会包含在库中。它们按以下类别分组:

  • Images:静态图片。
  • Animated images:多帧动画图片。
  • Components:可复用的 LVGL 组件,详见下文。
  • Colors:已保存的色板。
  • Fonts:已添加并转换为设备可用格式的字体。

发布后,团队可以直接复用这些资源,无需在文件之间反复复制粘贴。

什么是组件?

组件(Component)是由一个或多个控件组成的可复用单元。按钮、标签分别是一个控件;包含标题、图标和数值的一张卡片,则可以将多个控件和图层组合为一个组件,整体放入任意屏幕。

每个组件都有一个主实例(Main instance)。在主实例中修改设计后,可以将变更同步到使用该组件的副本,包括其他关联文件中的副本。这样就能在一处维护设计,让各个界面保持一致。

TIP

如果你反复在多个屏幕里制作同一组控件,例如标题栏、数据卡片或带文字的开关,就适合将它们做成组件。制作一次,便可重复使用。

04/09

将文件发布为资源库

发布操作会将当前文件设为团队共享资源库。

Libraries 对话框左侧显示当前文件的资源库和 Publish 按钮,右侧列出 Animation Examples、New File 7 等可关联的共享库
▸ 左侧可以发布当前文件的资源库,右侧可以关联团队已发布的库。
  1. 在 Assets 面板中点击 Add library,打开 Libraries 对话框。文件中已有组件或关联库时,按钮名称为 Manage library。
  2. 在 LIBRARIES 标签下找到 LIBRARIES IN THIS FILE 区域,其中的 File library 就是当前文件的资源库。
  3. 点击它旁边的 Publish。

按钮变为 Unpublish 后,表示发布成功,团队中的其他文件可以关联这个库。编辑器工作区顶部右侧,以及 Dashboard 中的文件卡片上,还会出现资源库标记,方便识别。

NOTE

之后点击 Unpublish 并确认,可以取消发布并解除关联。PicoPixel 会先将资源复制到使用该库的文件中,因此这些文件不会突然丢失依赖的内容。

05/09

查找团队资源库

已发布的资源库集中显示在团队的资源库页面:

  • 打开 Dashboard。
  • 在左侧边栏 Sources 下点击 Libraries。

这里列出当前团队发布的所有资源库。切换团队后,列表也会切换,便于成员查找各自团队中可复用的内容。

Libraries 页面列出两个已保存的资源库,并展示每个库包含的图片、动画图片、字体和组件
▸ Dashboard 的 Libraries 页面汇总当前团队的资源库及其内容。
06/09

在其他文件中使用资源库

资源库发布后,团队中的其他文件就可以关联它:

  1. 打开要使用资源的文件。
  2. 在 Assets 面板中点击 Add library 或 Manage library,打开 Libraries 对话框。
  3. 在 SHARED LIBRARIES 区域找到所需库,点击旁边的 +。列表较长时,可以使用 Search shared libraries 搜索。

关联成功后,该库会以独立名称显示在 Assets 面板的本地库下方。将其中的组件、图片、颜色和字体拖入设计即可。

应用关联库的更新

资源库作者修改组件或颜色后,变更不会自动覆盖当前文件。打开 Libraries 对话框的 UPDATES 标签,可以看到哪些库有更新;准备好后点击 Update 再应用。没有更新时,面板也会明确提示。

07/09

资源库的可见范围

界面中的 Publish 容易让人误以为会公开发布,这里再说明一次:

WARNING

资源库只在团队内共享。 访问者必须通过身份验证并属于该团队。发布不会生成公开链接,也不会让资源库出现在公开列表中。这里的“发布”仅表示“可供队友使用”。

内容只有在你主动采取以下两种操作之一时,才会离开团队:

  1. 导出并自行发送 .picopixel 文件。 在工作区菜单中选择 Export .picopixel,文件会下载到电脑上。之后是否通过邮件或其他方式分享,由你自行决定。
  2. 向 PicoPixel 团队提交作品。 如果想与整个社区分享,可以到 app.picopixel.io/#/settings/submit-template 提交审核。团队会审核每份提交,通过后才发布到社区模板库。表单要求和授权说明见如何提交模板。

没有主动进行上述操作,文件和资源库就会留在团队内部。

08/09

使用社区模板创建资源库

PicoPixel 模板库提供由开发团队和社区制作的模板、UI 套件、示例、精灵、动画图片和完整应用。每一项都是普通的 .picopixel 文件,可以打开、修改并作为项目起点。

PicoPixel 模板库的分类筛选和项目卡片,包含 Events Example、Fonts Example、Speedometer Example 和 Animation Examples
▸ 浏览现成的项目、UI 套件和组件,导入后继续设计。

导入的模板也可以发布为资源库,让团队复用其中的组件、字体、颜色和图片。这是快速启动项目或丰富现有界面的便捷方式。

关于查找、导入和修改模板,请参阅如何使用 PicoPixel 模板、UI 套件和完整应用。

09/09

下一步

继续阅读

接着学点什么

如何在 PicoPixel 中使用宠物 thumbnail
PICOPIXEL

如何在 PicoPixel 中使用宠物

宠物是预制的动画精灵,包含多种动画模式,可根据设定的条件切换。从目录中选一个,添加到项目中,然后将其连接起来,让它对设备正在做的任何事情做出反应:获取数据、过热、代码审查等等。

pets · sprites · picopixel
如何使用 PicoPixel 模板、UI 套件和完整应用 thumbnail
PICOPIXEL

如何使用 PicoPixel 模板、UI 套件和完整应用

查找 PicoPixel 模板、UI 套件、示例、精灵、控件和完整应用,了解如何打开、下载、导入和修改项目,并导出用于设备的 LVGL C 代码。

templates · ui-kits · full-apps
PicoPixel LVGL MCP Server Setup Guide thumbnail
PICOPIXEL

PicoPixel LVGL MCP Server Setup Guide

Set up the PicoPixel LVGL MCP server for Claude, ChatGPT, Codex, or Cursor. Learn agent settings, reusable components, colors, fonts, and assets.

LVGL MCP · MCP server setup · AI UI design