[Compose] M3 ModalBottomSheet 드래그(터치 이벤트) 막는 법

서두

최근 오픈 커뮤니티에서 많이 언급되는 질문들에 대한 나의 해결법을 공유해보고자 한다.

문제 발생

바텀시트의 문제는 언제나 그랬듯, 내부에 너무 많은 컨텐츠가 포함될 때 발생한다. 그럴꺼면 전체 화면으로 만드는게 맞지않나?

컨텐츠가 짤리지 않도록, 리스트 형태로 화면을 구성하는 경우, 리스트를 내리거나 올리는 동작과 바텀시트를 열고, 닫는 동작이 중첩이 되어, 리스트를 내리려는데 바텀시트가 닫히는 등 문제가 발생하게 된다.

문제 해결 1(이전의 해결 방식)

https://stackoverflow.com/questions/76472355/how-to-disable-drag-behaviour-on-modalbottomsheet-android-compose

위의 스택 오버플로우에서 제시한 방식을 사용하는 것인데

적용 코드)

 	// bottomSheetState 에 comfirmValueChange = { it != SheetValue.Hidde } 옵션 추가 
	val bottomSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true,
        confirmValueChange = { it != SheetValue.Hidden },
    )

    ModalBottomSheet(
        onDismissRequest = {
            onAction(StampUiAction.OnDismiss)
        },
        sheetState = bottomSheetState,
        shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
        containerColor = MaterialTheme.colorScheme.surface,
        dragHandle = {
  			...
        },
        contentWindowInsets = { WindowInsets(top = 0) },
        modifier = Modifier
            .fillMaxHeight()
            .statusBarsPadding()
            .padding(top = 18.dp)
            .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
            .background(MaterialTheme.colorScheme.surface),
    ) { LazyColumn {...} 
}

이러면 기존에 원했던 바텀시트가 드래그(스크롤)에 의해서 닫히는 문제 자체는 해결할 수 있다.(드래그로는 절대로 안닫히기는 함)

의도치 않는 문제 발생

드래그로 닫히진 않는데, 드래그(터치 이벤트) 자체는 동작을 한다...
따라서 닫히려다가 다시 원복되는 bouncing 현상이 발생하는 것을 확인할 수 있었다.

문제 해결 2(권장)

Material3 1.4 버전이 등장하고(글을 쓰는 시점에선 아직 alpha버전), 드디어 해당 문제를 깔끔하게 해결할 수 있는 방법을 제공을 해주었다. 이제서야...

https://developer.android.com/jetpack/androidx/releases/compose-material3#1.4.0-alpha02

sheetGestureEnabled라는 옵션을 false 로 지정하여 드래그를 비활성화할 수 있다.

compose bom 버전의 경우 아직 material 1.3 버전대를 사용하기 때문에, material3 버전을 별도 선언하여 관리해줘야 한다.

적용 코드)

val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) // 그대로 

ModalBottomSheet(
	onDismissRequest = {
    	onAction(StampUiAction.OnDismiss)
    },
    sheetState = bottomSheetState,
    sheetGesturesEnabled = false, // <- 추가!
    shape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
    containerColor = MaterialTheme.colorScheme.surface,
    dragHandle = {
		...
    },
    contentWindowInsets = { WindowInsets(top = 0) },
    modifier = Modifier
    	.fillMaxHeight()
        .statusBarsPadding()
        .padding(top = 18.dp)
        .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
        .background(MaterialTheme.colorScheme.surface),
    ) {
        LazyColumn {...}
}

bouncing 되는 현상 없이 드래그가 정상적으로 막힌 것을 확인할 수 있다.

항상 문제가 많았던 M3 ModalBottomsheet 이제 좀 쓸만할지도..?

reference)
https://stackoverflow.com/questions/76472355/how-to-disable-drag-behaviour-on-modalbottomsheet-android-compose