Skip to content

Latest commit

 

History

History
181 lines (135 loc) · 22 KB

widget-element.md

File metadata and controls

181 lines (135 loc) · 22 KB

JSX 组件


wbox

盒子组件,必须处于 jsx 最外层,映射为 ListWidget

属性 类型 默认值 必填 说明
background string | object 浅色模式是#ffffff
暗黑模式是#000000
背景
可以为hex 字符串,例子:#ffffff
可以为网络图片链接,例子:http://example.com/a.jpg
可以为 Color 对象
可以为 Image 对象
可以为 LinearGradient 渐变对象
wbox不能设置透明背景,ios不支持。
不过,可以通过裁剪桌面截图,营造视觉上的透明
spacing number 0 间隔距离
href string 点击时打开的url
不与 onClick 共存,当 onClick 存在时,只执行 onClick
updateDate object 小组件更新日期
只接收 Date 对象
该属性指示何时可以再次刷新窗口小部件。在到达日期之前,不会刷新小部件。不保证小部件将在指定的日期完全刷新。
小部件的刷新率部分取决于iOS / iPadOS。例如,如果设备电池电量低或用户很少看小部件,则小部件可能不会刷新。
padding Array<number> [0,0,0,0] 内边距,依次是上、左、下、右,四个都要填
onClick function URLScheme 实现的点击事件
不与 href 共存,当 href 存在时,只执行 onClick


wstack

容器组件,类似 div ,映射为 WidgetStack

属性 类型 默认值 必填 说明
background string | object 背景
可以为hex 字符串,例子:#ffffff
可以为网络图片链接,例子:http://example.com/a.jpg
可以为 Color 对象
可以为 Image 对象
可以为 LinearGradient 渐变对象
spacing number 0 间隔距离
padding Array<number> [0,0,0,0] 内边距,依次是上、左、下、右,四个都要填
width number 0 组件宽,当宽度设置 <= 0 时,小部件将自动确定该尺寸的长度。
height number 0 组件高,当高度设置 <= 0 时,小部件将自动确定该尺寸的长度。
borderRadius number 0 边框四个角的圆角程度
borderWidth number 0 边框宽度
borderColor string | object #000000 边框颜色
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
href string 点击时打开的url
不与 onClick 共存,当 onClick 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效
verticalAlign string top 内容垂直方向对齐方式
flexDirection string row 排版方向
onClick function URLScheme 实现的点击事件
不与 href 共存,当 href 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效

verticalAlign 的合法值
说明
top 顶部对齐内容(默认)
center 居中对齐内容
bottom 底部对齐内容

flexDirection 的合法值
说明
row 横向排版(默认)
column 纵向排版


wimage

图片组件 ,映射为 WidgetImage ,组件里面不可包裹其他组件

属性 类型 默认值 必填 说明
src string | object 图片资源地址
可以为网络连接,例子:http://example.com/a.jpg
可以为 Image 对象
可以为 SFSymbol 的 icon名字 ,就是 ios 自带图标库里 某图标的iconName,例子:tv.circle.fill
href string 点击时打开的url
不与 onClick 共存,当 onClick 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效
resizable boolean true 图片是否可以调整大小
width number 图片宽,当宽高都为空时,图片将显示原尺寸。
height number 图片高,当宽高都为空时,图片将显示原尺寸。
opacity number 1 透明度,范围0到1,0为完全透明,1为完全不透明。
borderRadius number 0 边框四个角的圆角程度
borderWidth number 0 边框宽度
borderColor string | object #000000 边框颜色
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
containerRelativeShape boolean false 如果为true,则图片的角将相对于包含的小部件进行四舍五入。
如果为true,则会忽略borderRadius的值
我知道你看不懂,我也是,可以看官方文档解释
filter string | object 加滤镜
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
imageAlign string left 图片横向对齐方式
mode string fit 图片显示模式
onClick function URLScheme 实现的点击事件
不与 href 共存,当 href 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效

