带有 .scrollable() 修饰符的列会中断地图垂直滚动

Question

问题

我正在尝试在可滚动列中实现简单的地图视图。问题是我不能垂直滚动地图，因为滚动事件是由列捕获的，而不是地图，整个列正在滚动。有没有办法禁用地图元素上的列滚动？我考虑过使用 .nestedScroll() 修饰符，但找不到使它按预期工作的方法。

代码

位置输入（子）

// Not important in context of question, but I left it so the code is complete
@Composable
private fun rememberMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
  remember(mapView) {
    LifecycleEventObserver { _, event ->
      when (event) {
        Lifecycle.Event.ON_CREATE -> mapView.onCreate(Bundle())
        Lifecycle.Event.ON_START -> mapView.onStart()
        Lifecycle.Event.ON_RESUME -> mapView.onResume()
        Lifecycle.Event.ON_PAUSE -> mapView.onPause()
        Lifecycle.Event.ON_STOP -> mapView.onStop()
        Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
        else -> throw IllegalStateException()
      }
    }
  }

// Not important in context of question, but I left it so the code is complete
@Composable
private fun rememberMapViewWithLifecycle(): MapView {
  val context = LocalContext.current
  val mapView = remember {
    MapView(context)
  }

  // Makes MapView follow the lifecycle of this composable
  val lifecycleObserver = rememberMapLifecycleObserver(mapView)
  val lifecycle = LocalLifecycleOwner.current.lifecycle
  DisposableEffect(lifecycle) {
    lifecycle.addObserver(lifecycleObserver)
    onDispose {
      lifecycle.removeObserver(lifecycleObserver)
    }
  }

  return mapView
}


@Composable
fun LocationInput() {
  val map = rememberMapViewWithLifecycle()
  Column(Modifier.fillMaxSize()) {
    var mapInitialized by remember(map) { mutableStateOf(false) }
    val googleMap = remember { mutableStateOf<GoogleMap?>(null) }

    LaunchedEffect(map, mapInitialized) {
      if (!mapInitialized) {
        googleMap.value = map.awaitMap()
        googleMap.value!!.uiSettings.isZoomGesturesEnabled = true
        mapInitialized = true
      }
    }

    AndroidView({ map }, Modifier.clip(RoundedCornerShape(6.dp))) { mapView ->

    }
  }
}

ScrollableColumn（父级）

@Composable
fun TallView() {
  Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.height(15.dp))
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Row(Modifier.height(250.dp)) {
      LocationInput()
    }
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
    Text(text = "Content", style = MaterialTheme.typography.h3)
  }
}

屏幕截图

Answer 1

好的，所以在我发布问题后，我再次尝试解决问题，并找到了可行的解决方案。但是我不确定这是否是达到预期效果的最佳方式。

我在用于显示地图的 AndroidView 上手动处理拖动事件。

代码

// AndroidView in LocationInput file:

    AndroidView({ map },
      Modifier
        .clip(RoundedCornerShape(6.dp))
        .pointerInput(Unit) {
          detectDragGestures { change, dragAmount ->
            change.consumeAllChanges()
            googleMap.value!!.moveCamera(
              CameraUpdateFactory.scrollBy(
                dragAmount.x * -1,
                dragAmount.y * -1
              )
            )
          }
        })
    { mapView ->

    }

带有 .scrollable() 修饰符的列会中断地图垂直滚动

Column with .scrollable() modifier breaks map vertical scroll

android

kotlin

android-jetpack-compose

问题

代码

位置输入（子）

ScrollableColumn（父级）

屏幕截图

代码