文本
文本用来显示一段文字。可以显示固定内容,也可以显示 JS 返回的变量。
用法
在编辑器底部点加号,添加 文本,然后在「内容」字段填要显示的文字。
| 内容填写 | 显示效果 |
|---|---|
Hello | Hello |
${name} | 显示 JS 顶层变量 name 的值 |
你好 ${name},今天 ${temp}° | 你好 Alice,今天 26° |
占位符语法详见 占位符语法。
属性
| 字段 | 可填写 | 说明 |
|---|---|---|
| 内容 | 你好 / ${title} | 显示的文字,支持占位符和混排 |
| 字号 | 14 / 14vp / ${size} | 文字大小。填数字时按固定视觉尺寸显示,预览和桌面卡片更一致 |
| 行高 | 16 / 20 / ${lineHeight} | 填数字时按固定视觉尺寸显示;留空时使用系统默认行高 |
| 字重 | normal / bold / medium | 按编辑器下拉选项填写 |
| 字体 | 编辑器下拉选项 | 使用指定字体 |
| 文字色 | #000000 / ${color} | 文字颜色 |
| 文字描边 | 编辑器内设置 | 在一个面板中设置启用、宽度和颜色;三项都可选择变量,宽度最大为 32 |
| 宽 / 高 | auto / 100 / 100% / ${w} | 文本区域尺寸 |
| 水平偏移 / 垂直偏移 / Z 轴偏移 | 0 / 8 / ${x} | 只移动显示位置,不改变原本占位 |
| 内边距 / 外边距 | 8 / 8,8,8,8 | 四周留白 |
| 显示 | true / false / ${show} | 控制是否显示 |
| 背景色 | #FFFFFF / ${color} | 文本背景 |
| 圆角 | 0 / 8 / 50% | 背景圆角 |
| 旋转角度 | 0 / 15 / ${angle} | 顺时针旋转角度 |
| 不透明度 | 0 到 1 | 1 为完全不透明 |
例:展示一行 JS 数据
let title = "未读"
let count = 12
| 文本字段 | 填写 |
|---|---|
| 内容 | ${title} |
| 内容 | ${count} |
| 内容 | ${title}: ${count} 条 |
例:动态字号
「字号」字段填 ${size},JS 给一个数字即可:
let size = 24
整段和混排不同
「字号」填 ${size} 时会保留数字类型。日常用数字即可;如果确实需要指定单位,可以直接填 24vp、24fp 或 24px。详见 占位符语法。
例:压紧大字号上下空间
字号较大时,可以设置固定行高控制文字盒子的上下占用:
| 字段 | 填写 |
|---|---|
| 字号 | 48 |
| 行高 | 48 |
「行高」留空时使用系统默认行高;填 0 或清空都不会限制行高。
例:制作描边标题
| 字段 | 填写 |
|---|---|
| 内容 | AWidget |
| 字号 | 48 |
| 字重 | bold |
| 文字色 | #FFFFFF |
| 文字描边 | 开启,宽度 2,颜色 #000000 |
大字号标题通常使用 1 到 3 的描边宽度即可。描边会计入文字四周的占用,不会裁掉外侧轮廓。
需要动态控制时,可以分别为「启用」「宽度」「颜色」选择变量:
let strokeEnabled = true
let strokeWidth = 2
let strokeColor = "#000000"
打开「文字描边」后,点对应一项旁边的「变量」选择
${strokeEnabled}、${strokeWidth} 或 ${strokeColor}。点「颜色」会进入单独的颜色选择页。
当前描边限制
- 描边文字按单行显示,内容中的换行会显示为空格。
- 「文字色」需要使用纯色;选择前景渐变时不显示描边。
- 文本区域宽度不足时,文字会横向缩放以适应宽度,不会自动换行。