PicoPixel

PicoPixel 中 libraries 和可复用 LVGL components 指南

了解 PicoPixel 中 libraries 如何工作:发布一个文件会让它的 assets 可在团队 workspaces 之间复用,而不是公开发布。包括 library 包含什么、如何 publish 和 link、发布后的 libraries 出现在哪里,以及内容离开团队的唯一两种方式。

PI PicoPixel
library components sharing reuse lvgl picopixel
已更新 2026-05-31
01 /09

概览

每个 PicoPixel 文件都有自己的 library,它收集了该文件使用的 colors、fonts、images、animated images 和 components,并显示在 Assets panel 中。单独存在时,这个 library 属于该文件。Publishing 该文件会让它的 library 变成团队成员可复用的资源:从另一个文件 link 它,它的 assets 就会和那个文件自己的 assets 一起出现。

PicoPixel 编辑器显示 Assets panel,其中 local library 包含 images、colors、fonts 和 speedometer component,旁边画布上是标题为 Library Basic starter example 的 speedometer UI
▸ Assets panel 中的文件 local library — images、colors、fonts 和 components 集中在一起,可以发布并与团队共享。

本指南说明 library 是什么,Publish 究竟做什么(以及同样重要的:它做什么),如何 publish 和 link libraries,以及在哪里找到它们。最重要的一点是:

WARNING

Publishing 不会让你的作品公开。 Publish 只会让一个文件的 library 可被你的团队复用,也就是 PicoPixel workspace 中的人。它不会发布到互联网,不会公开列出,也不会被团队外任何人看到。内容离开团队的唯一方式,是你主动采取的操作,本文末尾会说明。

02 /09

library 是什么

library 是文件内部的一组可复用 assets。在 Assets panel 中,你会在 local library 下看到该文件自己的 assets,它始终存在并默认打开。

当你把另一个 team library link 到当前文件时,它会作为第二个、单独命名的区域出现在 local library 下方,标题是该 library 的文件名(例如 Animation Examples)。因此一旦 library 被 linked,Assets panel 会同时显示你的文件自己的 assetslinked library 的 assets,并排可拖入设计。

NOTE

可以把它想成同一个柜子里的两层架子:local library 是当前文件制作的内容,每个 linked library 是从团队另一个文件借来的架子。你可以从任意一层取用,而不离开设计。

03 /09

library 可以包含什么

文件 Assets panel 中的任何内容都会随 library 在 publish 时一起提供。PicoPixel 将 assets 分组为:

  • Images,添加到文件中的静态图形。
  • Animated images,多帧动态图形。
  • Components,可复用 LVGL widgets(见下文)。
  • Colors,保存的色板。
  • Fonts,添加并转换为设备可用格式的 fonts。

Publish 文件后,这些都能被团队复用,无需在文件之间复制粘贴。

什么是 "component"

component 是由一个或多个 widgets 组成的可复用构建块。单个 button 或 label 是一个 widget,而 component 可以把多个 widgets 和 layers 打包在一起,比如带 title、icon 和 value 的 styled card,并把整体当作一个可复用单元放入任何 screen。

每个 component 都有一个 main instance。编辑 main instance,变更会流向该 component 的每个副本,包括 link 了你的 library 的其他文件中使用的副本。这就是 components 保持 UI 一致性的强大之处:定义一次 control,到处复用,并在一个地方更新。

TIP

如果你发现自己在多个 screens 里反复构建同一小组 widgets:header bar、metric tile、labelled toggle,那它就是等待成为 component 的东西。构建一次,所有 screen 都保持同步。

04 /09

将文件发布为 library

Publishing 只是打开一个开关:把你的文件标记为团队 shared library。

PicoPixel Libraries dialog 显示 Libraries tab,左侧当前文件 library 旁有 Publish 按钮,右侧有 Animation Examples 和 New File 7 等可 link 的 shared libraries
▸ Libraries dialog:左侧发布当前文件的 library,或从右侧 link 团队中已经发布的 library。
  1. 打开 Libraries dialog。在 Assets panel 中使用 Add library 按钮(当文件已有 linked libraries 或 components 时,它显示为 Manage library)。
  2. LIBRARIES tab 中,查看 LIBRARIES IN THIS FILE。你会看到 File library,也就是当前文件的 library,旁边有 Publish 按钮。
  3. 点击 Publish

按钮会变为 Unpublish,表示该文件现在是团队可 link 的 shared library。PicoPixel 还会为文件添加一个小 library badge:你会在 workspace header 的右上角Dashboard 中文件卡片上看到它,便于识别哪些文件已发布。

