0Pricing
Jetpack Compose Academy · บทเรียน

Snackbar และ SnackbarHostState

แสดงข้อความชั่วคราวตามแนวทาง Material

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

Snackbar คืออะไร

Snackbar คือข้อความสั้น ๆ ที่เลื่อนขึ้นมาจากด้านล่าง เช่น ส่งข้อความแล้ว จากนั้นจะค่อย ๆ หายไปเอง เป็นการแจ้งให้ทราบโดยไม่ปิดกั้นหน้าจอ 💬

Snackbar กับกล่องโต้ตอบ

กล่องโต้ตอบต้องการการตอบกลับ แต่ Snackbar ไม่ต้องการ ใช้ Snackbar สำหรับการยืนยันอย่างรวดเร็ว ไม่ใช่ตัวเลือกที่ผู้ใช้จำเป็นต้องตัดสินใจ

รู้จัก SnackbarHostState

การแสดง Snackbar ขับเคลื่อนด้วย SnackbarHostState ออบเจ็กต์นี้เก็บคิวและมอบฟังก์ชันที่ใช้เรียกข้อความ

val hostState = remember { SnackbarHostState() }

จดจำสถานะไว้

ครอบสถานะไว้ด้วย remember เพื่อให้ SnackbarHostState เดิมคงอยู่ระหว่างการจัดองค์ประกอบใหม่ หากสร้างใหม่ทุกเฟรม ข้อความที่รอแสดงจะหายไป

ช่อง snackbarHost

บอกโครงร่างว่า Snackbar ควรปรากฏที่ใด โดยเติมช่อง snackbarHost ด้วย SnackbarHost ที่เชื่อมกับสถานะของคุณ

snackbarHost = { SnackbarHost(hostState) }

showSnackbar เป็น Suspend

ฟังก์ชัน showSnackbar จะหยุดรอการทำงานชั่วคราว เพราะต้องรอขณะที่ข้อความแสดงอยู่ ดังนั้นคุณต้องเรียกใช้จากโครูทีน ไม่ใช่เรียกโดยตรงในเหตุการณ์คลิก

เปิดใช้จากขอบเขต

รับ rememberCoroutineScope แล้วเปิดใช้ showSnackbar ภายในขอบเขตนั้น วิธีนี้เชื่อม onClick ปกติเข้ากับการเรียกแบบ Suspend ได้อย่างปลอดภัย

scope.launch {
    hostState.showSnackbar("Saved")
}

เพิ่มการดำเนินการ

ส่ง actionLabel เพื่อเพิ่มปุ่ม เช่น เลิกทำ การเรียกใช้จะคืนผลลัพธ์ที่บอกว่าผู้ใช้แตะการดำเนินการนั้นหรือไม่

val result = hostState.showSnackbar(
    "Deleted", actionLabel = "Undo"
)

ตอบสนองต่อผลลัพธ์

ตรวจสอบ SnackbarResult ที่ส่งกลับมา หากมีค่าเท่ากับ ActionPerformed ให้เรียกใช้ตรรกะการเลิกทำ มิฉะนั้น Snackbar จะถูกปิดไปตามปกติ

if (result == SnackbarResult.ActionPerformed) {
    restoreItem()
}

ควบคุมระยะเวลา

กำหนดระยะเวลาที่ข้อความจะแสดงด้วย SnackbarDuration: Short, Long หรือ Indefinite ใช้ Indefinite เฉพาะเมื่อข้อความนั้นต้องการให้ผู้ใช้ดำเนินการจริง ๆ

โฮสต์เดียว หลายข้อความ

SnackbarHostState เดียวสามารถจัดคิวข้อความและแสดงทีละข้อความได้ ดังนั้นควรแชร์โฮสต์เดียวต่อโครงร่าง แทนการสร้างหลายโฮสต์

ตรวจสอบอย่างรวดเร็ว

เหตุใดคุณจึงต้องเปิดใช้ showSnackbar ภายในขอบเขตของโครูทีน

สรุป

จดจำ SnackbarHostState เชื่อมเข้ากับ snackbarHost ของโครงร่าง แล้วเปิดใช้ showSnackbar จากขอบเขต ตอนนี้คุณสามารถสร้างโครงแอปที่สมบูรณ์ได้แล้ว 🎉

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

บทเรียน “Snackbar และ SnackbarHostState” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Snackbar และ SnackbarHostState”

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

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

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

บทเรียน “Snackbar และ SnackbarHostState” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Scaffold: โครงร่างหน้าจอ
  2. TopAppBar และไอคอนการดำเนินการ
  3. แถบด้านล่างและปุ่มการดำเนินการลอย
  4. Snackbar และ SnackbarHostState
← กลับไปที่ Jetpack Compose Academy