คอมโพเนนต์แถบแสดงข้อความทำหน้าที่เป็นการแจ้งเตือนสั้นๆ ที่ปรากฏที่ด้านล่างของหน้าจอ โดยแสดงผลป้อนกลับเกี่ยวกับการดำเนินการหรือการดำเนินการโดยไม่ขัดจังหวะประสบการณ์ของผู้ใช้ แถบแสดงข้อความจะหายไปหลังจากผ่านไป 2-3 วินาที นอกจากนี้ผู้ใช้ยังปิดการแจ้งเตือนด้วยการดำเนินการต่างๆ เช่น การแตะปุ่มได้ด้วย
ลองพิจารณากรณีการใช้งาน 3 รูปแบบต่อไปนี้ที่คุณอาจใช้แถบข้อมูล
- การยืนยันการดำเนินการ: หลังจากผู้ใช้ลบอีเมลหรือข้อความแล้ว แถบข้อมูลเล็กจะปรากฏขึ้นเพื่อยืนยันการดำเนินการและเสนอตัวเลือก "เลิกทำ"
- สถานะเครือข่าย: เมื่อแอปขาดการเชื่อมต่ออินเทอร์เน็ต แบนเนอร์ข้อมูลข่าวสารจะปรากฏขึ้นเพื่อแจ้งว่าแอปออฟไลน์
- การส่งข้อมูล: เมื่อส่งแบบฟอร์มหรืออัปเดตการตั้งค่าเรียบร้อยแล้ว แบนเนอร์ข้อมูลแจ้งจะแสดงว่าบันทึกการเปลี่ยนแปลงเรียบร้อยแล้ว
ตัวอย่างพื้นฐาน
หากต้องการใช้แถบข้อมูล ให้สร้าง SnackbarHost
ก่อน ซึ่งจะมีพร็อพเพอร์ตี้ SnackbarHostState
SnackbarHostState
ให้สิทธิ์เข้าถึงฟังก์ชัน showSnackbar()
ที่ใช้แสดงแถบแสดงข้อความได้
ฟังก์ชันการระงับนี้ต้องใช้ CoroutineScope
เช่น เมื่อใช้ rememberCoroutineScope
และสามารถเรียกใช้เมื่อตอบกลับเหตุการณ์ UI เพื่อแสดง Snackbar
ภายใน Scaffold
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { snackbarHostState.showSnackbar("Snackbar") } } ) } ) { contentPadding -> // Screen content }
แถบแสดงข้อความพร้อมปุ่มกด
คุณสามารถระบุการดำเนินการที่ไม่บังคับและปรับระยะเวลาของ Snackbar
ได้
ฟังก์ชัน snackbarHostState.showSnackbar()
ยอมรับพารามิเตอร์ actionLabel
และ duration
เพิ่มเติม และแสดงผล SnackbarResult
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { val result = snackbarHostState .showSnackbar( message = "Snackbar", actionLabel = "Action", // Defaults to SnackbarDuration.Short duration = SnackbarDuration.Indefinite ) when (result) { SnackbarResult.ActionPerformed -> { /* Handle snackbar action performed */ } SnackbarResult.Dismissed -> { /* Handle snackbar dismissed */ } } } } ) } ) { contentPadding -> // Screen content }
คุณระบุ Snackbar
ที่กำหนดเองได้ด้วยพารามิเตอร์ snackbarHost
ดูข้อมูลเพิ่มเติมได้ที่เอกสารอ้างอิงSnackbarHost
API