HorizontalPager 忽略 itemSpacing 并覆盖 Jetpack Compose 中的内容

Question

I have a HorizontalPager (from Accompanist) with a currentPage focus effect. On the emulator, it works correctly and with the correct spacing that I intend, however, on a smartphone, it doesn't respect the itemSpacing and completely ignores it, overlapping the pager items on the right. Is there any way to make this pager always have the same spacing regardless of the device? Or, at least, that the item on the right does not overlap and that the main item overlaps the other two?

Below a few screenshots of what is happening and the behavior that I want:

Correct behavior (working on emulator):

Wrong behavior & problem (working on physical device):

Code:

 HorizontalPager(
        state = state,
        count = items.count(),
        contentPadding = PaddingValues(horizontal = 72.dp),
        itemSpacing = 10.dp,
        modifier = modifier.padding(top = 16.dp)
    ) { page ->
        Card(
            shape = RectangleShape,
            modifier = Modifier
                .graphicsLayer {
                    // Calculate the absolute offset for the current page from the
                    // scroll position. We use the absolute value which allows us to mirror
                    // any effects for both directions
                    val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue

                    // We animate the scaleX + scaleY, between 85% and 100%
                    lerp(
                        start = 0.85f,
                        stop = 1f,
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    ).also { scale ->
                        scaleX = scale
                        scaleY = scale
                    }

                    // We animate the alpha, between 50% and 100%
                    alpha = lerp(
                        start = 0.6f,
                        stop = 1f,
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    )
                }
                .requiredWidth(284.dp)
                .requiredHeight(168.dp)
                //.coloredShadow(Shadow, 0.28f)
        ) {
            // content
        }
    }

Any additional necessary code can be provided, just let me know.

Answer 1

You should be using how to support different screen sizes in android with jetpack compose, in which you can define dimensions for different configurations. You can refer to this tutorial on the same

https://proandroiddev.com/supporting-different-screen-sizes-on-android-with-jetpack-compose-f215c13081bd