Jetpack Compose Academy · บทเรียน

ช่องสถานะ Compose และแลมบ์ดาเนื้อหา

ทำให้องค์ประกอบยืดหยุ่นด้วย API แบบช่อง

ช่องสถานะ Compose และแลมบ์ดาเนื้อหา เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Make Components Flexible

A slot lets a component accept a chunk of UI as a parameter. The caller fills the slot, so one component fits many designs.

Meet the content Lambda

The most common slot is a trailing content lambda of type @Composable () -> Unit. Whatever you put in braces becomes the body.

fun Card(content: @Composable () -> Unit) {
  Surface { content() }
}

Calling a Slot

You call the slot just like a normal lambda. Compose runs whatever UI the caller passed, right where you invoke content().

Card {
  Text("Anything I want lives here")
}

Why Slots Beat Booleans

Instead of many flags like showIcon or showTitle, expose slots. Callers compose exactly what they need, with full freedom.

Named Slots

Components can offer several slots, each a parameter. Scaffold does this with topBar, bottomBar, and content. 🧩

fun Banner(
  title: @Composable () -> Unit,
  action: @Composable () -> Unit
) { /* lay them out */ }

Scopes Add Power

A slot can be a receiver lambda, giving the caller helpers. Inside a Column, content is ColumnScope.() -> Unit so weight works.

fun MyColumn(content: @Composable ColumnScope.() -> Unit) {
  Column { content() }
}

Passing Data Into a Slot

Slots can hand values to the caller. A list row slot might pass the item so the caller decides how to draw it.

fun Row(item: User, content: @Composable (User) -> Unit) {
  content(item)
}

Slots Keep State Hoisted

Because the caller supplies the slot content, your component stays stateless about what is inside it. Ownership stays clear.

Reuse Across Screens

One Card or Dialog with slots replaces a dozen near-identical components. You build the frame once and vary the filling. ♻️

Default Slot Content

Give a slot a sensible default so simple callers can skip it, while advanced callers override it fully.

fun Section(
  header: @Composable () -> Unit = { Text("Section") },
  content: @Composable () -> Unit
) { /* ... */ }

The Slot Mindset

When a component starts collecting boolean flags, reach for slots instead. Flexibility comes from passing UI, not toggles.

Quick Check

What is the main benefit of a content slot lambda?

Recap

Slots accept UI as @Composable lambdas, optionally scoped or passing data. They make components flexible while keeping state hoisted. 🚀

คำถามที่พบบ่อย

บทเรียน “ช่องสถานะ Compose และแลมบ์ดาเนื้อหา” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ช่องสถานะ Compose และแลมบ์ดาเนื้อหา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ช่องสถานะ Compose และแลมบ์ดาเนื้อหา”

ทำให้องค์ประกอบยืดหยุ่นด้วย API แบบช่อง คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ช่องสถานะ Compose และแลมบ์ดาเนื้อหา” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Jetpack Compose Academy