NOTE

之后点击 Unpublish 会要求确认,然后 unlink library。PicoPixel 会先把 library 的 assets 复制到任何正在使用它的文件中,因此依赖文件不会突然丢失内容。

05 /09

查找团队 libraries

Published libraries 会集中在团队的一个位置。

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

此页面列出团队中发布的所有 library,并限定在你所在的 team;切换 team 后会看到对应 team 的 libraries。它就是团队成员浏览可复用资源的 catalogue。

PicoPixel Libraries dashboard 显示两个已保存 libraries,并列出它们的 images、animated images、fonts 和 components,可导入其他项目
▸ Dashboard 中的 Libraries page 列出团队所有 published library,并概述每个 library 携带的 assets。
06 /09

在另一个文件中复用 library

library 发布后,团队中的任何文件都可以引入它。

  1. 打开你要构建的文件。
  2. Assets panel 中点击 Add library(或 Manage library)打开 Libraries dialog。
  3. SHARED LIBRARIES 区域找到需要的 library,列表很长时可使用 Search shared libraries,然后点击旁边的 + 来 link。

linked library 会作为自己的命名区域出现在 Assets panel 中,位于 local library 下方。把其中的 components、images、colors 和 fonts 直接拖入你的设计。

保持 linked library 最新

当你 link 的 library 发生变化,例如 owner 编辑了 component 或调整了 color,这些更新不会强制应用到你身上。Libraries dialog 的 UPDATES tab 会列出有更新的 linked libraries,并提供 Update 按钮,让你准备好时再应用。如果没有变化,该 tab 会告诉你没有可更新内容。

07 /09

隐私:这里的内容永远不会自动公开

这一点值得重复,因为 Publish 这个词听起来比实际更大。

WARNING

Publishing a library 只会与团队共享,不会给其他人。 访问经过身份验证并限定在你的 team:没有 public link,没有 public listing,也没有团队外的人能访问 published library。"Published" 的含义只是 "available to my teammates"。

你制作的内容离开团队只有两种方式,而且两者都是你主动选择的:

  1. 你自己 export 并发送 .picopixel 文件。 从 workspace menu 可以 Export .picopixel,文件会下载到你的电脑。你之后如何处理这个文件,比如 email、share 或交给别人,完全由你决定,并发生在 PicoPixel 之外。
  2. 你向 PicoPixel team 做官方 submission。 如果你希望把设计分享给更广泛的 PicoPixel community,可以提交到 app.picopixel.io/#/settings/submit-template 审核。团队会先审核每个 submission,再发布到 community gallery。表单需要什么、你授予什么权利,请看 How to submit a template

除此之外,你的 files 和 libraries 会留在团队内部。

08 /09

社区 templates 和现成 libraries

你不必从零开始。PicoPixel templates gallery 收集了越来越多 templates、UI kits、examples、sprites、animated images 和 full app files,来自 PicoPixel team 和更广泛社区。每一项都是普通 .picopixel 文件,你可以打开、customize,并作为自己项目的起点。

PicoPixel templates gallery 显示 Full App、Example、UI Kit、Template、Sprite、Animated Image 和 Widget category filters,以及 Events Example、Fonts Example、Speedometer Example、Animation Examples 等 project cards
▸ 浏览 templates gallery,找到可导入并继续构建的 ready-made projects、UI kits 和 components。

你打开的任何 template 也可以变成 library:publish 它,团队就能访问其中的 components、fonts、colors 和 images,而无需重建。这是 bootstrap 新项目或为现有项目添加 polished elements 的最快方式。

关于查找、导入和自定义 templates 的完整流程,请看 How to use PicoPixel templates, UI kits, and full apps

09 /09

下一步

继续阅读

继续前进。

如何在 PicoPixel 中使用宠物 thumbnail
PICOPIXEL

如何在 PicoPixel 中使用宠物

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

pets · sprites · picopixel
如何使用 PicoPixel templates、UI kits 和 full apps thumbnail
PICOPIXEL

如何使用 PicoPixel templates、UI kits 和 full apps

查找 PicoPixel templates、UI kits、examples、sprites、widgets 和 full app files,然后打开、下载、导入、自定义,并将它们导出为适用于设备的 LVGL C code。

templates · ui-kits · full-apps
什么是 sprite? thumbnail
PICOPIXEL

什么是 sprite?

了解 sprite 是什么,如何创建多状态 animated widgets,以及如何在项目之间复用它们。

sprite · picopixel