แมปและรวม Flow
แปลงกระแสข้อมูลก่อนถึงหน้าจอ
แมปและรวม Flow เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Shape Data Before the UI
Raw data rarely matches what the screen needs. You use flow operators to transform a stream into ready-to-render UI state.
Transform with map
The map operator runs a function on each emission and passes the result downstream, leaving the original stream untouched.
val names = users.map { it.name }Filter Out Noise
Use filter to drop emissions you do not care about, so only the items that pass your condition reach the UI.
val active = users.filter { it.isActive }Combine Two Streams
The combine operator merges multiple flows and re-runs whenever any of them emits, giving you the latest value from each.
combine(query, results) { q, r -> SearchUi(q, r) }Combine Builds UI State
A common pattern is to combine several source flows into one immutable UiState object that fully describes the screen.
combine(items, loading, error) { i, l, e ->
UiState(i, l, e)
}Wait for All with zip
While combine fires on any change, zip pairs emissions one-to-one and waits until both flows have produced a new value.
flowA.zip(flowB) { a, b -> a + b }Switch to a New Stream
With flatMapLatest a new value cancels the previous inner flow and switches to a fresh one, perfect for live search.
query.flatMapLatest { repo.search(it) }Operators Are Cold by Default
Transformations like map and filter are cold: they describe work but do nothing until something downstream collects.
Chain Operators Freely
You can chain operators into a pipeline. Each one reads the stream above it and feeds the one below, top to bottom.
users.filter { it.isActive }
.map { it.name }Handle Errors in the Chain
The catch operator intercepts exceptions upstream so you can emit a fallback instead of crashing the whole stream.
repo.load().catch { emit(emptyList()) }Keep Logic in the ViewModel
Do your combine and map work in the ViewModel, then expose one clean state flow. The Composable stays simple and dumb.
Quick Check
Pick the operator for the job.
Recap: Mapping & Combining
Great work! Operators like map, filter, and combine reshape and merge streams in the ViewModel so the UI gets exactly the state it needs. 🎯
คำถามที่พบบ่อย
บทเรียน “แมปและรวม Flow” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แมปและรวม Flow” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แมปและรวม Flow”
แปลงกระแสข้อมูลก่อนถึงหน้าจอ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “แมปและรวม Flow” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