แถบแสดงข้อความ

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

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

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

ตัวอย่างพื้นฐาน

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

ฟังก์ชันการระงับนี้ต้องใช้ 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
}
MaterialLayoutSnippets.kt

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

คุณสามารถระบุการดำเนินการที่ไม่บังคับและปรับระยะเวลาของ 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
}
MaterialLayoutSnippets.kt

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