[안드로이드 컴포즈] 한 화면에서 BottomSheet 여러개 사용하기

컴포즈에선 ModalBottomSheetLayout 을 사용해 BottomSheet를 구현합니다. 이 때 ModalBottomSheetState 는 필수입니다. BottomSheet의 상태(show, hide)를 제어하는 부분이기 때문입니다.

우리는, 한 화면에서 서로 다른  BottomSheet를 여러개 사용하면서 ModalBottomSheetState 를 여러개 선언하여 사용하는 실수를 할 수 있습니다. ModalBottomSheetState 를 하나만 사용하기 위해선 ModalBottomSheetLayout의 sheetContent 안에 조건을 넣어 UI 를 구성해 주면 됩니다.

{
    val scope = rememberCoroutineScope()
    val (selected, setSelected) = remember(calculation = { mutableStateOf(0) })
    // var selected by remember { mutableStateOf(0) }
    val bottomState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    ModalBottomSheetLayout(
        sheetState = bottomState,
        sheetContent = {
            when (selected) {
                0 -> FirstBottomSheet()
                1 -> SecondBottomSheet()
            }

        },
        content = {}
    )

    scope.launch {
        setSelected(0)
        bottomState.expand()
        delay(2000)
        bottomState.hide()
        setSelected(1)
        delay(2000)
        bottomState.expand()
        delay(2000)
        bottomState.hide()
    }
}

 

바텀시트를 표출 할 때 단순히 .show() 하면 됩니다. 다만, 바텀시트가 만든대로 올라가지 않는 경우가 많아서 .expand() 를 사용하는게 맘편합니다.

suspend fun ModalBottomSheetState.expand() {
    animateTo(ModalBottomSheetValue.Expanded)
}