Text

显示读数、单位或说明文字。可设置字体、字号、对齐、换行和截断；内容统一转换为字符串，空值显示为空。

示例

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

用法说明

内容统一调用 toString()，null/undefined 显示为空；不能在 Text 内嵌 Symbol 等 View，图标与文字要用 HStack 组合。限制 width 后再设置 lineLimit 和 truncationMode，才能观察到换行和截断。minimumScaleFactor=1 不会缩小文字。
数字尺寸使用屏幕点；auto 根据内容测量，fill 使用父布局分配的空间。先给容器明确尺寸，再调整子 View。fill 不会创建额外空间，长文本也不会自动撑开固定尺寸的父级。

属性

children?TextContent | TextContent[]

子视图内容。

fontSize?number

字号，单位为点。

示例14

字重从 ultraLight 到 black；regular 为正常字重。

示例"regular"

font?"default" | "rounded" | "monospaced" | "serif"

字体设计：default 默认、rounded 圆角、monospaced 等宽、serif 衬线。

示例"default"

color?Paint

绘图颜色，支持 HDR 颜色。

示例HDR($env.foreground)

alignment?"leading" | "center" | "trailing"

文字在可用宽度内的对齐方式：leading 起始、center 居中、trailing 末尾。

示例"leading"

lineLimit?number | null

最多显示的文字行数；null 或省略时允许换行且不限制行数。

示例1

truncationMode?"head" | "middle" | "tail"

文字放不下时省略的位置：head 开头、middle 中间、tail 结尾。

示例"tail"

minimumScaleFactor?number

空间不足时文字可缩小到的最小比例，范围 0.01–1；1 表示不缩小。

示例0.5

monospacedDigits?boolean

让数字使用相同宽度，避免数值变化时左右跳动。

示例true

letterSpacing?number

额外字符间距，单位为点。

示例0

contentAnimation?ContentAnimation

内容变化时的过渡效果；选择该 View 支持的 type，duration/delay 单位为秒。

示例{type: "numericText"}

通用属性

width?number | "auto" | "fill"

宽度：点数、自动测量或填满父区域。

示例100

height?number | "auto" | "fill"

高度：点数、自动测量或填满父区域。

示例80

padding?number

内容内边距，单位为点。

示例0

x?number

视觉偏移，单位为点：x 向右、y 向下，不改变布局占位。

示例0

y?number

视觉偏移，单位为点：x 向右、y 向下，不改变布局占位。

示例0

transform?ViewTransform

对整个 View 做视觉变换，不改变布局。平移用点，旋转和倾斜用角度，缩放 1 保持原大小，锚点用 0–1。

示例{rotation: 0}

background?Paint

背景填充，可使用颜色或渐变；clear 表示透明。

示例"clear"

opacity?number

整个 View 的不透明度：0 完全透明，1 完全不透明。

示例1

cornerRadius?number

圆角半径，单位为点。

示例0

clipped?boolean

是否裁剪超出 View 边界的绘制内容。

示例false

clip?"rectangle" | "ellipse"

裁剪形状：rectangle 矩形或 ellipse 椭圆。Material 还可用 false 关闭裁剪。

示例"rectangle"

mask?View | null

透明度遮罩 View，居中显示且不影响布局；null 表示不使用遮罩。

示例<Circle width="fill" height="fill" background="white"/>

zIndex?number

同级 View 的绘制顺序，数值越大越靠前。

示例0

blur?number

模糊半径，单位为点；0 表示不模糊。

示例4

innerShadow?DrawingEffect

特效的颜色、不透明度、模糊半径和 x/y 偏移；距离单位为点。

示例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

特效的颜色、不透明度、模糊半径和 x/y 偏移；距离单位为点。

示例{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

外部阴影的颜色。

示例HDR("black")

shadowOpacity?number

外部阴影的不透明度，范围 0–1；0 隐藏阴影。

示例0

shadowRadius?number

外部阴影的模糊半径，单位为点。

示例4

shadowX?number

外部阴影偏移，单位为点：x 向右，y 向下。

示例0

shadowY?number

外部阴影偏移，单位为点：x 向右，y 向下。

示例2

animations?Animation[]

支持的属性变化时执行动画。duration/delay 单位为秒；from/to 指定端点；repeat 和 autoreverse 控制重复，wrap 指定周期。

示例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

兄弟节点中的稳定标识。

组合示例

function main() {
  return (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

动画

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

省略时的行为

下表只列经实现核对的省略行为；属性旁的示例是可复制写法，不是默认值。需要固定效果时显式传值，尺寸、主题颜色等随上下文变化的属性不要当作固定常量。

属性	省略时的行为
`fontSize`	`14`
`fontWeight`	`"regular"`
`font`	`"default"`
`monospacedDigits`	`true`
`minimumScaleFactor`	`1`
`lineLimit`	`null`
`alignment`	`"center"`
`truncationMode`	`"tail"`
`color`	`HDR($env.foreground)`

示例

用法说明

属性

组合示例

动画

省略时的行为

HStack

Symbol

Color / Gradient

本页内容

Text

示例

用法说明

属性

组合示例

动画

省略时的行为

相关 API

HStack

Symbol

Color / Gradient

本页内容