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嵌套导航的资料请关注脚本之家其它相关文章!

相关文章

  • Objective-C的UIStackView常用属性函数学习笔记

    Objective-C的UIStackView常用属性函数学习笔记

    这篇文章主要为大家介绍了Objective-C的UIStackView常用属性函数学习笔记,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • iOS(闭包)block传值详解

    iOS(闭包)block传值详解

    这篇文章主要介绍了iOS(闭包)block传值的相关知识以及代码分享,对此有兴趣的朋友可以学习下。
    2018-02-02
  • iOS实现动态自适应标签

    iOS实现动态自适应标签

    这篇文章主要为大家详细介绍了iOS动态自适应标签的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Unity移动端的复制要这么写示例代码

    Unity移动端的复制要这么写示例代码

    这篇文章主要给大家介绍了关于Unity移动端的复制的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-08-08
  • iOS 自定义返回按钮保留系统滑动返回功能

    iOS 自定义返回按钮保留系统滑动返回功能

    这篇文章主要介绍了iOS 自定义返回按钮,保留系统滑动返回功能,实现方法非常简单,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • searchDisplayController 引起的数组越界处理办法

    searchDisplayController 引起的数组越界处理办法

    这篇文章主要介绍了searchDisplayController 引起的数组越界处理办法,需要的朋友可以参考下
    2015-07-07
  • iOS 加载Bundle文件的实例代码

    iOS 加载Bundle文件的实例代码

    这篇文章主要介绍了iOS 加载Bundle文件的实例代码,代码简单易懂,非常不错,需要的朋友参考下
    2016-12-12
  • IOS中的target action控件的实现

    IOS中的target action控件的实现

    这篇文章主要介绍了IOS中的target action控件的实现的相关资料,这里提供实现target action的简单实例帮助大家学习理解该如何实现,需要的朋友可以参考下
    2017-08-08
  • 快速解决iOS10不能跳转系统WiFi列表的问题

    快速解决iOS10不能跳转系统WiFi列表的问题

    下面小编就为大家带来一篇快速解决iOS10不能跳转系统WiFi列表的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • iOS中字符串换行的实现方法

    iOS中字符串换行的实现方法

    大家应该都有所体会,单行字符数过多会影响美观,所以下面这篇文章主要给大家介绍了关于iOS中字符串换行的实现方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2018-07-07

最新评论