Jetpack Compose图片缩放与HorizontalPager滑动冲突解决

Jetpack Compose 中图片缩放问题的解决方法：HorizontalPager 与缩放的和谐共处

在使用 Jetpack Compose 构建应用时，我们经常会遇到需要在 HorizontalPager 中实现图片缩放的需求。但直接实现时，缩放操作常常会和 HorizontalPager 的滑动事件冲突，导致用户体验下降，比如，放大图片后移动，再缩小,图片位置不会归位，HorizontalPager 就不能正常滑动。

下面就来聊聊这个问题出现的原因，以及提供几种解决思路，帮助大家搞定这个难题。

一、 问题原因：手势冲突

根本原因在于手势冲突。HorizontalPager 本身需要监听水平滑动事件来实现翻页，而图片的缩放和平移操作同样需要监听触摸事件。当图片处于放大状态时，HorizontalPager 会被内部图片的滑动操作"拦截"而失效； 当图片缩小到初始大小时，没有一个机制告诉图片应该回到初始位置。

二、 解决方案

2.1 方案一：精细控制手势，重置偏移

这个方法的核心在于更精细地控制手势，并引入一个状态来记录是否需要重置图片。

原理:

1. detectTransformGestures 的 onGestureEnd： 利用detectTransformGestures的回调来捕捉手势的开始和结束，以及缩放，平移信息。
2. isResetRequired 状态： 引入一个 Boolean 类型的 isResetRequired 变量。当图片缩放比例（scale）小于或等于1时，并且没有拖动手势时（pan.x 和 pan.y 接近于0)，标记为需要重置(设为 true)。
3. 动画重置： 使用 LaunchedEffect 监视 isResetRequired。 当它为 true 时，通过动画 (Animatable) 将 scale 和 offset 平滑地恢复到初始值（1f 和 Offset.Zero）。

