在颤动中显示全屏加载小部件

Posted 2023-02-23

【中文标题】在颤动中显示全屏加载小部件

【英文标题】：Display full screen loading widget in flutter

【发布时间】：2019-10-27 23:39:12

【问题描述】：

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

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

【问题讨论】：

这样做：***.com/a/64387933/10563627

【参考方案1】：

全屏加载器：显示全屏加载器的最佳解决方案是使用包 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 的定义，了解它在不同场景下的工作原理。

【参考方案2】：

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

【参考方案3】：

好吧，既然你使用的是Scaffold，那就使用它的showDialog()方法吧。

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

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

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

为防止用户单击 Dialog 上的后退按钮并将其关闭，请将您的 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'。

【讨论】：

使用showDialog 会弄乱上下文。检查pub.dev/packages/screen_loader。

【参考方案4】：

你没有想过移除加载屏幕的支架吗？

【讨论】：

在我的应用程序中，没有加载屏幕，但是当我调用 API 时，我需要显示像 github.com/SVProgressHUD/SVProgressHUD 这样的加载程序。同时 API 调用，也防止返回。

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

@DhavalPatel 看来您从未解决过您的问题。正如我之前所说，你的“装载机”需要在脚手架之外。就这么简单。