Android Studio 如何实现底表

mfuanj7w  于 2022-12-13  发布在  Android
关注(0)|答案(2)|浏览(149)

我想实现一些更小的图像时,用户点击图标,按钮...它显示给用户的意见和取消

4szc88ey

4szc88ey1#

您可以使用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")

            }
        }
    )
}
ddrv8njm

ddrv8njm2#

如果你决定采用这个答案(Benoit TH建议的),请澄清一点:Jetpack Compose Scaffold + Modal Bottom Sheet
您需要使用ModalBottomSheetLayout来使底部工作表的上方具有灰色背景,就像您在提供的示例图像中所显示的那样。如果您使用 regularBottomSheetScaffold,则行为会有所不同,底部工作表的上方显示没有背景。

相关问题