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 die Darstellung der fünf Schaltflächentypen sowie ihre Verwendung beschrieben.
Typ |
Darstellung |
Zweck |
---|---|---|
Ausgefüllt |
Einfarbiger Hintergrund mit kontrastierendem Text. |
Hervorgehobene Schaltflächen. Diese beziehen sich auf primäre Aktionen in einer App, z. B. „Senden“ und „Speichern“. Der Schatteneffekt betont die Bedeutung der Schaltfläche. |
Gefüllter Farbton |
Die Hintergrundfarbe variiert je nach Oberfläche. |
Auch für primäre oder wichtige Aktionen. Ausgefüllte Schaltflächen bieten Funktionen für das visuelle Gewicht und den Anzug, z. B. „In den Warenkorb“ und „Anmelden“. |
Erhöht |
Durch einen Schatten hebt sich das Bild von der Masse ab. |
Entspricht einer ähnlichen Rolle wie bei den Tonwerten-Schaltflächen. Erhöhen Sie die Höhe, damit die Schaltfläche noch stärker hervorgehoben wird. |
Umrissen |
Es hat einen Rahmen ohne Füllung. |
Schaltflächen mit mittlerer Betonung, die Aktionen enthalten, die wichtig, aber nicht primär sind. Sie lassen sich gut mit anderen Schaltflächen kombinieren, um alternative, sekundäre Aktionen wie „Abbrechen“ oder „Zurück“ anzuzeigen. |
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.
API-Oberfläche
onClick
: Die Funktion, die aufgerufen wird, wenn der Nutzer die Taste drückt.enabled
: Wenn dieser Parameter auf „false“ gesetzt ist, erscheint die Schaltfläche als nicht verfügbar und inaktiv.colors
: Eine Instanz vonButtonColors
, die die in der Schaltfläche verwendeten Farben bestimmt.contentPadding
: Der Abstand innerhalb der Schaltfläche.
Schaltfläche mit Füllung
Für die Komponente für die ausgefüllte Schaltfläche wird die einfache zusammensetzbare Funktion 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") } }
Diese Implementierung sieht so aus:
Schaltfläche mit Füllung in Ton
Für die ausgefüllte Komponente „Tonalschaltfläche“ wird die zusammensetzbare Funktion FilledTonalButton
verwendet.
Standardmäßig wird es mit einem Tonwert gefüllt.
Das folgende Snippet veranschaulicht die Implementierung der Komponente:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Diese Implementierung sieht so aus:
Schaltfläche mit Umriss
Für die Komponente für die umrissene Schaltfläche wird die zusammensetzbare Funktion OutlinedButton
verwendet. Sie wird standardmäßig mit einem Umriss dargestellt.
Das folgende Snippet veranschaulicht die Implementierung der Komponente:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Diese Implementierung sieht so aus:
Erhöhte Schaltfläche
Die Komponente für die Schaltfläche mit erweiterten Berechtigungen verwendet die zusammensetzbare Funktion ElevatedButton
. Es hat einen Schatten, der standardmäßig den Höheneffekt darstellt. Beachten Sie, dass es sich im Wesentlichen um eine umrissene Schaltfläche mit einem Schatten handelt.
Das folgende Snippet veranschaulicht die Implementierung der Komponente:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Diese Implementierung sieht so aus:
Schaltfläche „Text“
Die Komponente „Textschaltfläche“ verwendet die zusammensetzbare Funktion TextButton
. Solange sie nicht angeklickt werden,
erscheint sie nur als Text. Sie hat standardmäßig keine durchgehende Füllung oder einen Umriss.
Das folgende Snippet veranschaulicht die Implementierung der Komponente:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Diese Implementierung sieht so aus: