在flutter中显示全屏加载小部件

Question

我想在 API 调用时在 flutter 中显示全屏加载视图。但是当我在脚手架主体中添加加载小部件时，它会出现在 appbar 和底部导航器之后。

我花了很多时间来全屏显示加载视图。另外，我想在 API 调用时防止后退动作。

Answer 1

好吧，既然您正在使用Scaffold，那么请使用它的showDialog()方法。

它有一个属性barrierDismissible，如果您设置为 false，则用户将无法关闭其外部的屏幕或与其进行交互。

void _openLoadingDialog(BuildContext context) {
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: CircularProgressIndicator(),
      );
    },
  );
}

完成 API 加载后，调用Navigator.pop(context);以关闭对话框。

为了防止用户单击对话框上的后退按钮，将其关闭，请将您Scaffold的WillPopScope小部件包裹在内部并实现 onWillPop 功能。

@override
Widget build(BuildContext context) {
  return WillPopScope(
      child: Scaffold(
        body: Container(),
      ),
      onWillPop: _onBackButton
  );
}

Future<bool> _onBackButton() {
  // Implement your logic
  return Future.value(false);
}

如果您对其返回 false，用户将无法按下后退按钮。因此，请使用您想要的任何逻辑，例如“如果我正在加载返回 false，否则返回 true ”。