imageAlign 的合法值
说明
left 左对齐图片(默认)
center 中间对齐图片
right 右对齐图片

mode 的合法值
说明
fit 图片将适应可用空间(默认)
fill 图片将填充可用空间


wspacer

空格占位组件,映射为 WidgetSpacer ,组件里面不可包裹其他组件

属性 类型 默认值 必填 说明
length number 0 空格长度,当为0时是弹性占位(能占则占)


wtext

文字组件,映射为 WidgetText ,组件里面不可包裹其他组件,只可以包裹文字

属性 类型 默认值 必填 说明
textColor string | object 浅色模式是#000000
暗黑模式是#ffffff
文字颜色
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
font number | object 文字字体样式
为number时,使用正常系统字体,并设置为这个尺寸。
也可以传 Font 字体对象进来
opacity number 1 透明度,范围0到1,0为完全透明,1为完全不透明。
maxLine number 0 最大行数。
显示的最大行数。该值 <= 0 时,将禁用该限制。
scale number 1 文字可缩最小的倍数,取值范围 0 到 1 。
例如:0.5 时,允许布局调整时缩小文字到原来的 0.5 倍大小
有点拗口,看官方文档
shadowColor string | object #000000 阴影颜色, shadowRadius 属性的值必须大于零,此属性才能生效。
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
shadowRadius number 0 阴影模糊距离
shadowOffset object new Point(0, 0) 阴影的偏移位置。 shadowRadius 属性的值必须大于零,此属性才能生效。
传入 Point 位置对象
href string 点击时打开的url
不与 onClick 共存,当 onClick 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效
textAlign string left
onClick function URLScheme 实现的点击事件
不与 href 共存,当 href 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效

textAlign 的合法值
说明
left 文字左对齐(在wstack里左对齐文本,应该在文本组件右边放一个 wspacer
center 文字居中对齐(在wstack里居中对齐文本,应该在文本组件两边放一个 wspacer
right 文字右对齐(在wstack里右对齐文本,应该在文本组件左边放一个 wspacer


wdate

日期组件,映射为 WidgetDate ,组件里面不可包裹其他组件,有点类似 wtext 组件,区别在文字改成了日期

属性 类型 默认值 必填 说明
date object 需要显示的时间
只接收 Date 对象
mode string 显示的时间格式
textColor string | object 浅色模式是#000000
暗黑模式是#ffffff
文字颜色
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
font number | object 文字字体样式
为number时,使用正常系统字体,并设置为这个尺寸。
也可以传 Font 字体对象进来
opacity number 1 透明度,范围0到1,0为完全透明,1为完全不透明。
maxLine number 0 最大行数。
显示的最大行数。该值 <= 0 时,将禁用该限制。
scale number 1 文字可缩最小的倍数,取值范围 0 到 1 。
例如:0.5 时,允许布局调整时缩小文字到原来的 0.5 倍大小
有点拗口,看官方文档
shadowColor string | object #000000 阴影颜色, shadowRadius 属性的值必须大于零,此属性才能生效。
可以为hex 字符串,例子:#ffffff
可以为 Color 对象
shadowRadius number 0 阴影模糊距离
shadowOffset object new Point(0, 0) 阴影的偏移位置。 shadowRadius 属性的值必须大于零,此属性才能生效。
传入 Point 位置对象
href string 点击时打开的url
不与 onClick 共存,当 onClick 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效
textAlign string left
onClick function URLScheme 实现的点击事件
不与 href 共存,当 href 存在时,只执行 onClick
当小部件为小尺寸时,此属性不生效

mode 的合法值
说明
time 显示日期的时间部分。例如:11:23PM
date 显示整个日期。例如:June 3, 2019
relative 将日期显示为相对于现在的日期。例如:2 hours, 23 minutes 1 year, 1 month
offset 将日期显示为从现在开始的偏移量。例如:+2 hours -3 months
timer 从现在开始将日期显示为计时器计数。例如:2:32 36:59:01