Przejdź do treści głównej
Wersja: Następna

Właściwości stylu widoku

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Przykład

Dokumentacja

Właściwości

backfaceVisibility

Type
enum('visible', 'hidden')

backgroundColor

Type
color

borderBottomColor

Type
color

borderBlockColor

Type
color

borderBlockEndColor

Type
color

borderBlockStartColor

Type
color

borderBottomEndRadius

Type
number, string (percentage value)

borderBottomLeftRadius

Type
number, string (percentage value)

borderBottomRightRadius

Type
number, string (percentage value)

borderBottomStartRadius

Type
number, string (percentage value)

borderStartEndRadius

Type
number, string (percentage value)

borderStartStartRadius

Type
number, string (percentage value)

borderEndEndRadius

Type
number, string (percentage value)

borderEndStartRadius

Type
number, string (percentage value)

borderBottomWidth

Type
number

borderColor

Type
color

borderCurve
iOS

W iOS 13+ możliwa jest zmiana krzywizny narożników obramowania.

Type
enum('circular', 'continuous')

borderEndColor

Type
color

borderLeftColor

Type
color

borderLeftWidth

Type
number

borderRadius

Jeśli zaokrąglone obramowanie nie jest widoczne, spróbuj również zastosować overflow: 'hidden'.

Type
number, string (percentage value)

borderRightColor

Type
color

borderRightWidth

Type
number

borderStartColor

Type
color

borderStyle

Type
enum('solid', 'dotted', 'dashed')

borderTopColor

Type
color

borderTopEndRadius

Type
number, string (percentage value)

borderTopLeftRadius

Type
number, string (percentage value)

borderTopRightRadius

Type
number, string (percentage value)

borderTopStartRadius

Type
number, string (percentage value)

borderTopWidth

Type
number, string (percentage value)

borderWidth

Type
number

boxShadow

uwaga

boxShadow jest dostępne tylko w Nowej Architekturze. Cienie zewnętrzne są obsługiwane tylko w Androidzie 9+. Cienie wewnętrzne są obsługiwane tylko w Androidzie 10+.

Dodaje efekt cienia do elementu z możliwością kontroli pozycji, koloru, rozmiaru i rozmycia cienia. Cień może pojawiać się na zewnątrz lub wewnątrz obramowania elementu, w zależności od tego, czy jest to cień wewnętrzny. Jest to zgodna ze specyfikacją implementacja tej samej właściwości stylu webowego. Więcej informacji o dostępnych argumentach znajdziesz w dokumentacji BoxShadowValue.

Cienie te można łączyć, dzięki czemu pojedynczy boxShadow może składać się z wielu różnych cieni.

boxShadow przyjmuje albo ciąg znaków naśladujący składnię webową, albo tablicę obiektów BoxShadowValue.

Type
array of BoxShadowValue objects | string

cursor
iOS

W iOS 17+ ustawienie wartości pointer umożliwia efekty hover, gdy wskaźnik (np. trackpad lub rysik w iOS lub wzrok użytkownika w visionOS) znajduje się nad widokiem.

Type
enum('auto', 'pointer')

elevation
Android

Ustawia elewację widoku przy użyciu natywnego interfejsu elewacji Androida. Dodaje to cień padający do elementu i wpływa na kolejność z-index dla nakładających się widoków. Obsługiwane tylko w Androidzie 5.0+, bez efektu we wcześniejszych wersjach.

Type
number

filter

uwaga

filter jest dostępny tylko w Nowej Architekturze

Dodaje filtr graficzny do View. Filtr ten składa się z dowolnej liczby funkcji filtrujących, z których każda reprezentuje atomową zmianę w kompozycji graficznej View. Pełna lista dostępnych funkcji filtrujących jest zdefiniowana poniżej. filter będzie stosowany zarówno do potomków View, jak i do samego View. filter implikuje overflow: hidden, więc potomkowie zostaną przycięci do granic View.

Następujące funkcje filtrujące działają na wszystkich platformach:

  • brightness: Zmienia jasność View. Przyjmuje nieujemną liczbę lub wartość procentową.

  • opacity: Zmienia przezroczystość (alfa) View. Przyjmuje nieujemną liczbę lub wartość procentową.

uwaga

Ze względu na problemy z wydajnością i zgodnością ze specyfikacją, na iOS dostępne są tylko te dwie funkcje filtrów. Istnieją plany zbadania potencjalnych obejść przy użyciu SwiftUI zamiast UIKit w tej implementacji.

Android

Następujące funkcje filtrów działają tylko na systemie Android:

  • blur: Rozmywa View przy użyciu filtru Gaussa, gdzie podana długość określa promień używany w algorytmie rozmycia. Dopuszczalne są nieujemne wartości DIP (bez procentów). Im większa wartość, tym bardziej rozmyty wynik.

  • contrast: Zmienia kontrast View. Przyjmuje nieujemną liczbę lub wartość procentową.

  • dropShadow: Dodaje cień wokół maski alfa View (tylko piksele o niezerowej wartości alfa w View będą rzucać cień). Przyjmuje opcjonalny kolor cienia oraz 2 lub 3 wartości długości. Jeśli podano 2 wartości, interpretowane są jako offsetX i offsetY przesuwające cień odpowiednio w osi X i Y. Jeśli podano 3. wartość, interpretowana jest jako odchylenie standardowe rozmycia Gaussa – im większa wartość, tym bardziej rozmyty cień. Więcej o argumentach w DropShadowValue.

  • grayscale: Konwertuje View na skalę szarości w określonym stopniu. Przyjmuje nieujemną liczbę lub wartość procentową, gdzie 1 lub 100% oznacza całkowitą skalę szarości.

  • hueRotate: Zmienia odcień View. Argument tej funkcji definiuje kąt koła kolorów, wokół którego odcień będzie obracany, np. 360deg nie da żadnego efektu. Kąt może mieć jednostki deg lub rad.

  • invert: Inwertuje kolory w View. Przyjmuje nieujemną liczbę lub wartość procentową, gdzie 1 lub 100% oznacza całkowitą inwersję.

  • sepia: Konwertuje View na sepia. Przyjmuje nieujemną liczbę lub wartość procentową, gdzie 1 lub 100% oznacza całkowite sepia.

  • saturate: Zmienia nasycenie View. Przyjmuje nieujemną liczbę lub wartość procentową.

