Button

Schaltflächen sind grundlegende Komponenten, mit denen der Nutzer eine definierte Aktion auslösen kann. Es gibt fünf Arten von Schaltflächen. In der folgenden Tabelle wird das Aussehen der fünf Schaltflächentypen beschrieben und es wird angegeben, wo Sie sie verwenden sollten.

Eingeben

Darstellung

Zweck

Ausgefüllt

Einfarbiger Hintergrund mit kontrastierendem Text.

Schaltflächen mit hoher Gewichtung. Diese sind für primäre Aktionen in einer Anwendung vorgesehen, z. B. „Senden“ und „Speichern“. Der Schatteneffekt unterstreicht die Bedeutung der Schaltfläche.

Gefüllt, Ton in Ton

Die Hintergrundfarbe variiert je nach Oberfläche.

Auch für primäre oder wichtige Aktionen. Gefüllte Schaltflächen haben ein höheres visuelles Gewicht und eignen sich für Funktionen wie „In den Einkaufswagen legen“ und „Anmelden“.

Erhöht

Fällt durch einen Schatten auf.

Hat eine ähnliche Funktion wie tonale Schaltflächen. Erhöhen Sie die Erhebung, damit die Schaltfläche noch besser sichtbar ist.

Umrandet

Hat einen Rahmen ohne Füllung.

Schaltflächen mit mittlerer Gewichtung, die wichtige, aber nicht primäre Aktionen enthalten. Sie lassen sich gut mit anderen Schaltflächen kombinieren, um alternative oder sekundäre Aktionen wie „Abbrechen“ oder „Zurück“ zu kennzeichnen.

Text

Zeigt Text ohne Hintergrund oder Rahmen an.

Schaltflächen mit geringer Betonung, ideal für weniger wichtige Aktionen wie Navigationslinks oder sekundäre Funktionen wie „Weitere Informationen“ oder „Details ansehen“.

Die folgende Abbildung zeigt die fünf Arten von Schaltflächen in Material Design.

Ein Beispiel für jede der fünf Schaltflächenkomponenten, wobei die jeweiligen Merkmale hervorgehoben sind.
Abbildung 1: Die fünf Schaltflächenkomponenten.

API-Oberfläche

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer auf die Schaltfläche drückt.
  • enabled: Wenn dieser Parameter auf „false“ gesetzt ist, wird die Schaltfläche als nicht verfügbar und inaktiv angezeigt.
  • colors: Eine Instanz von ButtonColors, die die in der Schaltfläche verwendeten Farben bestimmt.
  • contentPadding: Der Innenabstand des Buttons.

Gefüllte Schaltfläche

Die Komponente für gefüllte Schaltflächen verwendet die einfache zusammensetzbare Funktion Button. Standardmäßig wird es mit einer durchgehenden Farbe gefüllt. Das folgende Snippet zeigt, wie die Komponente implementiert wird:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Eine gefüllte Schaltfläche mit lila Hintergrund und dem Text „Gefüllt“.
Abbildung 2: Eine gefüllte Schaltfläche.

Gefüllte tonale Schaltfläche

Für die Komponente „Gefüllte tonale Schaltfläche“ wird das Composable FilledTonalButton verwendet. Standardmäßig wird es mit einer tonalen Farbe gefüllt.

Das folgende Snippet zeigt, wie die Komponente implementiert wird:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Eine tonale Schaltfläche mit hellviolettem Hintergrund mit dem Text „Ausgefüllt“.
Abbildung 3: Eine tonale Schaltfläche.

Schaltfläche mit Umriss

Für die Komponente „Schaltfläche mit Umriss“ wird das Composable OutlinedButton verwendet. Sie wird standardmäßig mit einer Kontur angezeigt.

Das folgende Snippet zeigt, wie die Komponente implementiert wird:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Eine transparente Schaltfläche mit Umriss und einem dunklen Rand, auf der „Umriss“ steht.
Abbildung 4. Eine Schaltfläche mit Umriss.

Erhöhte Schaltfläche

Für die Komponente „Schaltfläche mit Schatten“ wird die zusammensetzbare Funktion ElevatedButton verwendet. Standardmäßig wird ein Schatten angezeigt, der den Höhenunterschied darstellt. Es handelt sich im Grunde um eine Schaltfläche mit Umriss und Schatten.

Das folgende Snippet zeigt, wie die Komponente implementiert wird:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Eine erhöhte Schaltfläche mit grauem Hintergrund und dem Text „Erhöht“.
Abbildung 5. Eine erhöhte Schaltfläche.

Schaltfläche „Text“

Für die Textschaltflächenkomponente wird die zusammensetzbare Funktion TextButton verwendet. Bis dahin wird es nur als Text angezeigt. Standardmäßig hat sie keine solide Füllung oder Kontur.

Das folgende Snippet zeigt, wie die Komponente implementiert wird:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Eine Textschaltfläche mit dem Text „Textschaltfläche“
Abbildung 6: Eine Textschaltfläche.

Zusätzliche Ressourcen