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” i „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 „Z konturem”.
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