Jetpack Compose中HorizontalPager与DotsIndicator重叠致指示器不可见问题

你的DotsIndicator无法显示的核心问题是外层Box未设置宽度填充，导致内部Row的fillMaxWidth()仅能填充Box的自适应宽度（即所有圆点的总宽度），而非屏幕宽度；同时多余的Box和不合理的align修饰符让指示器布局异常，看起来像是被轮播组件覆盖。

修复方案1：移除多余的外层Box #

直接让Row作为DotsIndicator的根元素，这样Row的fillMaxWidth()会直接填充父级（Column）的宽度，确保指示器占满屏幕宽度，圆点居中显示：

@Composable
fun DotsIndicator(
    pageCount: Int,
    selectedIndex: Int
) {
    Row(
        modifier = Modifier
            .height(50.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        repeat(pageCount) { iteration ->
            val color = if (selectedIndex == iteration) Color.DarkGray else Color.LightGray
            Box(
                modifier = Modifier
                    .padding(2.dp)
                    .clip(CircleShape)
                    .background(color)
                    .size(20.dp)
            )
        }
    }
}

修复方案2：给外层Box添加宽度填充（如需保留Box） #

如果后续需要在指示器上叠加其他元素，可给外层Box添加fillMaxWidth()，让内部Row能填充整个屏幕宽度，同时调整align修饰符为Center（因Box高度与Row一致，BottomCenter无实际意义）：

@Composable
fun DotsIndicator(
    pageCount: Int,
    selectedIndex: Int
) {
    Box(modifier = Modifier.fillMaxWidth()) {
        Row(
            modifier = Modifier
                .height(50.dp)
                .fillMaxWidth()
                .align(Alignment.Center),
            horizontalArrangement = Arrangement.Center
        ) {
            repeat(pageCount) { iteration ->
                val color = if (selectedIndex == iteration) Color.DarkGray else Color.LightGray
                Box(
                    modifier = Modifier
                        .padding(2.dp)
                        .clip(CircleShape)
                        .background(color)
                        .size(20.dp)
                )
            }
        }
    }
}

修改后，指示器会正常显示在HorizontalPager下方，不会被覆盖。

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