Jetpack Compose 实现微信风格图片浏览：缩放、切换与预览

HorizontalPagerIndicator(
    pagerState = pageState,
    activeColor = Color.White,
    inactiveColor = Color.Gray,
    modifier = Modifier.align(Alignment.BottomCenter).padding(bottom = 60.dp)
)

3. 双击放大和缩小

利用 detectTapGestures 监听双击事件。当双击时，根据当前缩放比例切换至 2 倍或 1 倍，并重置偏移量。

pointerInput(Unit) {
    detectTapGestures(
        onDoubleTap = { offset ->
            scale = if (scale <= 1f) 2f else 1f
            offset = Offset.Zero
        }
    )
}

4. 双指缩放

监听 rememberTransformableState 的变换回调，限制最大缩放倍数（例如 5 倍）。

var state = rememberTransformableState(onTransformation = { zoomChange, _, _ ->
    scale = (zoomChange * scale).coerceAtLeast(1f)
    scale = if (scale > 5f) 5f else scale
})

5. 切换恢复图片大小

这是交互中最关键的部分。当用户滑动切换到下一页时，当前页面的图片应自动还原至原始大小，避免视觉错乱。我们通过 calculateCurrentOffsetForPage 获取页面偏移量，当偏移量达到 1.0f 时触发重置。

graphicsLayer {
    val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue
    if (pageOffset == 1.0f) {
        scale = 1.0f
    }
}

完整代码示例

以下是整合了上述逻辑的完整 Composable 函数。注意处理了包名通用化及状态管理。

import androidx.compose.foundation.Image
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.material.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import com.google.accompanist.coil.rememberCoilPainter
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.HorizontalPagerIndicator
import com.google.accompanist.pager.PagerState
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.InternalCoroutinesApi
import kotlinx.coroutines.flow.collect
import kotlinx.coroutines.snapshotFlow

/**
 * 大图预览主界面
 */
@OptIn(ExperimentalPagerApi::class, InternalCoroutinesApi::class)
@Composable
fun ImageBrowserScreen(images: List<String>, selectImageIndex: Int) {
    var currentIndex by remember { mutableStateOf(selectImageIndex) }
    
    // 初始化 PagerState
    val pageState = rememberPagerState(initialPage = currentIndex) {
        images.size
    }

    Box(modifier = Modifier.fillMaxSize()) {
        HorizontalPager(
            count = images.size,
            state = pageState,
            contentPadding = PaddingValues(horizontal = 0.dp),
            modifier = Modifier.fillMaxSize()
        ) { page ->
            ImageBrowserItem(
                imageUrl = images[page],
                page = page,
                pagerScope = this
            )
        }

        HorizontalPagerIndicator(
            pagerState = pageState,
            activeColor = Color.White,
            inactiveColor = Color.LightGray,
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 60.dp)
        )
    }
}

/**
 * 单张图像浏览项
 */
@OptIn(ExperimentalPagerApi::class)
@Composable
fun ImageBrowserItem(imageUrl: String, page: Int, pagerScope: PagerScope) {
    var scale by remember { mutableStateOf(1f) }
    var offset by remember { mutableStateOf(Offset.Zero) }

    // 手势状态
    var state = rememberTransformableState(onTransformation = { zoomChange, panChange, rotationChange ->
        scale = (zoomChange * scale).coerceAtLeast(1f)
        scale = if (scale > 5f) 5f else scale
        offset += panChange
    })

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.Black
    ) {
        Image(
            painter = rememberCoilPainter(request = imageUrl),
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .fillMaxSize()
                .transformable(state = state)
                .graphicsLayer {
                    scaleX = scale
                    scaleY = scale
                    translationX = offset.x
                    translationY = offset.y

                    // 页面切换时重置缩放
                    val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue
                    if (pageOffset >= 1.0f) {
                        scale = 1.0f
                        offset = Offset.Zero
                    }
                }
                .pointerInput(Unit) {
                    detectTapGestures(
                        onDoubleTap = { offset ->
                            scale = if (scale <= 1f) 2f else 1f
                            offset = Offset.Zero
                        }
                    )
                }
        )
    }
}

优化建议与注意事项

1. 性能优化：graphicsLayer 比直接修改 View 属性性能更好，因为它避免了重绘整个层级树。在处理大量图片时，建议结合 AsyncImage 进行异步加载。
2. 状态同步：确保 PagerState 的更新与图片缩放状态的复位逻辑在同一生命周期内执行，防止闪烁。
3. 边界处理：在实际项目中，需考虑图片加载失败、网络异常等情况，添加相应的错误占位图。
4. 内存管理：使用 remember 时注意 key 的选择，避免因不必要的重组导致手势状态丢失。

通过上述方案，我们可以高效地在 Jetpack Compose 中复现复杂的移动端图片浏览交互，提升用户体验。