如何實現底部工作表

Question

當用戶單擊圖標、按鈕時，我想對該圖像實施更小的操作……它向用戶顯示意見並取消

Answer 1

您可以使用 Jetpack Compose 提供的內容，在此處找到更多信息Jetpack Compose Scaffold + Modal Bottom Sheet

或者你可以讓你自己，這是一個示例實現

@Composable
fun MyCustomBottomSheetScaffold(
    content: @Composable () -> Unit,
    isBottomSheetVisible: Boolean,
    onDismissRequest: () -> Unit,
    bottom: @Composable () -> Unit,
    overlayColor: Color = Color(0xAA_000000),
) {
    val actualOverlayColor = animateColorAsState(if (isBottomSheetVisible) overlayColor else Color.Transparent).value

    Box {
        content()

        Box(Modifier.fillMaxSize()
            .then(if (isBottomSheetVisible) Modifier.clickable { onDismissRequest() } else Modifier)
            .background(
                actualOverlayColor
            ),
            contentAlignment = Alignment.BottomCenter
        ) {
            AnimatedVisibility(
                isBottomSheetVisible,
                enter = slideInVertically(initialOffsetY = { it }),
                exit = slideOutVertically(targetOffsetY = { it }),
            ) {
                bottom()
            }
        }
    }
}

下面是如何使用它

@Composable
fun BottomSheetExample() {
    // When this is true, the bottom sheet gets expanded
    var isBottomSheetVisible by remember { mutableStateOf(false) }
    MyCustomBottomSheetScaffold(
        content = {
            // Content goes here
            Box(Modifier.fillMaxSize().background(Color.Blue), contentAlignment = Alignment.Center) {
                Button(onClick = { isBottomSheetVisible = true }) {
                    Text("Open")
                }
            }
        },
        isBottomSheetVisible = isBottomSheetVisible,
        onDismissRequest = { isBottomSheetVisible = false },
        bottom = {
            // Bottom sheet content goes here
            Box(
                Modifier.fillMaxWidth()
                    .background(Color.White)
                    .clickable {
                        isBottomSheetVisible = false
                    }
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                Text("Close")

            }
        }
    )
}

Answer 2

只是一個澄清，如果你決定接受這個答案（Benoit TH 建議）： Jetpack Compose Scaffold + Modal Bottom Sheet

您將需要使用ModalBottomSheetLayout在其上方設置一個帶有灰色背景的底部工作表，就像您在提供的示例圖像中顯示的那樣。 如果您使用常規的BottomSheetScaffold行為是不同的，底部工作表顯示在其上方沒有背景。

編輯：

考慮到 Material 3刪除了這些組件（為什么谷歌，為什么？，）所以如果你想使用它們（或者你正在遷移到 Material 3）。 只需將 Material 中的源代碼復制到您的項目中（這就是我所做的，以便能夠在具有 Material 3 的項目中使用ModalBottomSheetLayout ）