Przejdź do treści głównej
Wersja: 0.82

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 i Androidzie 10+

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' )