Jetpack Compose - 具有最大宽度的项目的 Horizo​​ntalPager 项目间距/填充

Question

使用 Jetpack Compose 和伴奏寻呼机，我正在尝试创建一个HorizontalPager ​​ntalPager，其中：

1. 显示当前项目左侧和右侧的项目边缘
2. Pager项目有一个最大宽度

例如，我编写了以下代码（为了简单起见，我制作了Text项，但实际上，我实际上制作了更复杂的Card项）：

@Composable
fun MyText(modifier: Modifier) {
  Text(
    text = LOREM_IPSUM_TEXT,
    modifier = modifier
      .wrapContentHeight()
      .border(BorderStroke(1.dp, Color.Red))
  )
}

@ExperimentalPagerApi
@Composable
fun MyPager(pagerItem: @Composable () -> Unit = {}) {
  Scaffold {
    Column(
      modifier = Modifier
        .fillMaxSize()
        // In case items in the VP are taller than the screen -> scrollable
        .verticalScroll(rememberScrollState())
    ) {
      HorizontalPager(
        contentPadding = PaddingValues(32.dp),
        itemSpacing = 16.dp,
        count = 3,
      ) {
        pagerItem()
      }
    }
  }
}

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

@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_500dpWidth() {
  MyPager { MyText(modifier = Modifier.widthIn(max = 500.dp)) }
}

@ExperimentalPagerApi
@Preview
@Composable
fun MyPager_FillMaxWidth() {
  MyPager { MyText(modifier = Modifier.fillMaxWidth()) }
}

我遇到的问题是，当我使项目的最大宽度似乎小于屏幕宽度（请参阅MyPager_200dpWidth ）时，我不再看到侧面的项目。 另一方面，使用最大宽度较大的项目（参见MyPager_500dpWidth ）或fillMaxWidth （参见MyPager_FillMaxWidth ）可以让我看到侧面的项目。

在我看来，最大宽度较小的项目实际上比最大宽度较大的项目占用了更多的水平空间。 这可以显示在预览部分...

看看左边的图像 ( MyPager_500dpWidth) and middle ( MyPager_FillMaxWidth ) show the next item, while the image on the right ( MyPager_200dpWidth`) 是如何占据整个屏幕的？ 这是将鼠标悬停在项目上以查看骨架框时的另一个比较...

只是想知道是否有人可以帮助我弄清楚如何解决这个用例。 Compose中是否有可能存在错误？

Answer 1

页面大小由HorizontalPager.contentPadding参数控制。

将widthIn(max = 200.dp)应用于您的文本只会减小页面内元素的大小，而页面大小保持不变。

应用更多填充应该可以解决您的问题，例如contentPadding = PaddingValues(100.dp)看起来像这样：

Answer 2

您可以通过像这样添加 contentPadding 来解决此问题

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