Bottom Sheet

ตัวอย่างแผ่นด้านล่างแบบโมดัลของ Material Design 3

หากต้องการใช้ชีตด้านล่าง คุณสามารถใช้ Composable ModalBottomSheet ได้

คุณใช้สล็อต content ซึ่งใช้ ColumnScope เพื่อจัดวาง Composable ของเนื้อหาชีตในคอลัมน์ได้ดังนี้

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

ควบคุมสถานะชีตโดยใช้โปรแกรม

หากต้องการขยายและยุบชีตแบบเป็นโปรแกรม ให้ใช้ SheetState คุณใช้ rememberSheetState เพื่อสร้างอินสแตนซ์ ของ SheetState ที่ควรส่งไปยัง ModalBottomSheet พร้อมพารามิเตอร์ sheetState ได้ SheetState ให้สิทธิ์เข้าถึงฟังก์ชัน show และ hide รวมถึงพร็อพเพอร์ตี้ที่เกี่ยวข้องกับสถานะชีตปัจจุบัน ฟังก์ชันการระงับเหล่านี้ต้องใช้ CoroutineScope เช่น การใช้ rememberCoroutineScope และคุณเรียกใช้ฟังก์ชันเหล่านี้ได้เพื่อตอบสนองต่อเหตุการณ์ UI อย่าลืมนำ ModalBottomSheet ออกจากองค์ประกอบเมื่อซ่อน ชีตด้านล่าง

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
MaterialLayoutSnippets.kt

แผ่นด้านล่างแบบโมดัลใน Jetpack Compose ที่แสดงเนื้อหา