Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi wywołanie zdefiniowanego działania. Jest 5 typów przycisków. W tabeli poniżej opisujemy, jak wygląda każdy z 5 typów przycisków oraz gdzie należy ich używać.
Typ |
Wygląd |
Cel |
---|---|---|
Wypełnienie |
Jednolite tło z kontrastującym tekstem. |
Przyciski z dużym naciskiem. Służą one do wykonywania głównych czynności w aplikacji, takich jak „prześlij” czy „zapisz”. Efekt cienia podkreśla znaczenie przycisku. |
Wypełniony ton |
Kolor tła różni się w zależności od powierzchni. |
Także w przypadku głównych lub ważnych działań. Wypełnione przyciski mają bardziej wizualny charakter i funkcje takie jak „Dodaj do koszyka” czy „Zaloguj się”. |
Podwyższona |
Wyróżnij się dzięki cieniowi. |
Pełni rolę podobną do przycisków tonalnych. Zwiększ wysokość, aby przycisk był bardziej widoczny. |
Z konturem |
Zawiera obramowanie bez wypełnienia. |
Przyciski z średnim naciskiem zawierające czynności, które są ważne, ale nie są główne. Można je połączyć z innymi przyciskami wskazującymi alternatywne działania, takie jak „Anuluj” lub „Wstecz”. |
Tekst |
Wyświetla tekst bez tła ani obramowania. |
Przyciski z niewielkim naciskiem, idealny do wykonywania mniej ważnych działań, takich jak linki nawigacyjne, lub funkcji dodatkowych, takich jak „Więcej informacji” czy „Wyświetl szczegóły”. |
Na ilustracji poniżej pokazano 5 typów przycisków w stylu Material Design.
Interfejs API
onClick
: funkcja wywoływana po naciśnięciu przycisku przez użytkownika.enabled
: jeśli ma wartość Fałsz, ten parametr sprawia, że przycisk wydaje się niedostępny i nieaktywny.colors
: wystąpienieButtonColors
, które określa kolory używane w przycisku.contentPadding
: dopełnienie przycisku.
Wypełniony przycisk
Komponent Wypełniony przycisk używa podstawowego elementu kompozycyjnego Button
. Domyślnie jest ono wypełnione jednolitym kolorem. Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Implementacja wygląda tak:
Przycisk wypełnienia tonu
Komponent wypełnienia przycisku tonalnego korzysta z funkcji kompozycyjnej FilledTonalButton
.
Domyślnie jest ono wypełnione kolorem tonalnym.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Implementacja wygląda tak:
Przycisk z konturem
Komponent przycisku z zaznaczonym tekstem korzysta z funkcji kompozycyjnej OutlinedButton
. Domyślnie wyświetla się z obramowaniem.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Implementacja wygląda tak:
Przycisk podniesiony
Komponent Przycisk z podwyższonym poziomem używa funkcji kompozycyjnej ElevatedButton
. Ma cień, który domyślnie reprezentuje efekt wysokości. Zasadniczo jest to przycisk
z konturem i cieniem.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Implementacja wygląda tak:
Przycisk tekstowy
Komponent przycisk tekstowy korzysta z funkcji kompozycyjnej TextButton
. Dopóki go nie klikniesz,
będzie się wyświetlać jako tekst. Domyślnie nie ma pełnego wypełnienia ani konturu.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Implementacja wygląda tak: