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

Question

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

我花了很多时间来全屏显示加载 View 。另外，我想在调用 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”。