하단 시트를 부분적으로 표시한 다음 사용자가 전체 화면으로 표시하거나 닫도록 할 수 있습니다.
이렇게 하려면 skipPartiallyExpanded가 false로 설정된 SheetState의 인스턴스를 ModalBottomSheet에 전달합니다.
예
이 예에서는 ModalBottomSheet의 sheetState 속성을 사용하여 처음에 시트를 부분적으로만 표시하는 방법을 보여줍니다.
@Composable
fun PartialBottomSheet() {
var showBottomSheet by remember { mutableStateOf(false) }
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = false,
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Button(
onClick = { showBottomSheet = true }
) {
Text("Display partial bottom sheet")
}
if (showBottomSheet) {
ModalBottomSheet(
modifier = Modifier.fillMaxHeight(),
sheetState = sheetState,
onDismissRequest = { showBottomSheet = false }
) {
Text(
"Swipe up to open sheet. Swipe down to dismiss.",
modifier = Modifier.padding(16.dp)
)
}
}
}
}
코드에 대한 핵심 사항
이 예에서는 다음 사항에 유의하세요.
showBottomSheet는 앱이 하단 시트를 표시할지를 제어합니다.sheetState는skipPartiallyExpanded가 false인SheetState의 인스턴스입니다.ModalBottomSheet는 완전히 펼쳐질 때 화면을 채우는 수정자를 사용합니다.ModalBottomSheet는sheetState를sheetState매개변수 값으로 사용합니다.- 따라서 시트는 처음 열 때만 부분적으로 표시됩니다. 그런 다음 사용자가 앱을 드래그하거나 스와이프하여 전체 화면으로 표시하거나 닫을 수 있습니다.
onDismissRequest람다는 사용자가 하단 시트를 닫으려고 할 때 발생하는 작업을 제어합니다. 이 경우에는 시트만 삭제됩니다.
결과
사용자가 버튼을 처음 누르면 시트가 부분적으로 표시됩니다.
사용자가 시트를 위로 스와이프하면 화면이 채워집니다.
