Button
Przyciski to podstawowe komponenty, które pozwalają użytkownikowi wywołać działania. Istnieje pięć rodzajów przycisków. W tej tabeli opisano wygląd każdego z pięciu przycisków oraz miejsca ich stosowania .
Typ |
Wygląd |
Cel |
---|---|---|
Wypełnienie |
Jednolite tło z kontrastującym tekstem. |
Przyciski z dużą wyróżnieniem. Służą one do wykonywania głównych działań w aplikacji, np. „prześlij”. i „zapisz”. Efekt cienia podkreśla znaczenie przycisku. |
Tonal wypełniony |
Kolor tła zmienia się w zależności od powierzchni. |
Także w przypadku głównych lub ważnych działań. Wypełnione przyciski zapewniają bardziej wizualną widoczność funkcji, dzięki którym można dopasować wagę i rozmiar, np. „dodaj do koszyka”. i „Zaloguj się”. |
Podwyższona |
Wyróżnia się cieniem. |
Pełni rolę podobną do przycisków tonalnych. Zwiększ wysokość, aby przycisk był jeszcze lepiej widoczny. |
Kontur |
Ma obramowanie bez wypełnienia. |
Przyciski ze średnim naciskiem zawierające działania, które są ważne, ale nie są główne. Dobrze komponują się z innymi przyciskami, wskazując działania alternatywne, np. „Anuluj”. lub „Wstecz”. |
Tekst |
Wyświetla tekst bez tła i obramowania. |
Przyciski z małym naciskiem, idealne do mniej ważnych działań, takich jak linki nawigacyjne lub korzystanie z funkcji drugorzędnych, takich jak „Więcej informacji”. lub „Wyświetl szczegóły”. |
Ilustracja poniżej przedstawia 5 typów przycisków w interfejsie Material Design.
Interfejs API
onClick
: funkcja wywoływana, gdy użytkownik naciśnie przycisk.enabled
: jeśli ma wartość false (fałsz), ten parametr powoduje wyświetlenie przycisku. niedostępne i nieaktywne.colors
: wystąpienieButtonColors
, które określa kolory używane w: kliknij przycisk.contentPadding
: dopełnienie w obrębie przycisku.
Wypełniony przycisk
Komponent przycisku wypełnionego używa podstawowego elementu kompozycyjnego Button
. Jest
jest domyślnie wypełnione jednolitym kolorem. Ten fragment kodu pokazuje, jak
zaimplementuj komponent:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Implementacja wygląda tak:
![Wypełniony przycisk na fioletowym tle z napisem „Wypełniony”.](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=0000&hl=pl)
Wypełniony przycisk tonalny
Komponent wypełnienia przycisku tonalnego używa funkcji kompozycyjnej FilledTonalButton
.
Domyślnie jest wypełniany 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 tonalny na jasnofioletowym tle z napisem „Wypełniony”.](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=0000&hl=pl)
Przycisk z konturem
Komponent przycisku z listą elementów wykorzystuje element kompozycyjny OutlinedButton
. it
jest domyślnie wyświetlany z obrysem.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Implementacja wygląda tak:
![Przycisk z przezroczystym konturem w ciemnym obramowaniu i napisem „Obramowanie”.](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=0000&hl=pl)
Przycisk podniesiony
Komponent przycisku podniesionego używa funkcji kompozycyjnej ElevatedButton
. Zawiera
cień, który domyślnie reprezentuje efekt wysokości. Pamiętaj, że
jest to przycisk z obrysem i cieniem.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Implementacja wygląda tak:
![Uniesiony przycisk na szarym tle z napisem „Podwyższone”.](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=0000&hl=pl)
Przycisk tekstowy
Komponent przycisku tekstowego używa funkcji kompozycyjnej TextButton
. Dopóki nie naciśniesz przycisku,
jest wyświetlany tylko jako tekst. Domyślnie nie ma wypełnienia ani konturów.
Ten fragment kodu pokazuje, jak wdrożyć komponent:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Implementacja wygląda tak:
![Przycisk z tekstem „Przycisk tekstowy”](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=0000&hl=pl)