Jetpack Compose中如何让LazyRow内最后一个不同项垂直居中？

我明白你的问题啦！你给LazyRow设置了verticalAlignment = Alignment.CenterVertically，本以为能让最后那个按钮垂直居中，结果因为前面的ProductItem有的是2行文本、有的是3行，高度参差不齐，整个LazyRow的高度被最高的那些项给撑开了，最后按钮的“居中”是跟着这个最大高度走的，看起来就没和矮一些的ProductItem对齐，对吧？

给你两个实用的解决办法，你可以按需选：

• 办法一：给所有ProductItem统一高度，固定LazyRow的行高
  不管ProductItem是2行还是3行文本，让它们都占满相同的高度，这样LazyRow的高度就固定了，按钮的垂直居中自然就准确了。你可以给ProductItem的Modifier加上height(IntrinsicSize.Min)，让它自适应最高项的高度，同时让内容居中：

  ProductItem(
      cartViewModel, 
      product, 
      onProductClicked,
      modifier = Modifier
          .height(IntrinsicSize.Min)
          .wrapContentHeight(Alignment.CenterVertically)
  )
  

  要是你想直接定死高度，比如设置成height(120.dp)也可以，只要能覆盖所有ProductItem的最大高度就行。

• 办法二：去掉全局对齐，给每个项单独设置垂直居中
  把LazyRow的verticalAlignment = Alignment.CenterVertically删掉，然后用Box把每个ProductItem和最后那个按钮分别包裹起来，让它们在自己的空间里垂直居中，这样不管其他项的高度如何，每个元素的内容都会保持垂直居中状态：

  LazyRow() {
      items(productList) { product ->
          Box(
              modifier = Modifier.fillMaxHeight(),
              contentAlignment = Alignment.CenterVertically
          ) {
              ProductItem(cartViewModel, product, onProductClicked)
          }
      }
      item {
          Box(
              modifier = Modifier.fillMaxHeight(),
              contentAlignment = Alignment.CenterVertically
          ) {
              SecondaryButton(
                  modifier = Modifier.padding(horizontal = 56.dp),
                  text = stringResource(R.string.view_all),
                  endIconResId = SystemIcons.ChevronRight,
              ) {
                  onViewAllClicked()
              }
          }
      }
  }
  

这两种办法都能解决你的问题，你可以根据自己的布局需求来选，要是希望ProductItem的高度跟着最长的内容走，就用第一个办法；要是想让每个项各自独立居中，就用第二个办法。

内容来源于stack exchange