【Jetpack Compose筆記】ModalBottomSheet 底部功能表單

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyApp() {
    val sheetState = rememberModalBottomSheetState()
    val scope = rememberCoroutineScope()
    val showBottomSheet = remember { mutableStateOf(false) }

    Scaffold(
        modifier = Modifier.fillMaxSize()
    ) { contentPaddingValue ->
        Column(
            modifier = Modifier.height(200.dp).padding(contentPaddingValue).fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Top
        ) {
            Button(onClick = { showBottomSheet.value = true }) {
                Text(text = "開/關 啟底部功能表單")
            }
        }


        if(showBottomSheet.value){
            ModalBottomSheet(
                onDismissRequest = { showBottomSheet.value = false },
                sheetState = sheetState,
                modifier = Modifier.height(200.dp)
            ) {
                Button(
                    onClick = {
                        scope.launch {
                            sheetState.hide()
                        }.invokeOnCompletion {
                            if(!sheetState.isVisible){
                                showBottomSheet.value = false
                            }
                        }
                    }
                ) {
                    Text(text = "關閉底部功能表單")
                }
            }

        }
    }
}

示範畫面：

參考資料： https://developer.android.com/jetpack/compose/components/bottom-sheets?hl=zh-tw