关于flutter:flutter系列之创建一个内嵌的navigation

简介

咱们在flutter中能够应用Navigator.push或者Navigator.pushNamed办法来向Navigator中增加不同的页面,从而达到页面调整的目标。

个别状况下这样曾经足够了,然而有时候咱们有多个Navigator的状况下,下面的应用形式就不够用了。比方咱们有一个主页面app的Navigator,而后外面有一个匹配好友的性能,这个性能有多个页面,因为匹配好友性能的多个页面实际上是一个残缺的流程,所以这些页面须要被放在一个子Navigator中,并和主Navigator辨别开。

那么应该如何解决呢?

搭建主Navigator

主Navigator是咱们app的一些次要界面,这里咱们有三个界面,别离是主home界面,一个setting配置界面和好友匹配界面。

其中好友匹配界面蕴含了三个子界面,这三个子界面将会用到子路由。

先来看下主路由,主路由的状况跟一般的路由没啥区别,这里咱们首先定义和home和setting匹配的两个widget:HomePage和SettingsPage:

class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(context),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              SizedBox(
                width: 250,
                height: 250,
                child: Center(
                  child: Icon(
                    Icons.home,
                    size: 175,
                    color: Colors.blue,
                  ),
                ),
              ),
              SizedBox(height: 32),
              Text(
                '跳转到好友匹配页面',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).pushNamed(routeFriendMatch);
        },
        child: const Icon(Icons.add),
      ),
    );
  }

HomePage很简略,它蕴含了一个floatingActionButton,当点击它的时候会调用 Navigator.pushNamed办法进行路由切换。

而后是SettingsPage,它是一个简略的Column:

class SettingsPage extends StatelessWidget {
  const SettingsPage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: List.generate(8, (index) {
            return  ListTile(
              title: Text('设置项$index'),
            );
          }),
        ),
      ),
    );
  }

最初一个页面是FriendMatchFlow,这个页面比较复杂,咱们在下一个再进行解说。

而后咱们为主路由在onGenerateRoute办法中进行定义:

void main() {
  runApp(
    MaterialApp(
      onGenerateRoute: (settings) {
        late Widget page;
        if (settings.name == routeHome) {
          page = const HomePage();
        } else if (settings.name == routeSettings) {
          page = const SettingsPage();
        } else if (settings.name == routeFriendMatch) {
          page = const FriendMatchFlow(
            setupPageRoute: routeFriendMatchPage,
          );
        }

        return MaterialPageRoute<dynamic>(
          builder: (context) {
            return page;
          },
          settings: settings,
        );
      },
      debugShowCheckedModeBanner: false,
    ),
  );
}

主路由很简略,跟一般的路由没有太多的区别。

构建子路由

接下来是构建子路由的步骤。在主路由中,如果路由的名称是routeFriendMatch,那么就会跳转到FriendMatchFlow。

而这个flow页面实际上是由几个子页面组成的:抉择好友页面,期待页面,匹配页面和匹配结束页面。

具体的页面代码这里就不写了,咱们次要来讲一下子路由的应用。

对于FriendMatchFlow来说,它自身是一个Navigator,所以咱们的build办法是这样的:

  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _isExitDesired,
      child: Scaffold(
        appBar: _buildFlowAppBar(),
        body: Navigator(
          key: _navigatorKey,
          initialRoute: widget.setupPageRoute,
          onGenerateRoute: _onGenerateRoute,
        ),
      ),
    );
  }

因为他须要依据用户的不同点击来进行外部路由的切换,所以须要保留对以后子Navigator的利用,所以这里FriendMatchFlow是一个StatefulWidget,并且下面的_navigatorKey是一个GlobalKey对象,以提供对子Navigator的援用:

  final _navigatorKey = GlobalKey<NavigatorState>();

这里的_onGenerateRoute办法,跟主路由也是很相似的,次要定义的是子路由中页面的跳转:

  Route _onGenerateRoute(RouteSettings settings) {
    late Widget page;
    switch (settings.name) {
      case routeFriendMatchPage:
        page = WaitingPage(
          message: '匹配左近的好友...',
          onWaitComplete: _onDiscoveryComplete,
        );
        break;
      case routeFriendSelectPage:
        page = SelectFriendPage(
          onFriendSelected: _onFriendSelected,
        );
        break;
      case routeFriendConnectingPage:
        page = WaitingPage(
          message: '匹配中...',
          onWaitComplete: _onConnectionEstablished,
        );
        break;
      case routeFriendFinishedPage:
        page = FinishedPage(
          onFinishPressed: _exitSetup,
        );
        break;
    }

这里的on*Selected是VoidCallback回调,用来进行路由的切换:

  void _onDiscoveryComplete() {
    _navigatorKey.currentState!.pushNamed(routeFriendSelectPage);
  }

  void _onFriendSelected(String deviceId) {
    _navigatorKey.currentState!.pushNamed(routeFriendConnectingPage);
  }

  void _onConnectionEstablished() {
    _navigatorKey.currentState!.pushNamed(routeFriendFinishedPage);
  }

能够看到下面的路由切换实际上是在子路由上切换,跟父路由无关。

如果想要间接从子路由跳出到父路由该怎么解决呢?很简略,调用Navigator.of的pop办法即可:

  void _exitSetup() {
    Navigator.of(context).pop();
  }

这里的context默认是全局的context,所以会导致主路由的跳转变动。

总结

以上的代码运行后果如下:

尽管下面的例子看起来简单,然而大家只有记住了不同的路由应用不同的Navigator范畴进行跳转就行了。

本文的例子:https://github.com/ddean2009/learn-flutter.git

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据