Compose - 如何在 BottomSheet 中实现嵌套滚动

Question

我在

BottomSheet

中创建了一个

Compose

，问题是我把它包裹在

BottomSheetDialogFragment

上。

在其中，我创建了我的

BottomSheetScreen

，问题是滚动时它无法正常工作。

我正在两台设备上进行测试，小型设备和普通设备。

问题是，在正常的情况下，

BottomSheet

显示正确，所有内容都是可读的，但在小情况下，所有内容都被折叠。问题是小滚动条，向下滚动时它会滚动，但是当尝试再次滚动到顶部时它会移动

BottomSheet

。

所需输出： 在普通设备上打开

BottomSheet

时（意味着文本适合屏幕并且不需要任何滚动来查看内容），但在小设备中它会滚动，但当尝试滚动回顶部时，它移动

BottomSheet

而不是向上滚动。我记得这可以用

NestedScrolling

和

RecyclerView

来修复，但现在在

Compose

中，当没有更多滚动可做时，移动

BottomSheet

的替代方法是什么？

这是我的

BottomSheet

，以防您需要。

Surface {
    Column {
        Spacer(modifier = Modifier.height(8.dp))
        Divider(
            modifier = Modifier
                .size(32.dp, 5.dp)
                .align(Alignment.CenterHorizontally)
                .clip(RoundedCornerShape(45.dp))
                .fillMaxWidth(),
            color = MaterialTheme.colors.grey,
        )
        CloseButton(
            onClick = onClose,
            modifier = Modifier
                .padding(start = 16.dp, top = 8.dp)
                .size(24.dp),
        )
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .weight(1f, false),
        ) {
            Image(
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxWidth(),
                painter = painterResource(id = R.drawable.ic_launcher),
                contentDescription = null,
            )
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxWidth(),
                text = "This is the title",
                style = MaterialTheme.typography.h2,
                textAlign = TextAlign.Center,
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxWidth(),
                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ornare lectus sit amet est placerat. Tortor dignissim convallis aenean et tortor at risus. Eget est lorem ipsum dolor sit. Quam quisque id diam vel. Viverra mauris in aliquam sem fringilla ut morbi tincidunt. Faucibus ornare suspendisse sed nisi lacus sed. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Neque convallis a cras semper auctor neque vitae tempus quam. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Ut tristique et egestas quis ipsum suspendisse ultrices. Velit scelerisque in dictum non consectetur.",
                style = MaterialTheme.typography.body1,
                textAlign = TextAlign.Center,
            )
            Spacer(modifier = Modifier.height(24.dp))
        }
        StickyBottom(onAcceptButton = onAcceptButton,
            onRejectButton = onRejectButton)
    }
}

参考：BottomSheetDialogFragment - 允许滚动子项 (stackoverflow.com)

我记得当时使用 XML 而不是 Compose。

Answer 1

将

Modifier.verticalScroll(rememberScrollState())

添加到文本修饰符而不是列中，以使文本可滚动，这样您就可以滚动文本而不是整个列，可能会避免工作表也滚动