flutter 页面加载动画_Flutter之网络请求过渡动画--LoadingDialog

Flutter之网络请求过渡动画--LoadingDialog

发布时间：2019-01-15 18:02,

浏览次数：5706

, 标签：

Flutter

LoadingDialog

2月27日更新

今天再次使用了我自行开发的loadDialog程序。认识到旧方法过于简单。于是想到采用另一种方案。具体来说，则是如何在A页面实现关闭弹出对话框的过程。

Dialog。

主要用到了 回调

代码如下： import 'dart:async'; import 'package:flutter/material.dart'; // ignore:

必须为不可变的类名为NetLoadingDialog，并且它是一个字符串

加载条目；标志位outsideDismiss；函数dismissDialog；NetLoadingDialog(: {

Key key, this.loadingText = "loading...", this.outsideDismiss = true, this.

dismissDialog}) : super(key: key); @override State createState

() => _LoadingDialog(); } class _LoadingDialog extends State {

_dismissDialog() { Navigator.of(context).pop(); } @override void initState() {

super.initState(); if (widget.dismissDialog != null) { widget.dismissDialog(

//将该关闭 dialog的方法发送至页面实例。（Navigator.context.$close） ); } } @override

Widgetbuild(BuildContext context) { return xxxx } }

该build方法保持不变，在实现过程中主要基于dismissDialog这一机制。系统会向该界面的调用方发送一个pop方法的响应，在完成本模块处理后直接调用即可。

调用代码：

注

dismissDialog: _disMissCallBack, outsideDismiss: false, ); } ); //这个func

也就是一种实现对话框关闭的方式，在需要的时候使用这个方法即可 _disMissCallBack(Function func) { xxx showSnackBar(

"登录成功"); func(); }

这样，很多情况下都可以用 回调 的方式来处理了 ，over。

与我上一篇相比，则是主要地将逻辑置于自己的页面来处理，并各自拥有不同的应用场景

希望都能给你些灵感。

以下是原文

今天再次分享Flutter中网络加载的过渡动画方案，并非其他用途。
由于最近在编写自定义Dialog组件的同时也涉及了相关的网络请求处理。

<>1、先上效果图

<>2、说一下实现思路

由于启动的新Dialog是一个全新的界面，并且我希望实现某种特定的行为以确保对话的有效性；因此我认为若使用pop(context)方法，则必须能够访问对话所在的context环境；为何不让dialog自行关闭自身呢？我为此开发了以下对话逻辑。

import 'dart:async'; import 'package:flutter/material.dart'; // ignore:

immutable class NetLoadingDialog @ extends prevStateless noTracing noEcho extends Observed inheritScope { String_

loadingText; bool outsideDismiss; Function dismissCallback; Future

requestCallBack; NetLoadingDialog( {Key key, this.loadingText = "loading...",

设置为true的是this.outsideDismiss ，并分别有this-dismiss callback 和this-request callback 。
这里需要注意的是}）实际上是闭括号} ，而super在这里可能代表父类或某种超级函数。

(key: key); @override State createState() => _LoadingDialog();

} class _LoadingDialog extends State { _dismissDialog() { if (

widget.dismissCallback != null) { widget.dismissCallback(); } Navigator.of(

context).pop(); } @override void initState() { super.initState(); if (widget.

requestCallBack!= null) { widget.requestCallBack.then((_) { Navigator.pop(

context); }); } } @override Widget build(BuildContext context) { return new

当tapped事件发生时（如果widget.outsideDismiss为真，则调用_dismissDialog控件）

Material( type: MaterialType.transparency, child: new Center( child: new

SizedBox( width: 120.0, height: 120.0, child: new Container( decoration:

shapeDecoration(彩色,方形装饰)

borderRadius: BorderRadius.all( Radius.circular(8.0), ), ), ), child: new Column

( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment:

CrossAxisAlignment.center, children: [ new CircularProgressIndicator(),

new Padding( padding: const EdgeInsets.only( top: 20.0, ), child: new Text(

widget.loadingText, style: new TextStyle(fontSize: 12.0), ), ), ], ), ), ), ), )

, ); } }

在这里主要将一个requestCallBack类型的Future函数传递给相应的组件，在initState方法中对返回结果进行监听，并在执行完毕时关闭对话框窗口。其核心目的就在于向对话组件传递必要的响应数据，在此过程中也实现了与上一篇网络请求操作的一致性与兼容性。

使用起来就简单了，和普通的Dialog一样。

<>3、How to Use

showDialog( context: context, barrierDismissible: false, builder: (_) { return

创建一个新的NetLoadingDialog实例，并传递注册后的请求回调和无效的外部取消功能；

;

而这个_register()方法就是一个Future函数。

<>4、其它实现方式

可以自己先写一个Loading

状态相关联的状态界面，在需要调用时会根据state进行判断和处理，并在此基础上决定是否加载loading状态；同时，在这种情况下，默认情况下该loading状态应设置为半透明。

@override Widget build(BuildContext context) { if(showLoading){ return xxx; }

}

在外部层中可以采用Stack布局，在这种情况下类似于Android系统中的FrameLayout结构。通过这种方式就可以将两个组件进行叠加操作，并实现显示加载状态的能力。类似地，在切换状态时，则只需调用组件的setState方法即可完成切换操作的前提条件是该组件必须为一个Stateless组件（即没有内部存储状态的状态管理组件）。

好的，请提供另外一种方式。如果有更优的方法，在A页面上关闭对话框吗？希望能得到您的评论。

希望我的方法对你有帮助。