Composeの状態スロットとコンテンツラムダ
スロットAPIでコンポーネントを柔軟にします。
「Composeの状態スロットとコンテンツラムダ」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
柔軟なコンポーネントを作る
slotを使うと、UIの一部をパラメータとしてコンポーネントに渡せます。呼び出し元がslotを埋めるため、1つのコンポーネントでさまざまなデザインに対応できます。
content Lambdaを使う
最も一般的なslotは、末尾に置くcontent lambdaで、型は@Composable () -> Unitです。中括弧内に記述したものが本体になります。
fun Card(content: @Composable () -> Unit) {
Surface { content() }
}Slotを呼び出す
slotは通常のlambdaと同じように呼び出します。content()を呼び出した場所で、Composeが呼び出し元から渡されたUIを実行します。
Card {
Text("Anything I want lives here")
}BooleanよりSlotが優れている理由
showIconやshowTitleのような多数のフラグを用意する代わりに、slotsを公開します。呼び出し元は必要なものだけを、自由に組み合わせられます。
名前付きSlot
コンポーネントは、それぞれをパラメータとする複数のslotを提供できます。ScaffoldではtopBar、bottomBar、contentがこれに当たります。🧩
fun Banner(
title: @Composable () -> Unit,
action: @Composable () -> Unit
) { /* lay them out */ }Scopeで機能を追加する
slotをreceiver lambdaにすると、呼び出し元にヘルパーを提供できます。Columnの内部ではcontentがColumnScope.() -> Unitになるため、weightが使えます。
fun MyColumn(content: @Composable ColumnScope.() -> Unit) {
Column { content() }
}Slotにデータを渡す
slotから呼び出し元へ値を渡すこともできます。リスト行のslotで項目を渡せば、どのように描画するかを呼び出し元が決められます。
fun Row(item: User, content: @Composable (User) -> Unit) {
content(item)
}SlotでState Hoistingを維持する
slotの内容は呼び出し元が提供するため、コンポーネントは内部の内容についてステートレスでいられます。所有関係も明確に保たれます。
画面をまたいで再利用する
slotを持つ1つのCardやDialogで、よく似たコンポーネントを十数個作る必要がなくなります。枠組みを一度作り、中身だけを変えられます。♻️
Slotのデフォルト内容
slotに適切なdefaultを設定すると、単純な呼び出し元は省略でき、高度な呼び出し元は内容を完全に上書きできます。
fun Section(
header: @Composable () -> Unit = { Text("Section") },
content: @Composable () -> Unit
) { /* ... */ }Slotという考え方
コンポーネントがbooleanフラグを集め始めたら、代わりにslotsを使うことを検討してください。柔軟性は切り替えではなく、UIを渡すことから生まれます。
理解度チェック
content slot lambdaの主な利点は何ですか？
まとめ
slotはUIを@Composable lambdaとして受け取ります。必要に応じてScopeを付けたり、データを渡したりできます。状態を持ち上げたまま、柔軟なコンポーネントを作れます。🚀
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「Composeの状態スロットとコンテンツラムダ」レッスンは無料ですか？
はい。「Composeの状態スロットとコンテンツラムダ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「Composeの状態スロットとコンテンツラムダ」で何を学びますか？
スロットAPIでコンポーネントを柔軟にします。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Composeの状態スロットとコンテンツラムダ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ステートフルとステートレスなComposable
- valueとonValueChangeで状態をホイスティングする
- 単一の信頼できる情報源
- Composeの状態スロットとコンテンツラムダ