Flutter GetPageRoute实现嵌套导航学习

 更新时间:2022年08月11日 15:22:46   作者:潜水的鱼儿  
这篇文章主要为大家介绍了Flutter GetPageRoute实现嵌套导航的示例学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1. 嵌套导航-GetPageRoute

本文主要介绍在Getx下快速实现一个嵌套导航

嵌套导航顾名思义,我们导航页面中嵌套一个独立的路由,效果如下

点击跳转

代码如下,也是比较简单

return Scaffold(
  appBar: AppBar(title: const Text('嵌套导航'),),
  body: Navigator(
      key: Get.nestedKey(1), // create a key by index
      initialRoute: '/',
      onGenerateRoute: (settings) {
        if (settings.name == '/') {
          return GetPageRoute(
            page: () => Scaffold(
              appBar: AppBar(
                title: const Text("首页"), backgroundColor: Colors.blue
              ),
              body: Center(
                child: ElevatedButton(
                  onPressed: () {
                    Get.toNamed('/second', id:1); // navigate by your nested route by index
                  },
                  child: const Text("跳转下一页"),
                ),
              ),
            ),
          );
        } else if (settings.name == '/second') {
          return GetPageRoute(
            page: () => Center(
              child: Scaffold(
                appBar: AppBar(
                  title: const Text("第二页"),backgroundColor: Colors.blue
                ),
                body: const Center(
                    child:  Text("第二页")
                ),
              ),
            ),
          );
        }
      }
  ),
);

通过Navigator这个widget把我们的路由放入新的导航中,通过onGenerateRoute来区分页面的路由跳转,key使用的是Get.nestedKey(1)来区分具体页面。GetPageRoute创建路由页面

2. 自定义拓展

我们也可以添加占位图,用于存放一些广告页

 Column(
  children: [
    Container(
      color: Colors.amberAccent,
      height: 100,
      child: const Center(child: Text('我是轮播图')),
    ),
    Expanded(
      child: Navigator())]

这里使用Column进行包裹,Expanded撑开下部分。

3. 使用bottomNavigationBar

class NestedNavigatePage extends StatelessWidget {
  const NestedNavigatePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final logic = Get.find<NestedNavigateLogic>();
    final state = Get.find<NestedNavigateLogic>().state;
    return Scaffold(
      appBar: AppBar(title: const Text('嵌套导航'),),
      body: Column(
        children: [
          Container(
            color: Colors.amberAccent,
            height: 100,
            child: const Center(child: Text('我是轮播图')),
          ),
          Expanded(
            child: Navigator(
                key: Get.nestedKey(1), // create a key by index
                initialRoute: '/home',
                onGenerateRoute: logic.onGenerateRoute,
            ),
          ),
        ],
      ),
      bottomNavigationBar:Obx(() => BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.list),label: '列表'),
          BottomNavigationBarItem(icon: Icon(Icons.people),label:'我的'),
        ],
        currentIndex: state.selectIndex.value,
        onTap: logic.selectTabBarIndex,
        selectedItemColor: Colors.red,
      )),
    );
  }
}
  • state 中定义数据
class NestedNavigateState {
 var selectIndex = 0.obs;
 List<String> pages = ['/home','/list','/mine'];
  NestedNavigateState() {
    ///Initialize variables
  }
}
  • logic 中实现逻辑
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'nested_navigate_state.dart';
class NestedNavigateLogic extends GetxController {
  final NestedNavigateState state = NestedNavigateState();
  selectTabBarIndex( int index){
    state.selectIndex.value = index;
    Get.toNamed(state.pages[index],id: 1);
  }
  Route? onGenerateRoute(RouteSettings settings) {
    return GetPageRoute(
      settings: settings,
      page: () => page(settings.name!),
      transition: Transition.leftToRightWithFade,
    );
  }
  Widget page(String title) {
   return Center(
        child: Scaffold(
            // appBar: AppBar(
            //     title:  Text(title), backgroundColor: Colors.blue
            // ),
            body: Center(
                child: Text(title)
            )
        ));
  }
}

点击通过obx自动响应

4.小结

我们通过GetPageRoute可以进行导航嵌套,方便我们实现一些特定需求。同时我们可以配合bottomNavigationBar实现tabbr效果。 创建平行导航堆栈可能是危险的。

理想的情况是不要使用NestedNavigators,或者尽量少用。如果你的项目需要它,请继续,但请记住,在内存中保持多个导航堆栈可能不是一个好主意。

以上就是Flutter GetPageRoute实现嵌套导航学习的详细内容,更多关于Flutter GetPageRoute嵌套导航的资料请关注脚本之家其它相关文章!

相关文章

  • IOS CoreLocation实现系统自带定位的方法

    IOS CoreLocation实现系统自带定位的方法

    本篇文章主要介绍了IOS Core Location实现系统自带定位的方法,非常具有实用价值,需要的朋友可以参考下。
    2017-02-02
  • iOS App中实现播放音效和音乐功能的简单示例

    iOS App中实现播放音效和音乐功能的简单示例

    这篇文章主要介绍了iOS App中实现播放音效和音乐功能的简单示例,示例代码为传统的Objective-C,需要的朋友可以参考下
    2016-03-03
  • IOS开发中使用UIFont设置字体及批量创建控件

    IOS开发中使用UIFont设置字体及批量创建控件

    这篇文章主要介绍了IOS开发中使用UIFont设置字体及批量创建控件的方法,内容很实用,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • iOS通过shell脚本批量修改属性

    iOS通过shell脚本批量修改属性

    这篇文章主要给大家分享了iOS通过shell脚本批量修改属性的相关知识点,希望我们整理的内容能够帮助到大家。
    2018-03-03
  • IOS 开发之UITableView 删除表格单元写法

    IOS 开发之UITableView 删除表格单元写法

    这篇文章主要介绍了IOS 开发之UITableView 删除表格单元写法的相关资料,这里提供实例帮助大家实现该功能,希望能帮助到大家,需要的朋友可以参考下
    2017-08-08
  • IOS开发笔记整理49之详解定位CLLocation

    IOS开发笔记整理49之详解定位CLLocation

    在项目功能中有一个定位CLLocation的需求,遇到了一些知识难点,经过各位大侠的帮助,问题解决,特此分享供大家学习,希望大家共同学习进步
    2015-11-11
  • iOS 实现简单的加载等待动画示例(思路与实现)

    iOS 实现简单的加载等待动画示例(思路与实现)

    本篇文章主要介绍了iOS 实现简单的加载等待动画示例(思路与实现),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • IOS面试大全之常见算法

    IOS面试大全之常见算法

    之前看了很多面试题,感觉要不是不够就是过于冗余,于是我将网上的一些面试题进行了删减和分类,这篇文章先给大家分享一下IOS中的常见算法,有需要的可以参考借鉴。
    2016-09-09
  • iOS如何获取最顶层ViewController详解

    iOS如何获取最顶层ViewController详解

    这篇文章主要给大家介绍了关于iOS如何获取最顶层ViewController的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • iOS开发之手势识别实例

    iOS开发之手势识别实例

    本篇文章主要介绍了iOS开发之手势识别实例,具有一定的参考价值,有需要的可以了解一下。
    2016-11-11

最新评论