Schaltfläche

Schaltflächen sind grundlegende Komponenten, mit denen der Nutzer eine festgelegte Aktion auslösen kann. Es gibt fünf Arten von Schaltflächen. In der folgenden Tabelle werden die Darstellung der fünf Schaltflächentypen und deren Verwendung beschrieben.

Typ	Darstellung	Zweck
Ausgefüllt	Einfarbiger Hintergrund mit kontrastierendem Text.	Hervorgehobene Schaltflächen. Sie gelten für primäre Aktionen in einer App, z. B. „Senden“ und „Speichern“. Der Schatteneffekt unterstreicht die Bedeutung der Schaltfläche.
Gefüllte Tonwerte	Die Hintergrundfarbe variiert je nach Oberfläche.	Auch für primäre oder wichtige Aktionen. Ausgefüllte Schaltflächen bieten mehr visuelles Gewicht und Funktionen wie „In den Warenkorb“ und „Anmelden“.
Erhöht	Hat einen Schatten, hebt sich von der Masse ab.	Entspricht einer ähnlichen Funktion wie Tontasten. Wenn Sie die Elevation erhöhen, erscheint die Schaltfläche noch besser.
Umrissen	Das Element 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.	Schaltflächen mit geringer Betonung, 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.

Abbildung 1: Komponenten mit fünf Schaltflächen

API-Oberfläche

• onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer die Taste 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.

Schaltfläche mit Füllung

Für die Komponente der ausgefüllten Schaltfläche wird die grundlegende 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")
    }
}
Button.kt

Hinweis: Wenn Sie eine benutzerdefinierte Schaltfläche erstellen möchten, verwenden Sie die zusammensetzbare Funktion Button.

Diese Implementierung sieht so aus:

Abbildung 2: Eine ausgefüllte Schaltfläche

Schaltfläche mit ausgefülltem Ton

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

Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:

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

Diese Implementierung sieht so aus:

Abbildung 3: Eine tonale Schaltfläche.

Schaltfläche mit Umriss

Die umrissene Schaltflächenkomponente verwendet die zusammensetzbare Funktion OutlinedButton. Es wird standardmäßig mit einem Umriss angezeigt.

Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:

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

Diese Implementierung sieht so aus:

Abbildung 4: Eine umrissene Schaltfläche.

Erhöhte Schaltfläche

Für die Komponente „Schaltfläche mit erhöhten Angaben“ wird die zusammensetzbare Funktion ElevatedButton verwendet. 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, wie die Komponente implementiert wird:

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

Diese Implementierung sieht so aus:

Abbildung 5: Eine Taste mit erhöhter Sichtbarkeit.

Schaltfläche „Text“

Für die Komponente „Textschaltfläche“ wird die zusammensetzbare Funktion TextButton verwendet. Bis sie klicken, wird sie nur als Text angezeigt. Sie hat nicht standardmäßig eine durchgehende Füllung oder einen durchgehenden Umriss.

Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:

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

Diese Implementierung sieht so aus:

Abbildung 6: Eine Textschaltfläche.

Zusätzliche Ressourcen

• Unverankerte Aktionsschaltfläche
• Material-UI-Dokumente