uwaga

blur i dropShadow są obsługiwane tylko na Android 12+

filter przyjmuje albo tablicę obiektów składających się z powyższych funkcji filtrów, albo ciąg znaków naśladujący składnię webową.

Type
array of objects: {brightness: number|string}, {opacity: number|string}, {blur: number|string}, {contrast: number|string}, {dropShadow: DropShadowValue|string}, {grayscale: number|string}, {hueRotate: number|string}, {invert: number|string}, {sepia: number|string}, {saturate: number|string} or string

mixBlendMode

uwaga

mixBlendMode jest dostępny tylko w Nowej Architekturze

Kontroluje sposób mieszania kolorów View z innymi elementami w jego kontekście warstw (stacking context). Pełny opis każdej funkcji mieszania znajdziesz w dokumentacji MDN.

Do bardziej precyzyjnej kontroli nad zakresem mieszania warto zobaczyć isolation.

Wartości mixBlendMode
  • normal: Element jest rysowany na tle bez mieszania.

  • multiply: Kolor źródłowy jest mnożony przez kolor docelowy i zastępuje docelowy.

  • screen: Mnoży dopełnienia kolorów tła i źródła, a następnie dopełnia wynik.

  • overlay: Mnoży lub wyświetla (screen) kolory, w zależności od wartości koloru tła.

  • darken: Wybiera ciemniejszy z kolorów tła i źródła.

  • lighten: Wybiera jaśniejszy z kolorów tła i źródła.

  • color-dodge: Rozjaśnia kolor tła, aby odzwierciedlić kolor źródłowy. Malowanie czernią nie powoduje zmian.

  • color-burn: Przyciemnia kolor tła, aby odzwierciedlić kolor źródłowy. Malowanie bielą nie powoduje zmian.

  • hard-light: Mnoży lub wyświetla (screen) kolory, w zależności od wartości koloru źródłowego. Efekt jest podobny do oświetlania tła ostrym światłem punktowym.

  • soft-light: Przyciemnia lub rozjaśnia kolory, w zależności od wartości koloru źródłowego. Efekt jest podobny do oświetlania tła rozproszonym światłem punktowym.

  • difference: Odejmuje ciemniejszy z dwóch składowych kolorów od jaśniejszego koloru.

  • exclusion: Tworzy efekt podobny do trybu Difference, ale o mniejszym kontraście.

  • hue: Tworzy kolor z odcieniem (hue) koloru źródłowego oraz nasyceniem i jasnością koloru tła.

  • saturation: Tworzy kolor z nasyceniem koloru źródłowego oraz odcieniem i jasnością koloru tła.

  • color: Tworzy kolor o barwie i nasyceniu koloru źródłowego oraz jasności koloru tła. Zachowuje poziomy szarości tła i jest przydatny do kolorowania obrazów monochromatycznych lub barwienia obrazów kolorowych.

  • luminosity: Tworzy kolor o jasności koloru źródłowego oraz barwie i nasyceniu koloru tła. Daje to efekt odwrotny do trybu Color.

Type
enum('normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity')

opacity

Type
number

outlineColor

uwaga

outlineColor jest dostępne tylko w Nowej Architekturze

Ustawia kolor obramowania (outline) elementu. Więcej szczegółów w dokumentacji webowej.

Type
color

outlineOffset

uwaga

outlineOffset jest dostępne tylko w Nowej Architekturze

Ustawia odstęp między obramowaniem a granicami elementu. Nie wpływa na układ. Więcej szczegółów w dokumentacji webowej.

Type
number

outlineStyle

uwaga

outlineStyle jest dostępne tylko w Nowej Architekturze

Ustawia styl obramowania elementu. Więcej szczegółów w dokumentacji webowej.

Type
enum('solid', 'dotted', 'dashed')

outlineWidth

uwaga

outlineWidth jest dostępne tylko w Nowej Architekturze

Szerokość obramowania zewnętrznego rysowanego wokół elementu, poza właściwym obramowaniem. Nie wpływa na układ. Więcej szczegółów w dokumentacji webowej.

Type
number

pointerEvents

Kontroluje, czy View może być celem zdarzeń dotykowych.

  • 'auto': View może być celem zdarzeń dotykowych.

  • 'none': View nigdy nie jest celem zdarzeń dotykowych.

  • 'box-none': Widok nigdy nie jest celem zdarzeń dotykowych, ale jego widoki potomne mogą być.

  • 'box-only': Widok może być celem zdarzeń dotykowych, ale jego widoki potomne nie mogą.

Type
enum('auto', 'box-none', 'box-only', 'none' )