สร้างการแจ้งเตือนด้วยแถบข้อมูลเล็กๆ

คอมโพเนนต์ Snackbar ทำหน้าที่เป็นการแจ้งเตือนสั้นๆ ที่ปรากฏที่ด้านล่างของหน้าจอ โดยแสดงผลป้อนกลับเกี่ยวกับการดำเนินการหรือการดำเนินการโดยไม่ขัดจังหวะประสบการณ์ของผู้ใช้ แซนคบาร์จะหายไปหลังจากผ่านไป 2-3 วินาที นอกจากนี้ผู้ใช้ยังปิดการแจ้งเตือนด้วยการดำเนินการต่างๆ เช่น การแตะปุ่มได้ด้วย

ลองพิจารณากรณีการใช้งาน 3 รูปแบบต่อไปนี้ที่คุณอาจใช้แถบข้อมูล

  • การยืนยันการดำเนินการ: หลังจากผู้ใช้ลบอีเมลหรือข้อความแล้ว แถบข้อมูลเล็กจะปรากฏขึ้นเพื่อยืนยันการดำเนินการและเสนอตัวเลือก "เลิกทำ"
  • สถานะเครือข่าย: เมื่อแอปไม่มีการเชื่อมต่ออินเทอร์เน็ต แบนเนอร์ข้อมูลข่าวสารจะปรากฏขึ้นเพื่อแจ้งว่าแอปออฟไลน์
  • การส่งข้อมูล: เมื่อส่งแบบฟอร์มหรืออัปเดตการตั้งค่าเรียบร้อยแล้ว แบนเนอร์ข้อมูลแจ้งจะแสดงว่าบันทึกการเปลี่ยนแปลงเรียบร้อยแล้ว

ความเข้ากันได้ของเวอร์ชัน

การติดตั้งใช้งานนี้กำหนดให้ต้องตั้งค่า minSDK ของโปรเจ็กต์เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

สร้างแถบข้อมูลข่าวสารพื้นฐาน

หากต้องการใช้แถบข้อมูล ให้สร้าง SnackbarHost ก่อน ซึ่งจะมีพร็อพเพอร์ตี้ SnackbarHostState SnackbarHostState ให้สิทธิ์เข้าถึงฟังก์ชัน showSnackbar() ซึ่งคุณใช้เพื่อแสดง Snackbar ได้

ฟังก์ชันการระงับนี้ต้องใช้ CoroutineScope เช่น การใช้ rememberCoroutineScope และสามารถเรียกให้แสดงเพื่อตอบสนองต่อเหตุการณ์ UI เพื่อแสดง Snackbar ภายใน Scaffold

สร้างแถบข้อมูลพร้อมการดำเนินการ

คุณสามารถระบุการดำเนินการที่ไม่บังคับและปรับระยะเวลาของ Snackbar ได้ ฟังก์ชัน snackbarHostState.showSnackbar() ยอมรับพารามิเตอร์ actionLabel และ duration เพิ่มเติม และแสดงผล SnackbarResult

คุณสามารถระบุ Snackbar ที่กําหนดเองได้โดยใช้พารามิเตอร์ snackbarHost ดูข้อมูลเพิ่มเติมได้ที่เอกสารอ้างอิงSnackbarHost API

ผลลัพธ์

รูปที่ 1 การแจ้งเตือนแบบแถบข้อมูลที่มีการดำเนินการ

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