Jetpack Compose | ModalBottomSheet(M3)

최근 M3에서 제공되는 ModalBottomSheet를 이용하게 되었는데, BottomSheet뒤에 있는 뷰가 터치되지 않는 문제가 있었다. 어떤 식으로든 BottomSheet의 컨텐츠가 보이지 않을 때는 이를 보이지 않게 해야겠다는 생각이 들었다.

BottomSheetState의 targetValue와 currentValue 변수 상태에 따라서 ModalBottomSheet 컴포저블 함수를 보이지 않게 하여 문제를 해결할 수 있었으나, 애니메이션과 시간 차가 있어서 그런지 BottomSheetLayout이 열고 닫히는데 부자연스러운 점이 있었다.

그래서 ModalBottomSheet의 표시 여부를 나타내는 Boolean 타입의 State를 만들고 이를 LaunchedEffect 를 이용해서 상태에 따라 BottomSheetState의 show 함수와 hide 함수를 호출하게 하여 문제를 해결할 수 있었다.

문제를 해결한 코드는 다음과 같다.

val playlistEditSheetState = androidx.compose.material3.rememberModalBottomSheetState()
var isPlaylistEdtStateShowed by remember {
    mutableStateOf(false)
}

LaunchedEffect(isPlaylistEdtStateShowed) {
    if (isPlaylistEdtStateShowed) {
        playlistEditSheetState.show()
    } else {
        playlistEditSheetState.hide()
    }
}

if (isPlaylistEdtStateShowed)
    ModalBottomSheet(sheetState = playlistEditSheetState, onDismissRequest = {
        isPlaylistEdtStateShowed = false
    }) {
        Column {
            Text("abcde")
            Text("abcde")
            Text("abcde")
            Text("abcde")
            Text("abcde")
        }
    }