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

整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 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

本頁內容