ButtonとonClick
ユーザーがタップしたときにコードを実行します。
「ButtonとonClick」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Tap, Then React
A button is your app's simplest conversation: the user taps, your code runs. In Compose you express this with the Button composable. 👆
The Button Composable
A Button needs two things: an onClick action and some content to show, usually a Text label inside its trailing lambda.
Button(onClick = { /* do work */ }) {
Text("Tap me")
}onClick Runs on Tap
The onClick lambda runs once each time the button is pressed. Put any plain Kotlin code you want there, like updating a value.
Button(onClick = { count = count + 1 }) {
Text("Add one")
}Content Is a Lambda
Everything between the button's braces is its content. You are not limited to text; any composable can live inside that slot.
Button(onClick = { send() }) {
Text("Send now")
}Wire Up Real State
onClick really shines with state: change a value there and the UI redraws to match the new value automatically.
var liked by remember { mutableStateOf(false) }
Button(onClick = { liked = !liked }) {
Text(if (liked) "Liked" else "Like")
}Call a Function
For tidy code, point onClick at a named function instead of inlining logic. Your UI stays readable and the logic stays testable.
Button(onClick = ::saveProfile) {
Text("Save")
}Buttons Look Filled by Default
A plain Button renders as a filled, high-emphasis button: solid background, contrasting label. It signals the main action on a screen.
One Primary Action
Reserve the filled Button for the single most important action, like Submit or Continue. Too many filled buttons compete for attention.
Empty onClick Does Nothing
An empty onClick lambda compiles fine and the button still ripples, but nothing happens. Always wire it to real behavior. 🤔
Button(onClick = { }) {
Text("Does nothing yet")
}Pass a Modifier
Like most composables, Button accepts a modifier so you can size, pad, or space it within its parent layout.
Button(
onClick = { go() },
modifier = Modifier.fillMaxWidth()
) { Text("Continue") }Tap to Confirm
Think of onClick as the moment of commitment: the user has decided. Use it to save, navigate, or trigger the work they asked for.
Quick Check
You wrote a Button but tapping it does nothing.
Recap: Tap Into Action
You met the Button composable: an onClick lambda for behavior plus a content lambda for its label. Tap, run code, update state. 🎉
よくある質問
「ButtonとonClick」レッスンは無料ですか？
はい。「ButtonとonClick」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「ButtonとonClick」で何を学びますか？
ユーザーがタップしたときにコードを実行します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ButtonとonClick」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。