CapDrive
Panduan penggunaan

Group

Gabungkan beberapa View menjadi satu kesatuan, terapkan transparansi, rotasi, atau efek khusus lainnya secara seragam. Anak View mengikuti aturan pengaturan wadah luar, dan efek khusus diterapkan ke seluruh rangkaian hasil sintesis.

Contoh

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

Penggunaan

  • Group tidak membuat aturan susunan; anak mengikuti layout luar. Efek dan opasitas diterapkan setelah penggabungan sehingga berbeda dari opacity individual pada tumpang tindih. Gunakan Stack luar untuk ukuran dan padding.
  • Gunakan ID data stabil sebagai key agar identitas dan animasi terjaga. Indeks array tidak cocok sebagai ID tetap saat urutan berubah.
  • x/y dan transform diterapkan setelah layout. Memindah anak tidak mendorong saudara; gunakan spacing atau Spacer. Rotasi dan skala memengaruhi seluruh gambar.

Properti

children?ViewContent

Konten gambar anak.

Properti umum
transform?ViewTransform

Transformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.

Contoh{rotation: 0}
background?Paint

Warna atau gradasi latar; clear berarti transparan.

Contoh"clear"
opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1
cornerRadius?number

Radius sudut dalam poin.

Contoh0
clipped?boolean

Potong gambar yang melewati batas View.

Contohfalse
clip?"rectangle" | "ellipse"

Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.

Contoh"rectangle"
mask?View | null

View masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.

Contoh<Circle width="fill" height="fill" background="white"/>
zIndex?number

Urutan gambar antar saudara; nilai lebih besar di depan.

Contoh0
blur?number

Radius buram dalam poin; 0 menonaktifkan.

Contoh4
innerShadow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Warna bayangan luar.

ContohHDR("black")
shadowOpacity?number

Opasitas bayangan 0–1; 0 menyembunyikannya.

Contoh0
shadowRadius?number

Radius buram bayangan luar dalam poin.

Contoh4
shadowX?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh0
shadowY?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh2
animations?Animation[]

Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.

Contoh[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identitas stabil di antara elemen sejajar.

Contoh""

Contoh praktis

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>
  );
}

Animasi

Animasi

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

Jika dihilangkan

Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.

PropertiJika dihilangkan
opacity1
zIndex0

HStack

ZStack

Image

Sebelumnya

Spacer

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait