我想实现一些更小的图像时,用户点击图标,按钮...它显示给用户的意见和取消
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") } } ) }
ddrv8njm2#
如果你决定采用这个答案(Benoit TH建议的),请澄清一点:Jetpack Compose Scaffold + Modal Bottom Sheet您需要使用ModalBottomSheetLayout来使底部工作表的上方具有灰色背景,就像您在提供的示例图像中所显示的那样。如果您使用 regularBottomSheetScaffold,则行为会有所不同,底部工作表的上方显示没有背景。
ModalBottomSheetLayout
BottomSheetScaffold
2条答案
按热度按时间4szc88ey1#
您可以使用Jetpack Compose提供的功能,在此处查找更多信息Jetpack Compose Scaffold + Modal Bottom Sheet
或者您可以自己创建,下面是一个示例实现
以下是使用方法
ddrv8njm2#
如果你决定采用这个答案(Benoit TH建议的),请澄清一点:Jetpack Compose Scaffold + Modal Bottom Sheet
您需要使用
ModalBottomSheetLayout
来使底部工作表的上方具有灰色背景,就像您在提供的示例图像中所显示的那样。如果您使用 regularBottomSheetScaffold
,则行为会有所不同,底部工作表的上方显示没有背景。