Button

Schaltflächen sind grundlegende Komponenten, mit denen Nutzer eine definierte Aktion auslösen können. Es gibt fünf Arten von Schaltflächen. In der folgenden Tabelle wird das Aussehen der fünf Schaltflächentypen beschrieben und erläutert, wo sie verwendet werden sollten.

Eingeben

Darstellung

Zweck

Ausgefüllt

Einfarbiger Hintergrund mit kontrastierendem Text

Schaltflächen mit hoher Gewichtung Sie gelten für primäre Aktionen in einer App, z. B. „Senden“ und „Speichern“. Der Schatteneffekt unterstreicht die Wichtigkeit der Schaltfläche.

Ausgemalte Ton in Ton-Farbe

Die Hintergrundfarbe passt sich der Oberfläche an.

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

Erhöht

Sie heben sich durch einen Schatten ab.

Sie haben eine ähnliche Funktion wie farbliche Schaltflächen. Erhöhen Sie die Erhöhung, damit die Schaltfläche noch besser sichtbar ist.

Umrandet

Hat einen Rahmen ohne Füllung.

Schaltflächen mit mittlerer Betonung, die Aktionen enthalten, die wichtig, aber nicht primär sind. Sie passen gut zu anderen Schaltflächen, um alternative, sekundäre Aktionen wie „Abbrechen“ oder „Zurück“ anzuzeigen.

Text

Zeigt Text ohne Hintergrund oder Rahmen an.

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

Das folgende Bild zeigt die fünf Arten von Schaltflächen in Material Design.

Ein Beispiel für jede der fünf Schaltflächenkomponenten, wobei ihre einzigartigen Merkmale hervorgehoben werden.
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 Abstand innerhalb der Schaltfläche.

Gefüllte Schaltfläche

Für die Schaltfläche mit Füllung wird die grundlegende Komponente Button verwendet. Es ist standardmäßig mit einer Volltonfarbe 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 einem lila Hintergrund, auf der „filled“ steht.
Abbildung 2: Eine ausgefüllte Schaltfläche

Gefüllte Schaltfläche mit Ton

Für die Komponente mit ausgefüllten Tonwerten wird die zusammensetzbare Funktion FilledTonalButton verwendet. Standardmäßig wird eine Tonfarbe angezeigt.

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 farblich abgestimmte Schaltfläche mit helllila Hintergrund, auf der „filled“ (ausgefüllt) steht.
Abbildung 3: Eine farblich hervorgehobene Schaltfläche.

Schaltfläche mit Umriss

Für die umrandete Schaltflächenkomponente wird das OutlinedButton-Element verwendet. Sie wird standardmäßig mit einem Umriss 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 dunklem Rahmen mit der Aufschrift „Outlined“ (Umriss).
Abbildung 4: Eine Schaltfläche mit Umriss.

Erhöhte Schaltfläche

Für die Komponente „Schaltfläche mit erhöhten Angaben“ wird die zusammensetzbare Funktion ElevatedButton verwendet. Sie hat standardmäßig einen Schatten, der den Höheneffekt darstellt. Beachten Sie, dass es sich im Grunde um eine umrandete Schaltfläche mit einem Schatten handelt.

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 hervorgehobene Schaltfläche mit grauem Hintergrund, auf der „Elevated“ (Hervorgehoben) steht.
Abbildung 5 Eine erhöhte Schaltfläche.

Textschaltfläche

Für die Schaltfläche mit Text wird das TextButton-Element verwendet. Bis zum Drücken wird nur Text angezeigt. Sie hat standardmäßig keine durchgehende Füllung oder keinen Umriss.

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 der Aufschrift „Textschaltfläche“
Abbildung 6: Eine Textschaltfläche.

Weitere Informationen