หากต้องการใช้ชีตด้านล่าง คุณสามารถใช้ Composable
ModalBottomSheet
ได้
คุณใช้สล็อต content
ซึ่งใช้ ColumnScope
เพื่อจัดวาง Composable ของเนื้อหาชีตในคอลัมน์ได้ดังนี้
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
ควบคุมสถานะชีตโดยใช้โปรแกรม
หากต้องการขยายและยุบชีตแบบเป็นโปรแกรม ให้ใช้
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") } } } }