Przycisk

keywords: AiAssisted, product:JetpackCompose

Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi uruchomienie określonego działania. Istnieje 5 rodzajów przycisków. W tej tabeli opisujemy wygląd każdego z 5 typów przycisków oraz miejsca, w których należy ich używać:

Typ Wygląd Cel
Wypełniony Jednolite tło z kontrastującym tekstem. przyciski o wysokim kontraście; Są one przeznaczone do głównych działań w aplikacji, takich jak „prześlij” i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Wypełniony tonalny Kolor tła zmienia się w zależności od powierzchni. Dotyczy to też działań głównych lub istotnych. Wypełnione przyciski tonalne mają większą wagę wizualną i są odpowiednie w przypadku funkcji takich jak „Dodaj do koszyka” czy „Zaloguj się”.
Wysoka Wyróżnia się cieniem. Pełnią podobną funkcję jak przyciski tonalne. Zwiększ poziom, aby przycisk był jeszcze bardziej widoczny.
Kontur Zawiera obramowanie bez wypełnienia. Przyciski o średnim znaczeniu, które zawierają ważne, ale nie główne działania. Dobrze komponują się z innymi przyciskami, wskazując alternatywne działania dodatkowe, takie jak „Anuluj” czy „Wstecz”.
Tekst Wyświetla tekst bez tła i obramowania. Przyciski o niskim kontraście, idealne do mniej istotnych działań, takich jak linki nawigacyjne czy funkcje dodatkowe, np. „Więcej informacji” lub „Wyświetl szczegóły”.

Ilustracja przedstawiająca 5 rodzajów przycisków w Material Design:

Przykłady każdego z 5 komponentów przycisków z wyróżnionymi unikalnymi cechami.
Rysunek 1. 5 komponentów przycisków.

Powierzchnia interfejsu API

onClick
Funkcja wywoływana przez system, gdy użytkownik naciśnie przycisk.
enabled
Gdy ma wartość false, ten parametr sprawia, że przycisk jest niedostępny i nieaktywny.
colors
Instancja ButtonColors, która określa kolory używane w przycisku.
contentPadding
Dopełnienie w przycisku.

Wypełniony przycisk

Komponent wypełnionego przycisku korzysta z podstawowego komponentu Button. Domyślnie jest wypełniony jednolitym kolorem. Fragment kodu pokazuje, jak wdrożyć komponent:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Implementacja wygląda tak:

Wypełniony przycisk z fioletowym tłem z napisem „Wypełniony”.
Rysunek 2. Wypełniony przycisk.

Wypełniony przycisk tonalny

Komponent wypełnionego przycisku tonalnego korzysta z komponentu FilledTonalButton. Domyślnie jest wypełniony kolorem tonalnym.

Fragment kodu pokazuje, jak wdrożyć komponent:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Implementacja wygląda tak:

Przycisk tonalny na jasnofioletowym tle z napisem „Tonal”.
Rysunek 3. Przycisk tonalny.

Przycisk z konturem

Komponent przycisku z obramowaniem korzysta z komponentu OutlinedButton. Domyślnie jest on otoczony konturem.

Fragment kodu pokazuje, jak wdrożyć komponent:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Implementacja wygląda tak:

Przezroczysty przycisk z konturem i ciemnym obramowaniem z tekstem „Outlined”.
Rysunek 4. Przycisk z konturem.

Przycisk podniesiony

Komponent podniesionego przycisku korzysta z komponentu ElevatedButton. Domyślnie ma cień, który reprezentuje efekt wysokości. Jest to wypełniony przycisk z cieniem.

Fragment kodu pokazuje, jak wdrożyć komponent:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Implementacja wygląda tak:

Przycisk podniesiony z szarym tłem z napisem „Podniesiony”.
Rysunek 5. Przycisk podniesiony.

Przycisk tekstowy

Komponent przycisku tekstowego korzysta z komponentu TextButton. Do momentu naciśnięcia przycisku jest on widoczny tylko jako tekst. Domyślnie nie ma wypełnienia ani obrysu.

Fragment kodu pokazuje, jak wdrożyć komponent:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Implementacja wygląda tak:

Przycisk tekstowy z napisem „Przycisk tekstowy”
Rysunek 6. Przycisk tekstowy.

Dodatkowe materiały