Bottom Sheet

หากคุณต้องการใช้ Bottom Sheet คุณสามารถใช้ ModalBottomSheet Composable

คุณสามารถใช้ช่อง 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 ออกจากการเรียบเรียงเมื่อซ่อน Bottom Sheet

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