부분 하단 시트

하단 시트를 부분적으로 표시한 다음 사용자가 만들도록 할 수 있습니다. 알림을 닫을 수 있습니다.

이렇게 하려면 ModalBottomSheet에 SheetState의 인스턴스를 전달합니다. (skipPartiallyExpanded가 false로 설정됨)

예

이 예에서는 sheetState 속성을 사용하는 방법을 보여줍니다. 처음에는 시트를 부분적으로만 표시하는 ModalBottomSheet입니다.

@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)
                )
            }
        }
    }
}
BottomSheet.kt

코드에 대한 핵심 사항

이 예에서는 다음 사항에 유의하세요.

• showBottomSheet는 앱이 하단 시트를 표시할지를 제어합니다.
• sheetState는 SheetState의 인스턴스입니다. 여기서 skipPartiallyExpanded가 false입니다.
• ModalBottomSheet는 화면을 채우도록 수정자를 사용합니다. 완전히 펼쳐졌을 때 표시됩니다.
• ModalBottomSheet는 sheetState를 sheetState 값으로 사용합니다. 매개변수 값으로 사용됩니다.
  • 따라서 시트는 처음 열 때만 부분적으로 표시됩니다. 이 사용자가 앱을 드래그하거나 스와이프하여 전체 화면으로 전환하거나 닫을 수 있습니다.
• onDismissRequest 람다는 사용자가 사용하려고 할 때 발생하는 작업을 제어합니다. 하단 시트를 닫습니다. 이 경우에는 시트만 삭제됩니다.

결과

사용자가 버튼을 처음 누르면 시트가 부분적으로 표시됩니다.

사용자가 시트를 위로 스와이프하면 화면이 채워집니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

추가 리소스

• 하단 시트