详解flutter如何实现局部导航管理

 更新时间:2023年01月11日 10:02:58   作者:李小轰_Rex  
这篇文章主要为大家介绍了详解flutter如何实现局部导航管理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

今天,小编给大家分享如何在 flutter 中实现 ‘局部导航’。开始之前我们先来统一一下关于 局部导航 的概念。

局部导航是什么?

我们在 flutter 中使用 navigator 来管理 app 的页面堆栈,主要包括 push、pop 这两种操作。而当我们UI设计划分得更细致时,可能遇到需要在某个独立页面里,单独维护一套子级的堆栈管理。这就叫 局部导航管理

局部控件内单独维护局部范围内的堆栈管理的形式有很多,例如:

  • 形式一: 左侧是菜单栏,右侧是内容块,在内容块中单独维护局部的页面push、pop、操作。
  • 形式二:dialog 弹窗中单独维护布局堆栈管理。

那么下面,小编使用 dialog 的形式来分享实现过程。

实现步骤

第一步

创建工具类,用于局部导航管理,思想是:将需要单独进行堆栈管理的页面使用新的子级 navigator 进行包裹,单独维护一个 navigator,做到每个堆栈容器实现内部各自管理。

///工具类:用于局部导航管理
class LocalNavigator extends StatelessWidget {
  final Widget child;
  const LocalNavigator(this.child, {Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          settings: const RouteSettings(name: '/'),
          builder: (context) {
            return child;
          },
        );
      },
    );
  }
}

第二步

如上 demo 示例,实现一个单独堆栈管理的弹窗内部,对弹窗方法进行封装处理。

showDialog 时使用我们封装的工具类 LocalNavigator 作为父节点,对具体子页面节点进行包裹。

那么子页面内的堆栈操作(push 、pop、)都会在我们的 LocalNavigator 堆栈中响应。

/// 通过局部导航开启一个弹窗
  static Future<T?> showLocalDialog<T>(
    BuildContext context,
    Widget child,
  ) {
    return showDialog<T?>(
      context: context,
      builder: (context) {
        return Dialog(
          child: SizedBox(
            width: 200,
            height: 300,
            child: LocalNavigator(child),
          ),
        );
      },
    );
  }

第三步

弹出 dialog,附上 demo 样例的完整代码

void main() {
  runApp(const Material(
    child: MyApp(),
  ));
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('demo'),
        ),
        body: StatefulBuilder(
          builder: (context, setState) {
            return Center(
              child: TextButton(
                child: const Text('打开弹窗'),
                onPressed: () {
                 showLocalDialog<String?>(context, const _PageA())
                      .then(
                    (data) {
                      //接收来自 dialog 的回调数据
                      if (data != null) {
                        Fluttertoast.showToast(msg: 'mainPage 接收数据:$data');
                      }
                    },
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}
class _PageA extends StatelessWidget {
  const _PageA({Key? key}) : super(key: key);
  void jumpPageB(BuildContext context) {
    Navigator.push<String?>(
      context,
      MaterialPageRoute(
        builder: (context) => const _PageB(),
      ),
    ).then(
      (data) {
        if (data != null) {
          //接收来自 pageB 的回调数据
          Fluttertoast.showToast(msg: 'pageA 接收数据:$data');
        }
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageA')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                jumpPageB(context);
              },
              child: const Text('跳转页面B'),
            ),
          ],
        ),
      ),
    );
  }
}
class _PageB extends StatelessWidget {
  const _PageB({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageB')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop('我是来自pageB的数据');
              },
              child: const Text('返回pageA'),
            ),
            const SizedBox(height: 20),
            TextButton(
              onPressed: () {
                Navigator.of(context, rootNavigator: true).pop('我是来自pageC的数据');
              },
              child: const Text('关闭整个弹窗'),
            ),
          ],
        ),
      ),
    );
  }
}

技术点分析:

1. 局部 Navigator 管理重点

将 需要维护局部堆栈关系的子节点 进行嵌套,使用自定义的工具类 LocalNavigator 作为父节点。

2. 返回上一级页面,与关闭整个弹窗怎么区分?

关键点在于 Navigator.of(context) 中的 rootNavigator 可选入参,默认是不使用根节点下的 navigator。

  • 返回上一级页面,使用当前的堆栈进行操作 Navigator.of(context).pop()
  • 关闭整个弹窗,意味着在根堆栈进行 pop 操作 Navigator.of(context, rootNavigator: true).pop()

3. 如何接收页面关闭时回传的数据?

  • 关闭时通过 pop() 方法进行数据回传 Navigator.of(context).pop(data)
  • 接收回传数据,在打开新堆栈的 push 方法中接收回返回值 Navigator.push<T?>(context, route).then((T){ }) T 为返回值的泛型标识,注意在接收处理的地方需要对返回值进行判空操作
Navigator.push<String?>(
      context,
      MaterialPageRoute(
        builder: (context) => const _PageB(),
      ),
    ).then(
      (data) {
        if (data != null) {
          //接收来自 pageB 的回调数据
          Fluttertoast.showToast(msg: 'pageA 接收数据:$data');
        }
      },
    );

以上就是详解flutter如何实现局部导航管理的详细内容,更多关于flutter局部导航管理的资料请关注脚本之家其它相关文章!

相关文章

  • Android UI效果之绘图篇(二)

    Android UI效果之绘图篇(二)

    这篇文章主要介绍了Android UI效果之绘图篇,针对Android开发中的UI效果Canvas进行讲解,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Android实现录音声波图

    Android实现录音声波图

    这篇文章主要为大家详细介绍了Android实现录音声波图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 直接可用的Android studio学生信息管理系统

    直接可用的Android studio学生信息管理系统

    这篇文章主要为大家详细介绍了直接可用的Android studio学生信息管理系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Android中初始化Codec2的具体流程

    Android中初始化Codec2的具体流程

    这篇文章主要介绍了Android中初始化Codec2的具体流程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • Android银行卡扫描获取银行卡号

    Android银行卡扫描获取银行卡号

    这篇文章主要为大家详细介绍了Android银行卡扫描获取银行卡号的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • android中Activity详解(生命周期、以各种方式启动Activity、状态保存,完全退出等)

    android中Activity详解(生命周期、以各种方式启动Activity、状态保存,完全退出等)

    本篇文章详细的介绍了Activity,包括生命周期、以各种方式启动Activity、状态保存,完全退出等,有兴趣的可以了解一下。
    2016-11-11
  • Android Studio实现华为手机的充电动画效果

    Android Studio实现华为手机的充电动画效果

    本篇文章介绍了我参照华为手机的充电动画来仿照实现的样例,这个动画并不难实现,不过案例精简具有参考意义,需要的朋友快往下看吧
    2021-10-10
  • Android 马赛克(Mosaics)效果

    Android 马赛克(Mosaics)效果

    这篇文章主要为大家介绍了Android 马赛克(Mosaics)效果,马赛克(Mosaics)效果应用非常广泛,想要学习的不要错过本文,可以借鉴参考一下
    2016-01-01
  • 基于flutter sound插件实现录音与播放功能

    基于flutter sound插件实现录音与播放功能

    这篇文章主要介绍了基于flutter sound插件实现录音与播放功能,介绍了如何录音,如何播放本地和远程音频文件,以及如何实现动画,在录制完音频文件后如何上传,这些都是我们平常使用这个功能会遇到的问题。在使用的过程中遇到的问题也有列出,需要的朋友可以参考下
    2022-05-05
  • 详解Android 裸眼3D效果View控件

    详解Android 裸眼3D效果View控件

    主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果。本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2021-08-08

最新评论