在 BottomSheetScaffold (Jetpack Compose) 中的 BottomSheet 顶部显示可扩展性指示器

Question

是否可以在 BottomSheetScaffold (Jetpack Compose) 中折叠的底部表顶部添加这个灰色的小圆矩形视图（参见屏幕截图）？它有属性吗？

Answer 1

我认为没有相应的选项或属性，但是当您创建自己的底部 Sheet 内容时，您可以轻松地在 sheetContent 中实现它。

Answer 2

您可以在 sheetContent 中轻松创建它，例如我的：

Box(
  modifier = Modifier
    .background(MaterialTheme.colors.onSurface.copy(alpha = 0.2f))
    .size(width = 48.dp, height = 4.dp)
    .clip(RoundedCornerShape(radius = 50))
)

Answer 3

据我所知，Compose 1.1 中没有属性，但可以将其添加到 sheetContent:

Column(
    modifier = Modifier.fillMaxWidth().padding(8.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Box(
        modifier = Modifier
            .background(
                color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
                shape = RoundedCornerShape(50),
            )
            .size(width = 36.dp, height = 4.dp),

    )
}

（最初的建议归功于@uragiristereo，但 .clip(RoundedCornerShape(radius = 50)) 似乎在 Compose 1.1 中不起作用。也许行为自旧版本以来发生了变化。）

在 BottomSheetScaffold (Jetpack Compose) 中的 BottomSheet 顶部显示可扩展性指示器

Show indicator of expandability on the top of BottomSheet in BottomSheetScaffold (Jetpack Compose)

android

bottom-sheet

android-jetpack-compose