如何使用 jetpack compose 在 ModalBottomSheet 上放置粘性底部行/栏

Question

将项目放置在

ModalBottomSheet

内时，它们会堆叠并扩展

Bottom sheet

，直到达到一定的高度阈值，超过该高度，用户必须向上滚动底部工作表才能加载溢出的内容。
我正在尝试放置底部一行可组合项，例如

Button

和另一个圆形按钮，它始终是固定的（无论

ModalBottomSheet

是否展开）。

我尝试过的（使用脚手架/柱子包裹整个底部工作表内容）总是导致底部

row

被放置在底部，仅处于展开状态。

这就是我想要的原型

Answer 1

我可以通过偏移来处理这个问题。 首先，创建一个值来计算ModalBottomSheet的高度：

var modalHeight by remember { mutableStateOf(0) }

之后添加：

 ModalBottomSheet(
    modifier = Modifier
        .padding(0.dp)
        .onGloballyPositioned {
            modalHeight = it.size.height
        })

然后你可以处理任何带有偏移量的元素 例如我有一个 LazyRow:

 LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .requiredHeight(170.dp)
                .offset {
                    IntOffset(
                        0,
                        (modalHeight - bottomSheetState.requireOffset() - footerHeight).toInt()
                    )
                }
                .fillMaxWidth()
                .padding(top = 12.dp, end = 0.dp, start = 0.dp, bottom = 42.dp)
                .onGloballyPositioned {
                    footerHeight = (((it.size.height * 1)) + bottomPadding + 0).toInt()
                }
                .shadow(4.dp, RoundedCornerShape(1.dp), spotColor = Color.Gray)
                .background(color = Color.White, RoundedCornerShape(1.dp))
            ,
            horizontalArrangement = Arrangement.SpaceAround,
            contentPadding = PaddingValues(16.dp)
        )

您可以使用每个元素，如文本、按钮等...

bottomPadding：我为设备按钮和元素之间的空间创建了这个。 footerHeight：这是您正在使用的元素的高度；如果元素是静态的，则使用静态值。

Answer 2

我设法通过将底部纸张偏移应用到按钮来做到这一点。

if (showBottomSheet) {
          ModalBottomSheet(
            onDismissRequest = {
              showBottomSheet = false
            },
            sheetState = sheetState
          ) {
            // Sheet content
            Box(
              modifier = Modifier.fillMaxHeight(),
              contentAlignment = Alignment.BottomEnd
            ) {
              LazyColumn {
                items(50) {
                  Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "Hello $it"
                  )
                }
              }
              Button(modifier = Modifier
                .wrapContentWidth()
                .padding(20.dp)
                .offset {
                  IntOffset(
                    x = 0,
                    y = -sheetState.requireOffset().toInt()
                  )
                },
                onClick = {
                  scope.launch {
                    sheetState.hide()
                    showBottomSheet = false
                  }
                }) {
                Text(text = "Close")
              }
            }
          }
        }

请注意，我使用 Box 容器将按钮放在列表顶部。然后，我将盒子的内容对齐到底部。当您向上拖动底部工作表时，它的大小不会改变。它仅改变偏移量。因此，我采取了该偏移量，并将按钮向上移动相同的量。