Text-, Outlined- und Icon-Buttons
Wählen Sie für die jeweilige Aufgabe die passende Button-Variante.
Text-, Outlined- und Icon-Buttons ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Buttons Have Personalities
Nicht jede Aktion verdient einen fett gefüllten Button. Compose bietet mehrere Button-Varianten, von denen jede einen anderen Grad an Wichtigkeit signalisiert. 🎨
The Filled Button
Der Standard-Button ist ausgefüllt und stark betont. Er zieht die Blicke auf sich; verwenden Sie ihn daher nur für die jeweils wichtigste Aktion pro Bildschirm.
Button(onClick = { pay() }) {
Text("Pay now")
}OutlinedButton for Secondary
Ein OutlinedButton hat nur einen Rand und keine Füllung. Er wirkt wie eine klare, aber sekundäre Option neben einer gefüllten Schaltfläche.
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}TextButton for Low Emphasis
Ein TextButton zeigt nur ein Label, keinen Rand und keine Füllung. Er eignet sich perfekt für unauffällige Aktionen wie „Mehr erfahren“ oder Dialogauswahlen.
TextButton(onClick = { dismiss() }) {
Text("Not now")
}Emphasis Is a Hierarchy
Betrachten Sie es als eine Leiter der Betonung: ausgefüllt ist am lautesten, umrandet ist mittel, Text ist am leisesten. Passen Sie die Variante an die Gewichtung der Aktion an.
Icons Inside Buttons
Jede Schaltfläche kann in ihrer Inhaltszeile ein Symbol sowie eine Beschriftung enthalten. Fügen Sie einen kleinen Abstandhalter hinzu, damit sich Symbol und Text nicht berühren.
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}The IconButton
Ein IconButton ist ein kompaktes, beschriftungsfreies Zielelement, das nur ein einzelnes Symbol enthält. Er ist ideal für Symbolleisten und Aktionen in App-Leisten.
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}Always Describe Your Icon
Geben Sie einer reinen Ikon-Schaltfläche eine contentDescription, damit Screenreader sie ankündigen können. Eine Null-Beschreibung blendet sie vor der Barrierefreiheit aus.
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}FilledIconButton for Emphasis
Sie benötigen einen Icon-Button, der hervorsticht? FilledIconButton fügt einen einfarbigen Hintergrund hinzu und hebt seine Gewichtung über die einfache Version hinaus.
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}Pick the Right Variant
Die richtige Wahl leitet die Nutzer: ausgefüllt für Bestätigen, umrandet für eine Alternative, Text zum Verwerfen, IconButton für beengte Platzverhältnisse.
Same onClick, Different Look
Jede Variante nutzt denselben onClick-Vertrag. Sie ändern lediglich das visuelle Gewicht, niemals jedoch die Art und Weise, wie Sie die Aktion anbinden.
Quick Check
Sie wünschen sich eine ruhige, unaufdringliche Aktion mit nur einer Beschriftung und ohne Rahmen oder Füllung.
Recap: Right Tool, Right Tap
Du hast jetzt einen Werkzeugkasten: gefüllter Button, OutlinedButton, TextButton und IconButton. Passe die Hervorhebung an die Aktion an und beschrifte deine Icons. ✨
Häufig gestellte Fragen
Ist die Lektion „Text-, Outlined- und Icon-Buttons“ kostenlos?
Ja — der vollständige Text von „Text-, Outlined- und Icon-Buttons“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Text-, Outlined- und Icon-Buttons“?
Wählen Sie für die jeweilige Aufgabe die passende Button-Variante. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Text-, Outlined- und Icon-Buttons“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Button und onClick
- Text-, Outlined- und Icon-Buttons
- Aktivierte, deaktivierte und ladende Zustände
- clickable für jede Composable