Jetpack Compose でGoogle Map内の操作と縦スクロールを共存させる

はじめに

スクロールできる画面にGoogle Map を置き、ピンチインやピンチアウト、マップのスライドなどの操作をしようとすると、画面がスクロールしてしまいます。
その解決法を今回の記事にします。

方法

タッチ中だけ verticalScroll を無効にします。

親側（スクロール画面）

var isTouched by remember { mutableStateOf(false) }
val scrollState = rememberScrollState()                                                                    
 
Column(                                                                                                    
    modifier = Modifier.verticalScroll(scrollState, enabled = !isTouched)                                
) {                                                                                                        
    MyChart(onTouchChanged = { isTouched = it })
}      

子側（グラフ・マップ）

Modifier.pointerInput(Unit) {                                                                              
    awaitEachGesture {                                                                                   
        try {
            awaitFirstDown(requireUnconsumed = false)
            onTouchChanged(true)   // 指が触れたらスクロール停止
            do {                                                                                           
                val event = awaitPointerEvent(PointerEventPass.Final)
            } while (event.changes.any { it.pressed })                                                     
        } finally {                                                                                      
            onTouchChanged(false)  // 指が離れたらスクロール再開
        }                                                                                                  
    }
}   

awaitFirstDown(requireUnconsumed = false) 

にすることで、他の pointerInput が消費したイベントも検知できます。
Google Maps の場合はこの Modifier を GoogleMap をラップする Box に付けるだけで同じように動作します。