HorizontalPager中渐变覆盖层与图片尺寸不匹配问题求助

我正在开发一个项目，使用HorizontalPager实现图片滑动浏览功能，每张图片通过带渐变画刷的Box元素添加渐变覆盖层。目前遇到的问题是，滑动图片时渐变覆盖层与图片尺寸不匹配，我猜测这与图片的缩放设置有关，但不确定如何修复。相关代码如下：

HorizontalPager(state = pagerState) { page ->
    val isAnimating = pagerState.settledPage == page
    ImageItem(enableAnimation = isAnimating)

}


@Composable
fun ImageItem(
    modifier: Modifier = Modifier,
    enableAnimation: Boolean = false,
    backgroundUrl: String = "https://picsum.photos/1200",
    backgroundGradient: Brush = Brush.linearGradient(
        listOf(
            DarkGray.copy(alpha = 0.0f), Black.copy(alpha = 0.8f)
        )
    )
) {

    val scaleValue = if (enableAnimation) 1.1f else 1.0f
    var scale by remember { mutableFloatStateOf(1.1f) }
    var startAnimation by remember {
        mutableStateOf(false)
    }

    if (enableAnimation && startAnimation) {
        LaunchedEffect(key1 = backgroundUrl) {
            val translationAnimationSpec = tween<Float>(
                durationMillis = 2700,
                easing = FastOutLinearInEasing
            )
            animate(
                initialValue = 1.1f,
                targetValue = 1.0f,
                animationSpec = translationAnimationSpec
            ) { value: Float, _: Float ->
                scale = value
            }
        }
    }

    Box(
        modifier = modifier
            .fillMaxSize()
            .fillMaxHeight()
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .memoryCachePolicy(CachePolicy.ENABLED)
                .diskCachePolicy(CachePolicy.ENABLED)
                .data(backgroundUrl)
                .crossfade(true).scale(Scale.FILL).build(),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .matchParentSize()
                .scale(scale),
            filterQuality = FilterQuality.High,
            onSuccess = {
                startAnimation = true
            },
            placeholder = painterResource(id = R.drawable.full_screen)
        )

        Box(
            modifier = Modifier
                .background(brush = backgroundGradient)
                .matchParentSize()
                .scale(scale)
        )
    }
}

我已尝试同时缩放渐变覆盖层Box和图片，但问题仍存在，请问如何确保滑动时渐变覆盖层与图片尺寸匹配？

问题核心在于分别对图片和渐变层单独应用缩放，可能导致两者的缩放基准或视觉偏移不一致。正确的做法是将图片和渐变层包裹在同一个父容器内，对父容器应用缩放动画，这样两者会同步缩放，尺寸自然匹配。

修改后的ImageItem代码如下：

@Composable
fun ImageItem(
    modifier: Modifier = Modifier,
    enableAnimation: Boolean = false,
    backgroundUrl: String = "https://picsum.photos/1200",
    backgroundGradient: Brush = Brush.linearGradient(
        listOf(
            DarkGray.copy(alpha = 0.0f), Black.copy(alpha = 0.8f)
        )
    )
) {
    var scale by remember { mutableFloatStateOf(if (enableAnimation) 1.1f else 1.0f) }
    var startAnimation by remember { mutableStateOf(false) }

    if (enableAnimation && startAnimation) {
        LaunchedEffect(enableAnimation) {
            val translationAnimationSpec = tween<Float>(
                durationMillis = 2700,
                easing = FastOutLinearInEasing
            )
            animate(
                initialValue = 1.1f,
                targetValue = 1.0f,
                animationSpec = translationAnimationSpec
            ) { value, _ ->
                scale = value
            }
        }
    }

    Box(modifier = modifier.fillMaxSize()) {
        // 将图片和渐变层包裹在同一个父Box中，统一应用缩放
        Box(
            modifier = Modifier
                .matchParentSize()
                .scale(scale)
        ) {
            AsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .memoryCachePolicy(CachePolicy.ENABLED)
                    .diskCachePolicy(CachePolicy.ENABLED)
                    .data(backgroundUrl)
                    .crossfade(true)
                    .scale(Scale.FILL)
                    .build(),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.matchParentSize(),
                filterQuality = FilterQuality.High,
                onSuccess = {
                    startAnimation = true
                },
                placeholder = painterResource(id = R.drawable.full_screen)
            )

            Box(
                modifier = Modifier
                    .background(brush = backgroundGradient)
                    .matchParentSize()
            )
        }
    }
}

关键修改点：

• 将AsyncImage和渐变Box放入同一个父Box中，对这个父Box应用scale(scale)，确保两者同步缩放
• 移除冗余的scaleValue变量，直接在初始化scale时根据enableAnimation赋值
• 调整LaunchedEffect的key为enableAnimation，更贴合动画触发逻辑
• 移除渐变Box上单独的scale修饰符，避免重复缩放
• 去掉外层Box冗余的fillMaxHeight()，保留fillMaxSize()即可

这样修改后，滑动时渐变覆盖层会和图片完全同步，尺寸匹配问题就能解决。

内容的提问来源于stack exchange，提问作者pepperlove