使用Compose Ui的Dialog 默认是居中显示屏幕中间。
实现思路:
1.弹窗完全自定义一个全屏弹窗;
2.显示内容显示在底部区域。文章来源:https://www.toymoban.com/news/detail-513421.html
3.点击其他空白区域关闭弹窗。文章来源地址https://www.toymoban.com/news/detail-513421.html
var showDialog by remember {mutableStateOf(false)}
Button(onClick = { showDialog = true }) {
Text(text = "显示弹窗")
}
if(showDialog){
Dialog(onDismissRequest = { }, properties =DialogProperties(usePlatformDefaultWidth = false)) {
Box(Modifier
.fillMaxWidth()
.fillMaxHeight()
.clickable {
showDialog = false
}) {
Text(text = "显示自己的内容",
Modifier
.fillMaxWidth()
.height(300.dp)
.clickable { }
.align(Alignment.BottomCenter)
.background(Color.Cyan))
}
}
}
到了这里,关于Jetpack Compose UI 底部弹窗实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!