在 Compose 中滚动时，HorizontalPager 未占用全宽答案

【问题标题】：HorizontalPager not taking full width while scrolling in Compose在 Compose 中滚动时，HorizontalPager 未占用全宽
【发布时间】：2022-09-25 15:28:59
【问题描述】：

我在 xml 中使用 ComposeView 并在该视图中加载 HorizontalViewPager。我对该寻呼机的预期行为是，当我滚动该寻呼机的项目时，它不应位于父布局的填充范围内，而是采用边缘到边缘滚动。这是当前的外观：

但我想要这样的东西：

这就是我获取viewpager的方式：

HorizontalPager(
                count = promotionalBanners.size,
                state = pagerState,
                itemSpacing = 8.dp,
                contentPadding = PaddingValues(end = 16.dp)
            ) {

                Card(
                    Modifier
                        .fillMaxWidth()
                        .height(172.dp)
                ) {
                    NetworkImage(
                        modifier = Modifier
                            .fillMaxSize()
                            .aspectRatio(1.8f)
                            .clip(RoundedCornerShape(4.dp))
                            .clickable {
                                context.openUrl(
                                    promotionalBanners[it].redirectUrl,
                                    navController
                                )
                            },
                        imageUrl = promotionalBanners[it].bannerUrl,
                        contentDescription = promotionalBanners[it].redirectUrl,
                        contentScale = ContentScale.FillBounds
                    )
                }
            }

任何人都可以建议我如何实现这一目标？

标签： android android-jetpack-compose

【解决方案1】：

您必须根据您的物品大小计算您的conentPadding。

val horizontalPadding = 16.dp
val itemWidth = 340.dp
val screenWidth = LocalConfiguration.current.screenWidthDp
val contentPadding = PaddingValues(start = horizontalPadding, end = (screenWidth - itemWidth + horizontalPadding).dp)

试试这个解决方案。

【讨论】：

【解决方案2】：

我自己找到了解决方案。这是我解决它的方法。在 composeview 所在的 xml 中，我添加了以下内容：

<androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_promotional_banner"
        android:layout_marginStart="-16dp"
        android:layout_marginEnd="-16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/rec_partners"/>

-16dp 在这里起到了作用，它成功地违反了父布局填充，之后简单的以下代码将 viewpager 放置在适当的位置：

HorizontalPager(
                count = promotionalBanners.size,
                state = pagerState,
                itemSpacing = 8.dp,
                contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
            )

【讨论】：