HorizontalPager出现额外顶部内边距导致下方指示器被遮挡问题

问题根因 #

• 布局约束配置错误：包含Pager和分页指示器的Column，当前设置的是顶部对齐ConstraintLayout父布局顶部，和顶部高度为42dp的返回按钮、收藏按钮处于同一垂直起始位置，发生布局重叠，视觉上表现为Pager顶部存在额外内边距、整体向下偏移。
• 高度约束缺失：既没有给Column绑定底部约束限制垂直范围，也没有给HorizontalPager设置高度权重，导致Pager+指示器的整体高度超出父布局可用空间，底部指示器被裁剪不可见。

修复方案 #

修改3处核心配置即可解决：

1. 将ConstraintLayout的高度从wrapContentHeight改为fillMaxHeight，撑满外层Box的可用高度
2. 调整Column的约束，将顶部对齐改为对齐返回按钮的底部，同时增加底部对齐父布局的约束，限定Column的垂直范围
3. 给HorizontalPager增加weight(1f)属性，让其撑满Column内指示器之外的所有剩余空间，保证指示器固定在Column底部不会被遮挡

修复后代码 #

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(350.dp)
        .clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
        .background(MaterialTheme.colors.onBackground)
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight() // 改动1：撑满父布局高度
            .padding(10.dp)
    ) {
        val (backButton, favouriteButton, photosPager) = createRefs()

        BackNavigationSingleButton(
            backButtonSelected = { }, modifier = Modifier
                .height(42.dp)
                .width(60.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(Color.Red)
                .constrainAs(backButton) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
        )

        IconButton(onClick = {}, modifier = Modifier
            .size(42.dp)
            .constrainAs(favouriteButton) {
                top.linkTo(parent.top)
                end.linkTo(parent.end)
            }) {
            Icon(
                imageVector = Icons.Outlined.Favorite,
                contentDescription = null
            )
        }

        Column(
            modifier = Modifier
                .constrainAs(photosPager) {
                    top.linkTo(backButton.bottom, margin = 16.dp) // 改动2：顶部对齐返回按钮底部
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom) // 改动2：增加底部对齐约束
                }) {
            val pagerState = rememberPagerState()
            val items = 3
            HorizontalPager(
                count = items,
                state = pagerState,
                modifier = Modifier.weight(1f), // 改动3：增加权重撑满剩余空间
                contentPadding = PaddingValues(0.dp)
            ) { page ->
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Green)
                )
            }

            Row(modifier = Modifier.align(Alignment.CenterHorizontally).padding(vertical = 8.dp)) {
                for (i in 1..items) {
                    Canvas(modifier = Modifier.size(20.dp)) {
                        drawCircle(
                            color = Color.Gray,
                            center = Offset(x = 10f, y = 10f),
                            radius = size.minDimension / 4,
                        )
                    }
                }
            }
        }
    }
}

问题复现截图 #

补充说明 #

如果修改约束后仍存在多余顶部间距，可给HorizontalPager额外添加Modifier.padding(0.dp)明确清除默认边距，同时确认pageSpacing参数设置为0即可。

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