自定义编辑：图层、数据和真实边界 | WidgetCraft

简短答案

WidgetCraft 的编辑器是一块真正基于图层的设计画布，不是设置表单。你用容器、文本、弧形文字、图片、GIF、形状、按钮、图表和网格搭出组件，每层自带布局、外观、特效和动画。文本与数值图层则绑到实时数据源：天气、定位、电量、存储、CPU、网络类型、健康、日历、日期和时间，任意 HTTP API，或你自己写的 JavaScript 表达式。

多数竞品页面跳过的是它在哪儿停下。解码后的图片与 GIF 内存超过 15 MB 的组件，还没渲染就可能被杀掉。iOS 会缓存组件时间线，改动保存后不会立刻出现在主屏。免费档每种尺寸只留 一个组件，「什么都能改」撞墙比 Pro 这个词听起来更早。

想看而不是读的话，WidgetCraft 在 App Store 上；产品页覆盖组件库。这一页讲编辑器，够不够用看完就知道。

你为什么会看组件编辑器

「能不能自定义组件」背后通常只有三种：看到喜欢的设计想要自己的版本（模板就够）；只想在主屏放一样特定的东西——倒计时、火车时刻、一张图表（这才是编辑器的正经活）；或想让整个屏幕符合某种审美，于是每个组件都自己做一遍。真正让人放弃的不是界面难看，而是按一个尺寸做完，发现组件一改尺寸就撑不住。

图层系统就是全部的心智模型

WidgetCraft 的设计是一棵图层树。容器（VStack、HStack、ZStack、Grid）装子节点；内容图层（Text、Arc Text、Image、GIF、Date、Chart、Button、Spacer）放在其中。图层面板把这棵树展开或折叠出来，带搜索框，每行还有名称、可见性、锁定标记。任意图层都能添加、删除、复制、重命名、隐藏、锁定、排序、插到指定位置、嵌套，或用 Extract 提取回顶层。

布局决定它能不能在真实主屏上活下来：

• 定位分 Absolute（从画布左上角算）和 Relative（相对父级）；stack 里用相对定位，同一份设计才能在多个尺寸上都成立。
• 尺寸模式有 Fixed、Flexible（可设最小与最大约束）、Fill、Fit。合理的 Flexible 上限让长数值缩回去而不是溢出。
• 锚点覆盖九个点；容器自己决定子节点的水平与垂直对齐。

特效接近设计工具：不透明度、圆角、背景与前景颜色、模糊、缩放（X、Y、锚点）、阴影（半径、偏移、颜色）、带锚点的 2D 旋转，以及绕 X、Y、Z 轴的 3D 旋转，再加亮度、对比度、饱和度、灰度、色相旋转、反相和正片叠底。混合模式有 17 种——从 Normal 到 Luminosity，含 Multiply、Screen、Overlay、Soft Light、Difference——渐变透过纯色块就靠它。动画按图层算，一共两种：Swing 带方向和距离的往复运动，Rotation 绕选定锚点的持续转动，一圈一个周期。画布上的 Show Grid 与 Clip to Edges 两个开关，后者让你在设计阶段就看到 iOS 裁掉哪里。

数据到底能绑什么

文本与数值图层、图表和网格都能取数据源，选择器里按类别分组：

• Weather (Now)——温度、体感、天气状况、今日最高与最低温、湿度、紫外线指数、云量、气压、降水量、能见度
• Wind——风速、风向、阵风；Sun & Moon——日出、日落；Location——城市、省份或州、国家
• System——电量与充电状态、内存、已用与可用存储、CPU 使用率、网络类型与名称
• Health——步数、距离、今日卡路里；Calendar——下一事件的标题、时间、地点
• Date & Time——年、月、日、12 小时与 24 小时制时间、分钟、秒、h:mm、HH:mm、h:mm a、MMM d、星期、完整日期，或者你自己敲的一段自定义 DateFormatter 格式
• Data Provider——运行时抓取的具名数据源，带兜底值，失败时也有东西可显示
• HTTP API——任意 URL，配字段路径与参数，提交前就能看到响应的测试；Custom Script——负责抓取并处理数据的 JavaScript，带校验和试运行

Date 图层能显示时间、日期、相对时间（2 hours ago）、相对当前的偏移（+2h、-7d）或一个实时倒计时（2:30:00）——不绑数据就能做出倒计时组件。

