Jetpack Compose中HorizontalPager设子项最大宽度后无法显示两侧邻项边缘如何解决？

这个不是Compose或Accompanist库的bug，属于HorizontalPager默认测量逻辑的预期行为：

• HorizontalPager会给每个子项分配固定的页面宽度，计算规则为：Pager总宽度 - 左右contentPadding值，每个子项默认占满这个宽度作为自己的布局槽位
• 当你直接给子项设置小于页面宽度的maxWidth时，子项本身的渲染宽度会变小，但它在Pager中占用的槽位宽度还是保持原来的页面宽度，槽位内多余的空间会变成留白，相邻项无法进入这个留白区域，因此看不到左右边缘
• 当子项maxWidth大于等于页面宽度、或者设置fillMaxWidth时，子项会占满整个槽位，contentPadding预留的空间正好可以显示相邻项的边缘，就符合你的预期了

调整子项的Modifier设置逻辑，遵循「先占满Pager分配的页面槽位，再限制子项最大宽度并居中」的原则即可，你原来的HorizontalPager的contentPadding和itemSpacing配置不需要做任何修改：

方案1：直接调整子项Modifier顺序+居中 #

利用Compose Modifier从左到右生效的特性，先占满槽位，再限制最大宽度，同时设置居中对齐：

@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_200dpWidth() {
  MyPager { 
    MyText(
      modifier = Modifier
        .fillMaxWidth() // 先占满Pager分配的页面槽位宽度
        .widthIn(max = 200.dp) // 再限制子项最大宽度
        .align(Alignment.CenterHorizontally) // 让子项在槽位内居中
    ) 
  }
}

方案2：外层套容器包裹子项 #

如果子项本身逻辑复杂，不想修改内部Modifier，可以在外层套一层Box容器做宽度限制：

@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_200dpWidth() {
  MyPager { 
    Box(
      modifier = Modifier
        .fillMaxWidth()
        .widthIn(max = 200.dp)
        .align(Alignment.CenterHorizontally)
    ) {
      MyText(modifier = Modifier.fillMaxWidth())
    }
  }
}

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