android - 如何实现底部工作表

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")

            }
        }
    )
}