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

Question

我想在Flutter中调用API的同时展示全屏加载视图。但是当我在Scaffold主体中添加加载小部件时，它会出现在应用栏和底部导航栏之后。

我花费了很多时间来显示全屏加载视图。此外，我还想在API调用期间防止返回操作。

- Dhaval Patel

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'。

- Julio Henrique Bitencourt

---

使用 showDialog 可能会破坏上下文。请查看 https://pub.dev/packages/screen_loader。 - Arnold Parge

Answer 2

1. 全屏加载器: 显示全屏加载器的最佳解决方案是使用包https://pub.dev/packages/screen_loader。
2. 加载时防止返回操作: 此包提供变量isLoading，使用它来防止返回。例如：

// --------------- some_screen.dart ---------------
import 'package:flutter/material.dart';
import 'package:screen_loader/screen_loader.dart';

class SomeScreen extends StatefulWidget {
  @override
  _SomeScreenState createState() => _SomeScreenState();
}

class _SomeScreenState extends State<SomeScreen> with ScreenLoader<SomeScreen> {
  getData() {
    this.performFuture(NetworkService.callApi);
  }

  @override
  Widget screen(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
          // your beautiful design..
          ),
      onWillPop: () async {
        return !isLoading;
      },
    );
  }
}

// --------------- app_api.dart ---------------
class NetworkService {
  static Future callApi() async {

  }
}

注意: 您需要查看performFuture的定义，以了解它在不同场景下的工作方式。

- Arnold Parge

Answer 3

您可以使用此对话框进行全屏加载progress_dialog

- Rutvik Gumasana

Answer 4

你没有考虑移除加载屏幕的脚手架吗？

- Michael Pfaff

---

在我的应用程序中，没有加载屏幕，但是当我调用API时，需要像https://github.com/SVProgressHUD/SVProgressHUD一样显示加载器。同时还要防止返回。 - Dhaval Patel

那么你想要什么？对话框还是全屏加载视图？如果你想要一个全屏加载视图，你需要让Scaffold只成为普通视图的一部分，在加载视图中不在小部件树中。 - Michael Pfaff

@DhavalPatel 似乎您从未解决过您的问题。就像我之前说的那样，您的“loader”需要放在脚手架之外。就这么简单。 - Michael Pfaff