統計行とフォローボタン
カードにインタラクティブな要素を追加します。
「統計行とフォローボタン」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Add the Interactive Details
With the header done, you will add the lower half: a row of stats and a follow button that responds to taps. This is where the card comes alive. ⚡
One Stat Block
Each stat is two stacked Texts: a big number and a small label. A tiny Column holds them together as one neat block.
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("128")
Text("Posts")
}Emphasize the Number
The count should pop while the label stays quiet. Give the number a bold style and the label a smaller one.
Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)Put Stats in a Row
Three stat blocks sit side by side, so wrap them in a Row. Each block becomes a child laid out left to right.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Space the Stats Evenly
Spread the blocks across the card with Arrangement.SpaceEvenly on the Row, so the gaps are equal and balanced.
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }Add the Follow Button
Below the stats, add a Button. Its onClick lambda runs your code the moment the user taps it.
Button(onClick = { /* follow */ }) {
Text("Follow")
}Make It Full Width
A primary action button reads best across the whole card. Add fillMaxWidth so it spans edge to edge.
Button(
onClick = { /* follow */ },
modifier = Modifier.fillMaxWidth()
) { Text("Follow") }Track the Follow State
The button should toggle between Follow and Following. Hold that with remember and mutableStateOf so the UI reacts to taps.
var following by remember { mutableStateOf(false) }Flip State on Tap
Inside onClick, flip the boolean. Compose notices the state changed and redraws the button with new text automatically.
Button(onClick = { following = !following }) {
Text(if (following) "Following" else "Follow")
}Wire It Into the Card
Drop the stats Row and the Button below the header inside the outer Column. The full card now reads top to bottom in order.
An Interactive Card
You now have stats, a follow button, and live state. Tapping really changes the screen, which is the heart of a declarative Compose UI. 🎉
Quick Check
What lets the button text update when tapped?
Recap: Stats and Action
You built a Row of evenly spaced stat blocks and a full-width follow button driven by remembered state. Next you will refactor it all into clean, reusable pieces.
よくある質問
「統計行とフォローボタン」レッスンは無料ですか？
はい。「統計行とフォローボタン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「統計行とフォローボタン」で何を学びますか？
カードにインタラクティブな要素を追加します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「統計行とフォローボタン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。