Schaltfläche

keywords: AiAssisted, product:JetpackCompose

Schaltflächen sind grundlegende Komponenten, mit denen der Nutzer eine definierte Aktion auslösen kann. Es gibt fünf Arten von Schaltflächen. In dieser 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. Sie 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 tonale 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. Dient einem ähnlichen Zweck 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, 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“.

Dieses Bild 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 vom System aufgerufen wird, wenn der Nutzer auf die Schaltfläche drückt.
enabled
Wenn false, wird die Schaltfläche mit diesem Parameter als nicht verfügbar und inaktiv angezeigt.
colors
Eine Instanz von ButtonColors, die die Farben der Schaltfläche bestimmt.
contentPadding
Der Innenabstand der Schaltfläche.

Gefüllte Schaltfläche

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

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

Die 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 Snippet zeigt, wie die Komponente implementiert wird:

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

Die Implementierung sieht so aus:

Eine tonale Schaltfläche mit hellviolettem Hintergrund und dem Text „Tonal“.
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 Snippet zeigt, wie die Komponente implementiert wird:

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

Die 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 um eine gefüllte Schaltfläche mit Schatten.

Das Snippet zeigt, wie die Komponente implementiert wird:

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

Die 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 zum Drücken wird nur Text angezeigt. Standardmäßig hat sie keine durchgehende Füllung oder Umrisslinie.

Das Snippet zeigt, wie die Komponente implementiert wird:

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

Die Implementierung sieht so aus:

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

Zusätzliche Ressourcen