Pływający przycisk polecenia

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 .
.
Przykład każdego z 4 komponentów pływającego przycisku polecenia.
Rysunek 1. Cztery typy pływających przycisków polecenia.

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.")
    }
}
FloatingActionButton.kt

Implementacja wygląda tak:

Standardowy pływający przycisk polecenia z zaokrąglonym rogiem, cieniem i opcją „dodaj” .
Rysunek 2. Pływający przycisk polecenia.

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.")
    }
}
FloatingActionButton.kt

Implementacja wygląda tak:

Implementacja obiektu SmallFloatingActionButton zawierająca element „add” .
Rysunek 3. Mały pływający przycisk polecenia.

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")
    }
}
FloatingActionButton.kt

Implementacja wygląda tak:

Implementacja obiektu LargeFloatingActionButton zawierający element „add” .
Rysunek 4. Duży pływający przycisk polecenia.

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") },
    )
}
FloatingActionButton.kt

Implementacja wygląda tak:

Implementacja komponentu ExtendedFloatingActionButton wyświetlającego tekst „rozszerzony przycisk” i ikonę edycji.
Rysunek 5. Pływający przycisk polecenia z tekstem i ikoną.

Dodatkowe materiały