jetpack compose 中水平寻呼机最后一项后的额外空格

Question

我创建了一个水平寻呼机，并且尝试了多种方法，但无法消除最后一项之后的额外空间。第一项之前的间距是正确的，但最后一项之后的间距很多。

我希望最后一个空间也像第一个一样统一。

HorizontalPager(
verticalAlignment = Alignment.Top,
count = 3,
state = pagerState,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.constrainAs(pager) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(beneTitle.bottom)
},
contentPadding = PaddingValues(end = 80.dp),
itemSpacing = 16.dp
) { page -\>
val currentItem = additionalBenefitItem.listItems\[page\]
Box(modifier = Modifier.width(260.dp)) {
Card(
modifier = Modifier.clickable {
viewModel.updateSelectedBenefitCardIndex(page)
onCardClick()
}.padding(top = 20.dp),
elevation = 2.dp,
shape = RoundedCornerShape(corner = CornerSize(16.dp)),
backgroundColor = Color(
android.graphics.Color.parseColor(

                                currentItem.backgroundColor
                        )
                    )
                ) {
                    ConstraintLayout(
                        modifier = Modifier.fillMaxWidth(),
                    ) {
                        val (
                            title, description, image, feature1
                        ) = createRefs()
                        Text(
                            text = currentItem.title,
                            style = Theme.typography.bold,
                            modifier = Modifier
                                .constrainAs(title) {
                                    start.linkTo(parent.start, 16.dp)
                                    top.linkTo(parent.top, 40.dp)
                                },
                            color = Theme.colors.primary
                        )
                        Text(
                            text = currentItem.description!!,
                            style = Theme.typography.smallTextAdd,
                            modifier = Modifier
                                .constrainAs(description) {
                                    start.linkTo(parent.start, 16.dp)
                                    top.linkTo(title.bottom, 10.dp)
                                    end.linkTo(image.start, 24.dp)
                                    width = Dimension.fillToConstraints
                                },
                            color = Theme.colors.primary
                        )
                        AsyncImage(
                            model = currentItem.image,
                            contentDescription = null,
                            modifier = Modifier
                                .constrainAs(image) {
                                    end.linkTo(parent.end, 14.dp)
                                    top.linkTo(parent.top, 42.dp)
                                }
                                .height(72.dp)
                                .width(92.dp)
                        )
                        Row(
                            modifier = Modifier
                                .padding(bottom = 8.dp, start = 16.dp, end = 18.dp)
                                .fillMaxWidth()
                                .constrainAs(feature1) {
                                    start.linkTo(parent.start, 16.dp)
                                    top.linkTo(image.bottom, 20.dp)
                                    end.linkTo(parent.end, 18.dp)
                                },
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            val color = android.graphics.Color.parseColor(
                                
                                    currentItem.textColor
                            )
                            currentItem.featureList.forEach {
                                BulletPoints( // custom compose function
                                    text = it,
                                    color = Color(color),
                                    modifier = Modifier.padding(top = 0.dp),
                                    textStyle = Theme.typography.style400_10_12
                                )
                            }
                        }
                    }
  
                AsyncImage(
                    model = 
                        currentItem.logoUrl,
                    contentDescription = null,
                    modifier = Modifier
                        .padding(16.dp, 0.dp, 20.dp, 20.dp)
                        .align(Alignment.TopStart)
                        .height(44.dp)
                        .width(44.dp)
            `your text`            .border(BorderStroke(2.dp,Color(
                            android.graphics.Color.parseColor(
                               
                                    currentItem.backgroundColor
                            )                            )), shape = CircleShape)
                )
            }
        }`

Answer 1

从我的角度来看，这是 Compose Pager 实现中的一个错误，我相信它会在某个时候得到修复。同时，您可以通过填充页面本身来避免它，而不是使用

pageSpacing

。

也就是说，而不是：

HorizontalPager(
    state = pagerState,
    pageSpacing = 16.dp,
) { page ->
    Page(
        index = page,
    )
}

用途：

HorizontalPager(
    state = pagerState,
) { page ->
    Page(
        index = page,
        modifier = Modifier.padding(horizontal = 8.dp),
    )
}