在屏幕顶部构建叠加层

Question

我有在屏幕顶部显示进度指示器的方法。

可以，但是调用 Navigator.of(context).pop(); 时主屏幕黑屏了，我只想删除 CircularProgressIndicator()，不过

myShowDialog() async{
    ShowDialog(
      context: context,
      builder: (context) {
        return const Center(
          child: CircularProgressIndicator(),
        );
      },
    );
    try {
      await Future.delayed(const Duration(seconds: 5));
    } finally {
      Navigator.of(context).pop();
    }
}

我从这里调用它。

onPressed: (){
      myShowDialog();
},

如何正确使用这个？

Answer 1

因为你用的是主界面的context弹出。所以尝试像下面这样移动弹出功能。

myShowDialog() async{
    ShowDialog(
      context: context,
      builder: (context) {
        Future.delayed(const Duration(seconds: 5)).then((_) {
          Navigator.of(context).pop();
        });

        return const Center(
          child: CircularProgressIndicator(),
        );
      },
    );
}

但是，我建议创建另一个对话框小部件 class。 并在 initState 函数中调用 Future.delayed 函数。因为在builder中调用它有一些潜在的风险。

class YourDialog extends StatefulWidget {
  const YourDialog({Key? key}) : super(key: key);

  @override
  State<YourDialog> createState() => _YourDialogState();
}

class _YourDialogState extends State<YourDialog> {

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 5)).then((_) {
      if (mounted) Navigator.of(context).pop();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircularProgressIndicator(),
    );
  }
}

在屏幕顶部构建叠加层

Building overlay on top of screen

dart

flutter