jetpack compose 中的 ProgressDialog

Question

我想在用户执行注册等操作时显示不确定的进度对话框。可以使用 ProgressDialog.

的旧方法

对于撰写，我找到了这个但这并不是我要找的，因为它只是一个视图。它不像对话框那样覆盖屏幕。

有了 CircularProgressIndicator 我可以做到这一点：

如您所见，它显示在视图下方。

我想创建这样的东西：

它应该有：

昏暗的背景
覆盖其他视图
不可取消

如何在 Jetpack compose 中实现这一点？

Answer 1

您可以使用 Dialog 可组合项：

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    Dialog(
        onDismissRequest = { showDialog = false },
        DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)
    ) {
        Box(
            contentAlignment= Center,
             modifier = Modifier
                .size(100.dp)
                .background(White, shape = RoundedCornerShape(8.dp))
        ) {
            CircularProgressIndicator()
        }
    }
}

Answer 2

Dialog 和 loading text 使用 compose.material 的对话框组件。

@Composable
fun DummyProgress() {
    var dialogState by remember { mutableStateOf(false) }
    Button(onClick = { dialogState = !dialogState }) {
        Text(text = "Show Progress")
    }
    if (dialogState) {
        Dialog(onDismissRequest = { dialogState = false },
        DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)) {
            Box(
                contentAlignment= Alignment.Center,
                modifier = Modifier
                    .size(100.dp)
                    .background(White, shape = RoundedCornerShape(12.dp))
            ) {
                Column {
                    CircularProgressIndicator(modifier = Modifier.padding(6.dp, 0.dp, 0.dp, 0.dp))
                    Text(text = "Loading...", Modifier.padding(0.dp, 8.dp, 0.dp, 0.dp))
                }
            }
        }
    }
}

jetpack compose 中的 ProgressDialog

ProgressDialog in jetpack compose

android

android-dialog

android-jetpack-compose