Bottom sheet nested scroll 개선

서론

모달바텀시트를 구현하면서 UX적으로 2가지 개선사항이 있었다.

문제 1	문제2

문제1은 nested Scroll 상태로 빠르게 스크롤을 할 경우, 바텀시트가 jumping 되는 현상이었다.

문제2는 위쪽으로 스크롤하면서, 자식 스크롤이 탑에 닿였을 때 바텀시트도 같이 내려가는 문제가 있었다.

문제1은 안드로이드 내부 이슈였고, 현재는 해결되었다.
Issue Traker 에 나와있듯 1.3.0-alpha02 부터 해결 되었다. 필자도 버전을 1.3.0-beta03으로 업그레이드 하여 수정된 것을 확인했다.

implementation("androidx.compose.material3:material3:1.3.0-alpha02")

의도하는 결과

내가 하고 싶은 스크롤은 아래와 같다

자식 스크롤이 탑에 닿이고, 손을 떼었다가 다시 붙인 후 바텀 시트 스크롤이 가능하다.

어떤 재료가 필요할까..

예상 시나리오 ->

1. 스크롤 중인 상태에서 자식뷰가 상단에 닿이는 시점을 파악, 바텀 시트 스크롤이 바텀 시트가 내려가는 것을 막게끔 제어(스크롤 제어)
2. 스타트 지점이 탑이고 닫는 쪽으로 스크롤 하면 바텀시트 닫기

생각으로 나온 코드

LaunchedEffect(bottomSheetChildScrollState.canScrollBackward) {
        if (bottomSheetChildScrollState.value == 0) {
            bottomSheetChildScrollState.stopScroll(MutatePriority.PreventUserInput)
        }
    }

해결되었다!