Pływający przycisk polecenia (FAB) to wyróżniający się przycisk, który pozwala wykonać główne działanie w aplikacji. Promuje jedno, skoncentrowane działanie to najczęstsza ścieżka, którą może wybrać użytkownik. w prawym dolnym rogu ekranu.
Oto 3 przypadki użycia przycisku PPP:
- Utwórz nowy element: w aplikacji do robienia notatek możesz użyć przycisku PPP, aby szybko utwórz nową notatkę.
- Dodaj nowy kontakt: w aplikacji do obsługi czatu PPP może otworzyć interfejs, który pozwala użytkownik dodaje kogoś do rozmowy.
- Lokalizacja pośrodku: w interfejsie mapy przycisk PPP może wyśrodkować mapę na bieżącej lokalizacji użytkownika.
W stylu Material Design są 4 rodzaje przycisków PPP:
- FAB: pływający przycisk polecenia o zwykłym rozmiarze.
- Mały przycisk typu FAB: mniejszy pływający przycisk polecenia.
- Duży przycisk typu FAB: większy pływający przycisk polecenia.
- Rozszerzony przycisk FAB: pływający przycisk polecenia, który zawiera więcej niż tylko .
Interfejs API
Istnieje kilka funkcji kompozycyjnych, których można użyć do utworzenia akcji pływającej zgodne ze stylem Material Design, ich parametry nie różnią się znacząco. Oto najważniejsze parametry, o których należy pamiętać:
onClick
: funkcja wywoływana, gdy użytkownik naciśnie przycisk.containerColor
: kolor przycisku.contentColor
: kolor ikony.
Pływający przycisk polecenia
Aby utworzyć ogólny pływający przycisk polecenia, użyj
FloatingActionButton
kompozycyjne. Poniższy przykład pokazuje
podstawowa implementacja przycisku PPP:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Implementacja wygląda tak:
![Standardowy pływający przycisk polecenia z zaokrąglonym rogiem, cieniem i opcją „dodaj” .](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?authuser=19&hl=pl)
Mały przycisk
Aby utworzyć mały pływający przycisk polecenia, skorzystaj z
SmallFloatingActionButton
kompozycyjne. Poniższy przykład pokazuje,
jak to zrobić, dodając kolory niestandardowe.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Implementacja wygląda tak:
![Implementacja obiektu SmallFloatingActionButton zawierająca element „add” .](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=19&hl=pl)
Duży przycisk
Aby utworzyć duży pływający przycisk polecenia, użyj funkcji
LargeFloatingActionButton
kompozycyjne. Ten element kompozycyjny nie jest
różnią się znacznie od pozostałych przykładów poza tym, że
powoduje większy rozmiar przycisku.
Poniżej widać prostą implementację dużego przycisku PPP.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Implementacja wygląda tak:
![Implementacja obiektu LargeFloatingActionButton zawierający element „add” .](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=19&hl=pl)
Przycisk rozszerzony
Bardziej złożone pływające przyciski poleceń możesz tworzyć za pomocą funkcji
ExtendedFloatingActionButton
kompozycyjne. Główna różnica między nimi
a FloatingActionButton
– dedykowane rozwiązania icon
i text
. Umożliwiają utworzenie przycisku ze złożoną, bardziej skomplikowaną treścią
aby ją dopasować do treści.
Fragment kodu poniżej pokazuje, jak zaimplementować
ExtendedFloatingActionButton
z przykładowymi wartościami przekazanymi dla parametrów icon
i
text
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Implementacja wygląda tak:
![Implementacja komponentu ExtendedFloatingActionButton wyświetlającego tekst „rozszerzony przycisk” i ikonę edycji.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?authuser=19&hl=pl)