하단 시트

Material Design 3 모달 하단 시트의 예

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

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

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

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

프로그래매틱 방식으로 시트를 펼치고 접으려면 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt

콘텐츠를 표시하는 Jetpack Compose의 모달 하단 시트