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

คอมโพเนนต์แถบแสดงข้อความทำหน้าที่เป็นการแจ้งเตือนสั้นๆ ซึ่งปรากฏที่ ด้านล่างของหน้าจอ โดยจะให้ความคิดเห็นเกี่ยวกับการดำเนินการหรือการดำเนินการที่ไม่มี รบกวนประสบการณ์ของผู้ใช้ แถบแสดงข้อความจะหายไปหลังจากผ่านไป 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
}
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 สำหรับข้อมูลเพิ่มเติม