Unverankerte Aktionsschaltfläche

Eine unverankerte Aktionsschaltfläche (UAS) ist eine hervorgehobene Schaltfläche, mit der der Nutzer eine primäre Aktion in einer Anwendung auszuführen. Eine einzelne, fokussierte Aktion wird gefördert. Dies ist der gängigste Weg, den Nutzende einschlagen, und wird in der Regel rechts unten auf dem Bildschirm verankert.

Betrachten Sie diese drei Anwendungsfälle, in denen Sie eine UAS verwenden könnten:

  • Neues Element erstellen: In einer Notiz-App kann eine UAS verwendet werden, um schnell um eine neue Notiz zu erstellen.
  • Neuen Kontakt hinzufügen: In einer Chat-App könnte eine UAS eine Oberfläche öffnen, über die Der Nutzer fügt einer Unterhaltung jemanden hinzu.
  • Standort zentrieren: Auf einer Kartenoberfläche könnte eine UAS die Karte auf der Karte zentrieren. auf den aktuellen Standort des Nutzers.

In Material Design gibt es vier Arten von FAB:

  • FAB: Eine unverankerte Aktionsschaltfläche normaler Größe.
  • Small FAB: Eine kleinere unverankerte Aktionsschaltfläche.
  • Large FAB: Eine größere unverankerte Aktionsschaltfläche.
  • Extended FAB: Eine unverankerte Aktionsschaltfläche, die mehr als nur ein .
<ph type="x-smartling-placeholder">
</ph> Ein Beispiel für jede der vier unverankerten Aktionsschaltflächenkomponenten.
Abbildung 1. Die vier unverankerten Aktionsschaltflächen.

API-Oberfläche

Es gibt mehrere zusammensetzbare Funktionen, mit denen Sie eine unverankerte Aktion erstellen können. die dem Material Design entsprechen, unterscheiden sich ihre Parameter nur geringfügig. Zu den wichtigsten Parametern gehören:

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer die Taste drückt.
  • containerColor: Die Farbe der Schaltfläche.
  • contentColor: Die Farbe des Symbols.

Unverankerte Aktionsschaltfläche

Verwenden Sie zum Erstellen einer allgemeinen unverankerten Aktionsschaltfläche die einfache FloatingActionButton zusammensetzbar. Das folgende Beispiel zeigt eine grundlegende Implementierung einer UAS:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Eine standardmäßige unverankerte Aktionsschaltfläche mit abgerundeten Ecken, einem Schatten und der Schaltfläche „Hinzufügen“ .
Abbildung 2: Eine unverankerte Aktionsschaltfläche

Kleine Schaltfläche

Um eine kleine unverankerte Aktionsschaltfläche zu erstellen, verwenden Sie den SmallFloatingActionButton zusammensetzbar. Im folgenden Beispiel sehen Sie, und benutzerdefinierte Farben hinzufügen.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Implementierung von SmallFloatingActionButton, die ein „add“ enthält .
Abbildung 3: Eine kleine unverankerte Aktionsschaltfläche

Große Schaltfläche

Um eine große unverankerte Aktionsschaltfläche zu erstellen, LargeFloatingActionButton zusammensetzbar. Diese zusammensetzbare Funktion ist deutlich von den anderen Beispielen, abgesehen davon, dass sie führt zu einer größeren Schaltfläche.

Im Folgenden wird eine einfache Implementierung einer großen UAS beschrieben.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Eine Implementierung von LargeFloatingActionButton, die ein &quot;add&quot; enthält .
Abbildung 4: Eine große unverankerte Aktionsschaltfläche

Schaltfläche „Erweitert“

Sie können komplexere unverankerte Aktionsschaltflächen mit der Funktion ExtendedFloatingActionButton zusammensetzbar. Der Hauptunterschied und FloatingActionButton ist, dass es dedizierte icon und text Parameter. Sie ermöglichen es Ihnen, eine Schaltfläche mit komplexeren Inhalten zu erstellen, damit der Inhalt entsprechend angepasst wird.

Das folgende Snippet zeigt, wie Sie ExtendedFloatingActionButton, wobei Beispielwerte für icon und text

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Implementierung von ExtendedFloatingActionButton, der Text mit dem Text „erweiterte Schaltfläche“ anzeigt und ein Bearbeitungssymbol.
Abbildung 5: Eine unverankerte Aktionsschaltfläche mit Text und einem Symbol.

Weitere Informationen