图表更进一层：折线、柱状、面积、散点，可调描边宽度与虚线样式、曲线平滑、填充不透明度、点半径、网格线、标注、坐标轴配置和图例。数据源包括逐小时与逐日的温度、降水、风和湿度，逐周的步数、距离与卡路里，逐日心率，以及电量、内存、存储的历史。Grid 取手动设定的行列数、某个日历月或周或一个 HTTP 数据源，把你指定为单元格模板的子图层逐格克隆。图片和 GIF 图层取 SF Symbols、App Store 图标、你的照片库、文件、网络 URL 或一个 HTTP API 响应；GIF 还能从视频或实况照片转出来，或在 Tenor 上搜。

会在哪里失败，以及为什么

一、15 MB 的天花板。 WidgetCraft 会解码你加入的每张图片和 GIF，按 width × height × 4 bytes × frame count 估算，数字显示在信息面板。超过 15 MB 它会警告组件可能崩溃。GIF 是常见原因：400 × 400 像素、60 帧，无论文件多小，解码后也差不多 38 MB。压小文件没有用——限制卡在解码内存上，只能减帧或换素材。

二、iOS 会缓存组件时间线。 组件不是你盯着就重绘的 App；设计是被发布出去的，何时渲染由 iOS 决定，主屏那份可能还是旧的，直到时间线刷新。编辑器里的 Refresh Dynamic Data 清的是编辑器自己的缓存，让你预览当前值，但不会强迫主屏重绘。

三、权限卡住的是数据，不是 App。 健康数据只读，授权面板在添加组件时出现，不是首次启动。在它出现之前，任何读取 Apple 健康的组件预览上会显示粉色心形徽标，标注「Data from Apple Health」。日历和定位同样按这种方式申请；拒绝一个，那一层就没东西可显示。凡是需要网络的东西——HTTP 数据源、JavaScript、网页图片、GIF 链接、Tenor、AI 辅助设计——离线时都显示不出来，哪怕编辑器其余部分离线可用。

和那些显而易见的替代方案相比

对着自己写代码： 完全可控，代价是 WidgetKit extension 目标、timeline provider 和一轮构建—安装循环。循环就是代价；WidgetCraft 的交易是一个设计只要几分钟，经 iOS 的组件库部署。对着 Scriptable 一类工具： 做一次性文本替换更快，作为设计面弱得多。**模板**覆盖 200 多个预设，多数想要「就那个时钟，但换成我的日期」的人根本用不到编辑器——不过在模板页打开一个，它由哪些图层搭成会全交给你。

WidgetCraft 不一样的地方

• 是真图层模型，不是模板定制器。 容器可嵌套，图层能提取回顶层，每层都有自己的特效和动画，能搭出模板没有的构图。
• 17 种混合模式和逐图层的 3D 旋转，每个图层都算，包括文本。
• 天气之外的数据源。 电量、存储、CPU、网络类型、定位、日历、健康、HTTP API 加兜底值、JavaScript，图表也用同一批。
• 导出。 任何设计都能导出成 JSON 文件或完整的组件包，你不会被锁在 App 里。
• 自适应颜色。 取色器可只给一个颜色，或给随深浅外观切换的两组值，深色值自动推导或手动指定都行，于是同一个组件在两种外观下都成立。画布上有 Light / Dark / Auto 开关。

诚实的限制：

• 它是设计工具，不是代码编辑器。 除 JavaScript 数据源外没有任意脚本能力，也加不了新的图层类型。
• 要求： iOS 18.0 及以上，iPhone 与 iPad 都支持，创建组件不需要账号。编辑器覆盖 small、medium、large、extra large 及锁屏配件家族，商店文案只写了前三个。AI 设计生成是另一个依赖网络的功能，与图层编辑器无关。
• 免费档每种尺寸保留一个组件。 Pro 去掉这个上限，解锁 Pro 组件库和高级编辑器功能，美国区按月（$4.99）、按年（$19.99）或一次性买断（$49.99），其他地区按当地价。自定义背景、颜色、内容和导入自己的组件永远免费。

那你该不该用

WidgetCraft 的编辑器值得，如果你要的是有层次构图、绑了实时数据、能对单个图层施加效果的设计，且想现在就拿到它而不是等一轮构建——特别是希望组件在浅色深色下都好看、又不想做两遍时。它不值得，如果你只需要改一处文本、要完整的程序化控制，或每种尺寸想在主屏放超过一个组件——那限制关于槽位，不关于你能设计什么。

打开一个模板，点 Edit，图层面板大约一分钟就能告诉你这是不是你要的工具。下载 WidgetCraft，或者从第一个组件的上手指引开始。