Group

Kết hợp nhiều View thành một tổng thể, áp dụng thống nhất độ trong suốt, xoay hoặc các hiệu ứng đặc biệt khác. Con View tuân theo các quy tắc sắp xếp của vùng chứa bên ngoài và các hiệu ứng đặc biệt được áp dụng cho toàn bộ tập hợp kết quả tổng hợp.

Ví dụ

function main() {
  return (
    <Group transform={{ rotation: 12 }} opacity={0.8}>
      <Text>12</Text>
      <Symbol name="bolt.fill" />
    </Group>
  );
}

Cách sử dụng

Group không tạo quy tắc xếp; con tham gia bố cục bên ngoài. Hiệu ứng và độ mờ áp dụng sau ghép nhóm, khác opacity riêng ở vùng chồng. Dùng Stack ngoài cho kích thước và padding.
Dùng ID dữ liệu ổn định làm key để giữ danh tính khi cập nhật và hoạt ảnh. Chỉ số mảng không phù hợp làm ID cố định khi đổi thứ tự.
x/y và transform áp dụng sau bố cục. Dời con không đẩy các con khác; dùng spacing hoặc Spacer. Xoay và tỷ lệ tác động lên toàn bộ hình đã vẽ.

Thuộc tính

children?ViewContent

Nội dung vẽ con.

Thuộc tính chung

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

Ví dụ kết hợp

function main() {
  return (
    <HStack spacing={12}>
      <Group opacity={0.6} transform={{ rotation: 10 }}>
        <Text fontSize={40}>78</Text>
        <Symbol name="speedometer" fontSize={28} />
      </Group>
      <Text>km/h</Text>
    </HStack>
  );
}

Hoạt ảnh

opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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
`opacity`	`1`
`zIndex`	`0`

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

HStack

ZStack

Trên trang này

Group

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

HStack

ZStack

Trên trang này