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 ono jedno konkretne działanie, które jest najczęstszą ścieżką użytkownika, i zazwyczaj znajduje się 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 pływający przycisk polecenia: 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 akcji, użyj podstawowego komponentu FloatingActionButton. 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:

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

Ta implementacja wygląda tak:

Duży przycisk

Aby utworzyć duży przycisk akcji pływającej, użyj komponentu LargeFloatingActionButton. Ta kompozycja nie różni się znacząco od innych przykładów, z tym wyjątkiem, że ma większy przycisk.

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:

Przycisk rozszerzony

Bardziej złożone pływające przyciski poleceń możesz tworzyć za pomocą funkcji ExtendedFloatingActionButton kompozycyjne. Główną różnicą między tymi parametrami a parametrem FloatingActionButton jest to, że mają one dedykowane parametry 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:

Dodatkowe materiały

• Typowe przyciski
• Dokumentacja interfejsu Material Design