代码示例：

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun ImageViewer(images: List<String>, page: Int, pagerState: PagerState, scope: CoroutineScope) {
    var imageSize by remember { mutableStateOf(IntSize.Zero) }
    var scale by remember { mutableStateOf(1f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    var isResetRequired by remember { mutableStateOf(false) } // 新增状态

    val scaleAnimatable = remember { Animatable(1f) }
    val offsetAnimatable = remember { Animatable(Offset.Zero, Offset.VectorConverter) }

    LaunchedEffect(isResetRequired) {
        if (isResetRequired) {
            scaleAnimatable.snapTo(scale) //先立即更新到当前值，保证动画正确启动
            offsetAnimatable.snapTo(offset)
            launch {
                scaleAnimatable.animateTo(1f)
            }
            launch {
                offsetAnimatable.animateTo(Offset.Zero)
            }

            scale = 1f
            offset = Offset.Zero
            isResetRequired = false //重置状态
        }
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        Column(modifier = Modifier
            .fillMaxSize()
            .align(alignment = Alignment.Center)) {
            GlideImage(
                contentScale = ContentScale.FillWidth,
                model = images[page],
                contentDescription = "Zoomable Image",
                modifier = Modifier
                    .fillMaxSize()
                    .onGloballyPositioned { coordinates ->
                        imageSize = coordinates.size // Capture the image size
                    }
                    .pointerInput(pagerState) {
                        detectTransformGestures(
                           onGestureEnd = {
                                if(scale <= 1f){
                                    isResetRequired = true
                                }
                           }

                        ) { centroid, pan, zoom, _ ->

                            val newScale = (scale * zoom).coerceIn(1f, 5f) // Limit zoom scale
                            val newOffset = offset + pan
                           // 根据缩放比例计算图片中心的偏移，使缩放更自然
                            val focalPoint = (centroid - offset / scale)
                            val newOffsetAdjusted = if (scale != newScale){
                               newOffset - (focalPoint * (newScale-scale)*scale)
                            }else {
                                newOffset
                            }

                            scale = newScale
                            offset = newOffsetAdjusted
                        }
                    }

                    .pointerInput(pagerState) { // New pointerInput for horizontal swipe
                        detectHorizontalDragGestures { change, dragAmount ->
                            if (scale <= 1f) { // Only trigger pager swipe when not zoomed
                                // 这里通过使用pagerState来判断是否允许水平滑动.

                                scope.launch {
                                   pagerState.scrollBy(-dragAmount)
                                }
                            }

                            change.consume() //消耗事件
                        }

                    }

                    .graphicsLayer(
                        scaleX = scaleAnimatable.value,
                        scaleY = scaleAnimatable.value,
                        translationX = offsetAnimatable.value.x,
                        translationY = offsetAnimatable.value.y
                    )

            )
        }

    }
}

改进后的代码使用scrollBy(), 该方法是持续响应，所以不会出现卡顿，用animateScrollToPage()会有手势冲突。

注意事项:

• 手势处理的逻辑稍微复杂一些,要仔细考虑onGestureEnd的使用，正确处理缩放结束的状态。

2.2 方案二： 禁用/启用 HorizontalPager 的滚动

这种方案实现起来比较直接。简单说，就是根据图片的缩放状态，动态地禁用或启用 HorizontalPager 的滚动。

原理:

1. userScrollEnabled: HorizontalPager 有一个 userScrollEnabled 参数, 可以直接控制是否允许用户滚动。
2. 缩放状态判断： 在 detectTransformGestures 中，判断当前的缩放比例（scale）。如果 scale 大于 1，则认为图片处于放大状态。
3. 动态改变 userScrollEnabled， 在 ImageViewer 通过 callback 回调给HorizontalPager

代码示例:

HorizontalPager(state, modifier = Modifier.fillMaxSize(),
                verticalAlignment = Alignment.CenterVertically, userScrollEnabled = userScrollEnabled) { page->
                ImageViewer(images = storeImages.value, page=page, pagerState= state, scope=scope,
                   onUserScrollEnabledChange = {
                         userScrollEnabled = it
                    })
            }

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun ImageViewer(images: List<String>, page: Int, pagerState: PagerState, scope: CoroutineScope,
                onUserScrollEnabledChange:(Boolean)-> Unit) {
     // ... (其余部分和之前类似)
    var isResetRequired by remember { mutableStateOf(false) } // 新增状态

     //增加
    var userScrollEnabled by remember {
        mutableStateOf(true)
    }

   //  ... (省略部分代码)
    LaunchedEffect(isResetRequired) {
        if (isResetRequired) {
          // ... 执行重置操作
        }
    }

   //在 detectTransformGestures 添加
     pointerInput(pagerState) {
        detectTransformGestures(
          onGestureEnd = {
              if(scale <= 1f){
                   isResetRequired = true
                }
                 onUserScrollEnabledChange(true)
               },
            onGestureStart = {
               onUserScrollEnabledChange(false)
           }

         ) { centroid, pan, zoom, _ ->

              // ...
         }
     }

     //移除 detectHorizontalDragGestures 相关
}

优点：

• 简单粗暴,容易理解。
• 不用费劲处理各种手势的边界情况。

缺点：

• 用户体验可能略有不足。在图片放大的瞬间，HorizontalPager 突然不能滚动,可能会让用户感觉卡顿。

2.3 进阶方案： 自定义手势处理

如果你对 Compose 的手势处理非常熟悉，并且对用户体验有极致的追求,可以尝试完全自定义手势。

原理：

1. pointerInput 块： 不再使用 detectTransformGestures 和 detectHorizontalDragGestures，而是直接在 pointerInput 块中处理所有触摸事件。
2. 自定义逻辑： 在 pointerInput 块中，根据触摸事件的类型（按下、移动、抬起等）和位置，自己判断当前是应该进行图片缩放/平移，还是应该触发 HorizontalPager 的滚动。

代码实现难度较高这里先不做展示

优点：

• 灵活性最高,可以实现最精细的手势控制。
• 可以避免 HorizontalPager 和图片缩放之间的任何冲突。

缺点：

• 实现复杂度最高，需要深入了解 Compose 的触摸事件处理机制。
• 容易出错，需要仔细测试各种边界情况。

三、 总结一下

上面几种方法各有千秋。选哪个，取决于你的具体需求和对代码复杂度的接受程度:

• 如果想快速解决问题,方案二（禁用/启用滚动）最直接。
• 方案一 （重置）在多数情况下,能提供相对较好的用户体验和可维护性。
• 如果你对自定义手势处理感兴趣，并且愿意投入更多时间,进阶方案可以提供最灵活的控制。
  搞定 Jetpack Compose 里的图片缩放，其实就是和手势"斗智斗勇"。选好方案,理清逻辑，相信你一定能做出流畅又好用的应用!