Button und onClick
Führen Sie Code aus, wenn der Nutzer tippt.
Button und onClick ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Tap, Then React
Ein Button ist die einfachste Konversation deiner App: Der Nutzer tippt, dein Code wird ausgeführt. In Compose drückst du dies mit dem Button-Composable aus. 👆
The Button Composable
Ein Button benötigt zwei Dinge: eine onClick-Aktion und einen anzuzeigenden Inhalt, normalerweise eine Textbeschriftung in seinem nachgestellten Lambda.
Button(onClick = { /* do work */ }) {
Text("Tap me")
}onClick Runs on Tap
Das onClick-Lambda wird jedes Mal ausgeführt, wenn die Schaltfläche gedrückt wird. Schreiben Sie dort beliebiges Kotlin-Code hinein, wie das Aktualisieren eines Wertes.
Button(onClick = { count = count + 1 }) {
Text("Add one")
}Content Is a Lambda
Alles zwischen den geschweiften Klammern des Buttons ist dessen Inhalt. Sie sind nicht auf Text beschränkt; jede Composable-Funktion kann sich in diesem Slot befinden.
Button(onClick = { send() }) {
Text("Send now")
}Wire Up Real State
onClick glänzt erst richtig mit State: Ändere dort einen Wert und die Benutzeroberfläche zeichnet sich automatisch neu, um dem neuen Wert zu entsprechen.
var liked by remember { mutableStateOf(false) }
Button(onClick = { liked = !liked }) {
Text(if (liked) "Liked" else "Like")
}Call a Function
Verweisen Sie für übersichtlichen Code bei onClick auf eine benannte Funktion, anstatt die Logik direkt einzubinden. So bleibt Ihre UI lesbar und die Logik testbar.
Button(onClick = ::saveProfile) {
Text("Save")
}Buttons Look Filled by Default
Ein einfacher Button wird als gefüllter, hervorgehobener Button dargestellt: einfarbiger Hintergrund, kontrastierendes Label. Er signalisiert die Hauptaktion auf einem Bildschirm.
One Primary Action
Verwende den gefüllten Button nur für die wichtigste Aktion, wie „Absenden“ oder „Weiter“. Zu viele gefüllte Buttons konkurrieren um Aufmerksamkeit.
Empty onClick Does Nothing
Ein leerer onClick-Lambda-Ausdruck kompiliert zwar problemlos und der Button zeigt weiterhin den Ripple-Effekt, aber es passiert nichts. Verknüpfen Sie ihn immer mit echtem Verhalten. 🤔
Button(onClick = { }) {
Text("Does nothing yet")
}Pass a Modifier
Wie die meisten Composables akzeptiert Button einen Modifikator, mit dem Sie ihn in seinem übergeordneten Layout in der Größe anpassen, mit Innenabständen versehen oder abstatten können.
Button(
onClick = { go() },
modifier = Modifier.fillMaxWidth()
) { Text("Continue") }Tap to Confirm
Betrachte onClick als den Moment der Entscheidung: Der Nutzer hat sich festgelegt. Verwende es zum Speichern, Navigieren oder Auslösen der von ihm gewünschten Arbeit.
Quick Check
Du hast einen Button geschrieben, aber das Tippen darauf bewirkt nichts.
Recap: Tap Into Action
Du hast die Button-Composable-Funktion kennengelernt: ein onClick-Lambda für das Verhalten sowie ein content-Lambda für die Beschriftung. Tippen, Code ausführen, Status aktualisieren. 🎉
Häufig gestellte Fragen
Ist die Lektion „Button und onClick“ kostenlos?
Ja — der vollständige Text von „Button und onClick“ 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 „Button und onClick“?
Führen Sie Code aus, wenn der Nutzer tippt. 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 1 von 4.
Wie lange dauert die Lektion „Button und onClick“?
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