Question

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

我花费大量时间在全屏模式下显示加载视图。另外，我想防止API调用时的后退操作。

Answer 1

您是否没有想到要为加载屏幕移除支架？

Answer 2

好吧，由于您使用的是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 '。

Answer 3

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

Answer 4

全屏加载器：显示全屏加载器的最佳解决方案是使用软件包 https://pub.dev/packages/screen_loader。
防止加载时后退动作：此程序包提供了变量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的定义才能了解其在不同情况下的工作原理。

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

4 个答案: