组件 | SuperNode

从 supernode/app 导入组件。所有组件都通过 modifier 指定布局与装饰。颜色与对齐取值详见 View。

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

Text

显示文本。

<Text fontSize={16} fontWeight="bold" fontStyle="italic" color="#057AF6">
  Hello SuperNode
</Text>

Prop	Type	Description
`children`	`string` 或表达式	文本内容。
`fontSize`	`number`	字号（sp），默认 `14`。
`fontWeight`	`FontWeight`	字重，默认 `"normal"`。详见字体字重。
`fontStyle`	`"normal"` \| `"italic"`	字体样式，默认 `"normal"`。
`color`	`string` \| `{ light, dark }`	文字颜色：十六进制颜色，或分别指定浅色/深色模式的颜色，详见颜色取值。

字体字重

取值与 Compose FontWeight 一致。

取值	字重
`"thin"`	100
`"extraLight"`	200
`"light"`	300
`"normal"`	400
`"medium"`	500
`"semiBold"`	600
`"bold"`	700
`"extraBold"`	800
`"black"`	900

DateText

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

<DateText
  date={lastUpdatedAt}
  format="relative"
  suffix="前更新"
  color="#777777"
/>

Prop	Type	Description
`date`	`Date`	需要显示的时间点。无效的 `Date` 会抛出异常。
`format`	`DateTextFormat`	日期格式，详见日期格式。
`prefix`	`string`	日期前的静态文本。
`suffix`	`string`	日期后的静态文本。
`fontSize`	`number`	字号（sp），默认 `14`。
`fontWeight`	`FontWeight`	字重，默认 `"normal"`。
`fontStyle`	`"normal"` \| `"italic"`	字体样式，默认 `"normal"`。
`color`	`string` \| `{ light, dark }`	文字颜色：十六进制颜色，或分别指定浅色/深色模式的颜色。

prefix、动态日期和 suffix 会组成同一个文本视图，共享字体、颜色和换行行为。

日期格式

取值	用途
`"relative"`	显示时间差，例如“5 分钟”。
`"offset"`	显示带方向的时间偏移。
`"timer"`	显示倒计时或已经过的时间。
`"date"`	显示固定日期。
`"time"`	显示固定时间。

格式和时间单位由设备语言决定。页面可见期间，随时间变化的文本每秒更新一次。

TextField

受控文本输入。

<TextField value={name} placeholder="姓名" onValueChange={setName} />

Prop	Type	Description
`value`	`string`	当前输入值。
`onValueChange`	`(value: string) => void`	输入变化时回调最新字符串。
`placeholder`	`string`	空值时显示的占位文本。

Image

<Image src="home_smile_solid" contentScale="crop" modifier={Modifier.size(48)} />

Prop	Type	Description
`src`	`string`	HTTP(S) URL、图片 Data URL、相对或绝对路径、`file:` URL，或 PikaIcons 资源名，详见图片来源。
`contentScale`	`ContentScale`	图片在边界内的缩放方式，默认 `"fit"`，详见缩放方式。

缩放方式

取值与 Compose ContentScale 一致：

取值	行为
`"fit"`	等比缩放，使整张图片完整显示在边界内。
`"crop"`	等比缩放并填满边界，超出部分被裁剪。
`"fillBounds"`	拉伸填满边界，不保持宽高比。
`"fillWidth"`	等比缩放，使宽度与边界一致。
`"fillHeight"`	等比缩放，使高度与边界一致。
`"inside"`	与 `"fit"` 相同，但不会放大图片。
`"none"`	按原始尺寸显示。

图片来源

图片提供方由 src 的格式决定，相对路径基于脚本工作目录解析：

<Column>
  <Image src="https://example.com/avatar.png" />
  <Image src="http://example.com/avatar.png" />
  <Image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" />
  <Image src="home_smile_solid" />
  <Image src="images/avatar.png" />
</Column>

SuperNode 在显示视图之前下载远程图片。响应、图片数据或资源名无效时会抛出明确错误。

Spacer

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

<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>

Prop	Type	Description
`color`	`string` \| `{ light, dark }`	线条颜色：十六进制颜色，或分别指定浅色/深色模式的颜色，默认使用主题的分隔线颜色。详见颜色取值。
`thickness`	`number`	线条粗细（dp），默认 `1`。

布局

Column

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

<Column horizontalAlignment="center" spacing={4} modifier={Modifier.padding(12)}>
  <Text>标题</Text>
  <Text>副标题</Text>
</Column>

Prop	Type	Description
`horizontalAlignment`	`"start"` \| `"center"` \| `"end"`	子视图的水平对齐方式，默认 `"start"`。
`spacing`	`number`	子视图之间的间距（dp），相当于 `Arrangement.spacedBy`，默认 `0`。

Row

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

<Row verticalAlignment="center" spacing={8} modifier={Modifier.padding(12)}>
  <Text>左</Text>
  <Text>右</Text>
</Row>

Prop	Type	Description
`verticalAlignment`	`"top"` \| `"center"` \| `"bottom"`	子视图的垂直对齐方式，默认 `"top"`。
`spacing`	`number`	子视图之间的间距（dp），相当于 `Arrangement.spacedBy`，默认 `0`。

Box

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

<Box contentAlignment="bottomEnd" modifier={Modifier.padding(12)}>
  <Text>标题</Text>
</Box>

Prop	Type	Description
`contentAlignment`	`ContentAlignment`	子视图的叠放位置，默认 `"topStart"`。详见对齐取值。

示例：个人资料布局

<Row verticalAlignment="center" spacing={12} modifier={Modifier.padding(16)}>
  <Image
    src={profile.avatar}
    contentScale="crop"
    modifier={Modifier.size(64).clip(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>

组件

本页目录