하단 시트

Material Design 3 모달 하단 시트의 예

하단 시트를 구현하려면 ModalBottomSheet 컴포저블을 사용하면 됩니다.

content 슬롯을 사용할 수 있습니다. 이 슬롯은 ColumnScope를 사용하여 시트 콘텐츠 컴포저블을 열에 배치합니다.

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}

프로그래매틱 방식으로 시트 상태 제어

프로그래매틱 방식으로 시트를 펼치고 접으려면 SheetState를 사용합니다. rememberModalBottomSheetState를 사용하여 SheetState 인스턴스를 만들 수 있습니다. 이 인스턴스는 sheetState 매개변수를 사용하여 ModalBottomSheet에 전달해야 합니다. 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")
            }
        }
    }
}

콘텐츠를 보여주는 Jetpack Compose의 모달 하단 시트