iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >详解flutter如何实现局部导航管理
  • 666
分享到

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

flutter局部导航管理flutter导航 2023-01-11 12:01:53 666人浏览 安东尼
摘要

目录引言局部导航是什么?实现步骤第一步第二步第三步技术点分析:1. 局部 Navigator 管理重点2. 返回上一级页面,与关闭整个弹窗怎么区分?3. 如何接收页面关闭时回传的数据

引言

今天,小编给大家分享如何在 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局部导航管理的资料请关注编程网其它相关文章!

--结束END--

本文标题: 详解flutter如何实现局部导航管理

本文链接: https://www.lsjlt.com/news/177364.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解flutter如何实现局部导航管理
    目录引言局部导航是什么?实现步骤第一步第二步第三步技术点分析:1. 局部 Navigator 管理重点2. 返回上一级页面,与关闭整个弹窗怎么区分?3. 如何接收页面关闭时回传的数据...
    99+
    2023-01-11
    flutter局部导航管理 flutter 导航
  • Flutter实现底部导航栏创建详解
    目录添加依赖项如何使用功能属性主题预览图代码Flutter web问题:Failed to load network image我的解决办法参考资料ConvexBottomBar是一...
    99+
    2024-04-02
  • flutter实现底部导航栏
    本文实例为大家分享了flutter实现底部导航栏的具体代码,供大家参考,具体内容如下 一.flutter底部导航栏常用组件BottomNavigationBar 属性介绍 Botto...
    99+
    2024-04-02
  • Flutter如何实现底部导航栏创建
    Flutter如何实现底部导航栏创建,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,...
    99+
    2023-06-26
  • Flutter实现底部和顶部导航栏
    Flutter底部和顶部导航栏的实现,供大家参考,具体内容如下 带文字图标的底部导航栏(使用BottomNavigationBar和BottomNavigationBarItem)来...
    99+
    2024-04-02
  • Flutter实现顶部导航栏功能
    本文实例为大家分享了Flutter实现顶部导航栏的具体代码,供大家参考,具体内容如下 import 'package:flutter/material.dart'; class A...
    99+
    2024-04-02
  • flutter实现底部导航栏切换
    本文实例为大家分享了flutter实现底部导航栏切换的具体代码,供大家参考,具体内容如下 思路:MaterialApp是提供了bottomnavigationbar的,可以使用,这个...
    99+
    2024-04-02
  • flutter实现底部不规则导航栏
    本文实例为大家分享了flutter实现底部不规则导航栏的具体代码,供大家参考,具体内容如下 scafford的bottomNavigationBar参数赋值BottomAppBar可...
    99+
    2024-04-02
  • Flutter StreamBuilder实现局部刷新实例详解
    目录前言StreamBuilder 简介StreamBuilder的实际应用总结前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致...
    99+
    2024-04-02
  • JetPackCompose底部导航栏的实现方法详解
    目录1.声明导航栏数据源2.使用Scaffold搭建页面结构3.BottomNavigation的用法1.声明导航栏数据源 主要声明导航栏label和图标数组,这里使用的是本地数据,...
    99+
    2024-04-02
  • AndroidBottomNavigationView结合ViewPager实现底部导航栏步骤详解
    ViewPager2 介绍 ViewPager2 是基于 RecyclerView 重新编写的 ViewPager,比原有的 ViewPager 具有很多优势。 关于 ViewPag...
    99+
    2023-02-07
    Android BottomNavigationView底部导航栏 Android ViewPager底部导航栏
  • vue3容器布局和导航路由如何实现
    今天小编给大家分享一下vue3容器布局和导航路由如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。容器布局将App.vu...
    99+
    2023-07-02
  • AmazeUI导航如何实现
    小编给大家分享一下AmazeUI导航如何实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!AmazeUI导航的示例代码,具体如下:<!doctype&nbs...
    99+
    2023-06-09
  • css如何实现底部固定漂浮导航
    这篇文章主要为大家展示了“css如何实现底部固定漂浮导航”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何实现底部固定漂浮导航”这篇文章吧。 有 些东西...
    99+
    2024-04-02
  • 微信小程序如何实现tabBar底部导航
    这篇文章主要介绍微信小程序如何实现tabBar底部导航,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的...
    99+
    2024-04-02
  • weex slider如何实现滑动底部导航功能
    这篇文章将为大家详细讲解有关weex slider如何实现滑动底部导航功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先看效果图这里主要是使用了weex 的 slide...
    99+
    2024-04-02
  • 超详细教程实现Vue底部导航栏TabBar
    目录项目介绍:项目目录:TabBar效果预览:TabBar实现思路一、如果在下方有一个单独的TabBar组件,如何封装二、TabBar中现实的内容由外界决定。三、自定义TabBarI...
    99+
    2024-04-02
  • AmazeUI如何实现导航条
    这篇文章主要介绍AmazeUI如何实现导航条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!拥有易用的导航条对于任何网站都很重要。本文主要介绍了AmazeUI 导航条的实现示例,分享给大家,具体如下:<!doct...
    99+
    2023-06-09
  • CSS3如何实现导航栏
    小编给大家分享一下CSS3如何实现导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!上面是一个效果图,代码在下面:htmlXM...
    99+
    2024-04-02
  • Bootstrap中导航条和分页导航如何实现
    这篇文章主要介绍Bootstrap中导航条和分页导航如何实现,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 本篇文章带大家了解一下Bootstrap中的导...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作