SuperNode
Widget

组件

桌面小组件中由 Glance 渲染的原生视图与布局。

从 supernode/widget 导入组件。它们只接受 Glance 能渲染的 props 和取值，不支持的用法在类型检查阶段就会报错。所有组件都通过 modifier 指定布局与装饰。颜色与对齐取值详见 View。

import { Column, Modifier, Text } from "supernode/widget";

小组件不提供 TextField、Hooks 与 Context；需要输入和状态时请使用 App 页面。

Text

显示文本。

<Text fontSize={16} fontWeight="bold" fontStyle="italic" color="#057AF6">
  Hello SuperNode
</Text>
PropTypeDescription
childrenstring 或表达式文本内容。
fontSizenumber字号（sp），默认 14。
fontWeight"normal" | "medium" | "bold"字重，默认 "normal"。
fontStyle"normal" | "italic"字体样式，默认 "normal"。
colorstring | { light, dark }文字颜色：十六进制颜色，或分别指定浅色/深色模式的颜色，详见颜色取值。

Glance 只能渲染 Compose FontWeight 中的 normal（400）、medium（500）和 bold（700）三档。

DateText

DateText 使用原生日期格式显示 JavaScript Date。

<DateText date={new Date()} format="time" prefix="更新于 " color="#777777" />
PropTypeDescription
dateDate需要显示的时间点。无效的 Date 会抛出异常。
format"date" | "time"显示固定日期或固定时间。
prefixstring日期前的静态文本。
suffixstring日期后的静态文本。
fontSizenumber字号（sp），默认 14。
fontWeight"normal" | "medium" | "bold"字重，默认 "normal"。
fontStyle"normal" | "italic"字体样式，默认 "normal"。
colorstring | { light, dark }文字颜色：十六进制颜色，或分别指定浅色/深色模式的颜色。

prefix、日期和 suffix 会组成同一个文本视图，共享字体、颜色和换行行为。日期在小组件渲染时按设备的语言和时区格式化，直到下一次刷新前保持不变，因此不提供相对时间、计时器这类实时格式。需要更新时设置 options.refresh。

Image

<Image src="home_smile_solid" contentScale="crop" modifier={Modifier.size(48)} />
PropTypeDescription
srcstringHTTP(S) URL、图片 Data URL、相对或绝对路径、file: URL，或 PikaIcons 资源名。相对路径基于脚本工作目录解析。
contentScale"fit" | "crop" | "fillBounds"图片在边界内的缩放方式，默认 "fit"。
contentScale行为
"fit"等比缩放，使整张图片完整显示在边界内。
"crop"等比缩放并填满边界，超出部分被裁剪。
"fillBounds"拉伸填满边界，不保持宽高比。

响应、图片数据或资源名无效时会抛出明确错误。

Spacer

占用由 modifier 指定大小的空白。与 Compose 的 Spacer 一样，不设尺寸时为 0 × 0，自身也不会伸展；要撑满 Row 或 Column 的剩余空间，给它加上 defaultWeight()。

<Row>
  <Text>左</Text>
  <Spacer modifier={Modifier.width(16)} />
  <Text>右</Text>
</Row>

HorizontalDivider 与 VerticalDivider

显示一条细分隔线。HorizontalDivider 填满可用宽度，VerticalDivider 填满可用高度。两者同样支持 modifier。

<Column>
  <Text>上方</Text>
  <HorizontalDivider color="#FF0000" thickness={2} />
  <Row modifier={Modifier.height(24)}>
    <Text>左</Text>
    <VerticalDivider />
    <Text>右</Text>
  </Row>
</Column>
PropTypeDescription
colorstring | { light, dark }线条颜色：十六进制颜色，或分别指定浅色/深色模式的颜色，默认使用主题的分隔线颜色。详见颜色取值。
thicknessnumber线条粗细（dp），默认 1。

布局

Glance 的每个 Column、Row、Box 在展开数组和 fragment 后最多渲染 10 个子节点。

Column

纵向排列子视图，同样支持 modifier。

<Column horizontalAlignment="center" spacing={4} modifier={Modifier.padding(12)}>
  <Text>标题</Text>
  <Text>副标题</Text>
</Column>
PropTypeDescription
horizontalAlignment"start" | "center" | "end"子视图的水平对齐方式，默认 "start"。
spacingnumber子视图之间的间距（dp），相当于 Arrangement.spacedBy，默认 0。

Row

横向排列子视图，同样支持 modifier。

<Row verticalAlignment="center" spacing={8} modifier={Modifier.padding(12)}>
  <Text>左</Text>
  <Text>右</Text>
</Row>
PropTypeDescription
verticalAlignment"top" | "center" | "bottom"子视图的垂直对齐方式，默认 "top"。
spacingnumber子视图之间的间距（dp），相当于 Arrangement.spacedBy，默认 0。

Box

叠放子视图，同样支持 modifier。

<Box contentAlignment="bottomEnd" modifier={Modifier.padding(12)}>
  <Text>标题</Text>
</Box>
PropTypeDescription
contentAlignmentContentAlignment子视图的叠放位置，默认 "topStart"。详见对齐取值。

示例：个人资料布局

<Row verticalAlignment="center" spacing={12} modifier={Modifier.padding(16)}>
  <Image
    src={profile.avatar}
    contentScale="crop"
    modifier={Modifier.size(64).cornerRadius(32)}
  />
  <Column spacing={4}>
    <Text fontSize={16} fontWeight="bold">{profile.nickname}</Text>
    <Text color="#777777">@{profile.id}</Text>
    <Row spacing={12}>
      <Text>{profile.followers} 粉丝</Text>
      <Text>{profile.following} 关注</Text>
    </Row>
  </Column>
</Row>

概述

发布原生桌面小组件快照。

Modifier

桌面小组件中与顺序无关的布局与装饰。

本页目录

TextDateTextImageSpacerHorizontalDivider 与 VerticalDivider布局ColumnRowBox示例：个人资料布局