Symbol

Sử dụng SF Symbols để vẽ các biểu tượng hệ thống, chẳng hạn như đồng hồ tốc độ, nhiệt kế. Kích thước phông chữ biểu tượng, trọng lượng phông chữ và phương pháp tô màu có thể được đặt. Biểu tượng cụ thể có sẵn hay không tùy thuộc vào hệ thống thiết bị.

Ví dụ

function main() {
  return (
    <Symbol
      name="speedometer"
      fontSize={36}
      renderingMode="hierarchical"
      color={$env.accent}
    />
  );
}

Cách sử dụng

name là tên SF Symbols, không phải tệp. fontSize đặt cỡ biểu tượng, width/height đặt khung. paletteColors tô lớp. Biểu tượng hệ thống không hỗ trợ sẽ không biến thành ảnh.
Kích thước số dùng điểm. auto đo nội dung; fill dùng phần cha cấp. Đặt kích thước khung trước; fill và chữ dài không mở rộng khung cha cố định.

Thuộc tính

namestring

Tên SF Symbols như speedometer; khả dụng tùy hệ điều hành.

Ví dụ"location.north.fill"

fontSize?number

Cỡ chữ tính bằng point.

Ví dụ14

Độ đậm chữ từ ultraLight đến black; regular là thường.

Ví dụ"regular"

imageScale?"small" | "medium" | "large"

Cỡ tương đối small, medium hoặc large kết hợp với fontSize.

Ví dụ"medium"

renderingMode?"monochrome" | "hierarchical" | "palette" | "multicolor"

monochrome một màu, hierarchical phân cấp sắc độ, palette dùng paletteColors, multicolor giữ màu gốc.

Ví dụ"monochrome"

color?Paint

Màu vẽ, bao gồm màu HDR.

Ví dụHDR($env.foreground)

paletteColors?[Color] | [Color, Color] | [Color, Color, Color]

Một đến ba màu cho các lớp biểu tượng trong chế độ palette.

Ví dụ["red", "blue"]

contentAnimation?ContentAnimation

Chuyển tiếp khi nội dung đổi. Chọn type được hỗ trợ; duration/delay theo giây.

Ví dụ{type: "fade", duration: 0.25}

Thuộc tính chung

width?number | "auto" | "fill"

Chiều rộng tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ100

height?number | "auto" | "fill"

Chiều cao tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ80

padding?number

Khoảng đệm nội dung tính bằng point.

Ví dụ0

x?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

y?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

transform?ViewTransform

Biến đổi toàn View không đổi bố cục. Dịch chuyển theo điểm, xoay/nghiêng theo độ, tỷ lệ 1 giữ nguyên, điểm neo 0–1.

Ví dụ{rotation: 0}

background?Paint

Màu hoặc chuyển màu nền; clear là trong suốt.

Ví dụ"clear"

opacity?number

Độ đục toàn bộ View: 0 trong suốt, 1 đục hoàn toàn.

Ví dụ1

cornerRadius?number

Bán kính bo góc theo điểm.

Ví dụ0

clipped?boolean

Cắt phần vẽ vượt ra ngoài View.

Ví dụfalse

clip?"rectangle" | "ellipse"

Hình cắt rectangle hoặc ellipse; Material còn nhận false để tắt.

Ví dụ"rectangle"

mask?View | null

View mặt nạ alpha. Căn giữa mà không ảnh hưởng bố cục; null tắt mặt nạ.

Ví dụ<Circle width="fill" height="fill" background="white"/>

zIndex?number

Thứ tự vẽ giữa các phần tử cùng cấp; giá trị lớn nằm trước.

Ví dụ0

blur?number

Bán kính làm mờ theo điểm; 0 là tắt.

Ví dụ4

innerShadow?DrawingEffect

Màu, độ đục, bán kính mờ và độ lệch x/y của hiệu ứng; khoảng cách theo điểm.

Ví dụ{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Màu, độ đục, bán kính mờ và độ lệch x/y của hiệu ứng; khoảng cách theo điểm.

Ví dụ{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Màu bóng đổ bên ngoài.

Ví dụHDR("black")

shadowOpacity?number

Độ đục bóng 0–1; 0 ẩn bóng.

Ví dụ0

shadowRadius?number

Bán kính làm mờ bóng ngoài theo điểm.

Ví dụ4

shadowX?number

Độ lệch bóng theo điểm: x sang phải, y xuống.

Ví dụ0

shadowY?number

Độ lệch bóng theo điểm: x sang phải, y xuống.

Ví dụ2

animations?Animation[]

Hoạt ảnh khi thuộc tính đổi. duration/delay theo giây; from/to là đầu cuối; repeat/autoreverse điều khiển lặp, wrap là chu kỳ.

Ví dụ[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Định danh ổn định giữa các phần tử cùng cấp.

Ví dụ kết hợp

function main() {
  return (
    <HStack alignment="firstTextBaseline" spacing={8}>
      <Symbol
        name="speedometer"
        fontSize={32}
        renderingMode="hierarchical"
        color={$env.accent}
      />
      <Text fontSize={40}>78</Text>
      <Text fontSize={14}>km/h</Text>
    </HStack>
  );
}

Hoạt ảnh

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

Khi bỏ qua

Bảng ghi hành vi bỏ qua đã kiểm tra từ triển khai; ví dụ không phải mặc định. Muốn kết quả cố định hãy truyền giá trị rõ, kích thước và màu theo ngữ cảnh không phải hằng số.

Thuộc tính	Khi bỏ qua
`fontSize`	`14`
`fontWeight`	`"regular"`
`imageScale`	`"medium"`
`renderingMode`	`"monochrome"`
`color`	`HDR($env.foreground)`

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

Text

HStack

Color / Gradient

Trên trang này

Symbol

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

API liên quan

Text

HStack

Color / Gradient

Trên trang này