flutter：如何实现局部导航管理？

引言

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

局部导航是什么？

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

下面，小编用 dialog 的方式来分享实现过程。

如何实现？

1. 创建工具类，用于局部导航管理，思想是：将需要单独进行堆栈管理的页面使用新的子级 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;
          },
        );
      },
    );
  }
}

2. 封装弹窗方法，在 showDialog 时使用 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),
          ),
        );
      },
    );
  }

3. 上图 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.of(context) 中的 rootNavigator 可选入参，默认是不使用根节点下的 navigator。

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

2. 如何接收页面关闭时回传的数据？

• 关闭时通过 pop() 方法进行数据回传
  Navigator.of(context).pop(data)
• 接收回传数据，在打开新堆栈的代码中接收

Navigator.push<String?>(
      context,
      MaterialPageRoute(
        builder: (context) => const _PageB(),
      ),
    ).then(
      (data) {
        if (data != null) {
          //接收来自 pageB 的回调数据
          Fluttertoast.showToast(msg: 'pageA 接收数据：$data');
        }
      },
    );