Flutter GetPageRoute实现嵌套导航学习

目录
  • 1. 嵌套导航-GetPageRoute
  • 2. 自定义拓展
  • 3. 使用bottomNavigationBar
  • 4.小结

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

时间: 2022-08-11

Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果

如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态

flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)

如果我们有这样一个应用场景: WidgetA执行点击之后将数据通过widgetB传递到其下的widgetC. 通常可以通过设置构造函数,传递对应参数到制定的widget树中,如下面代码所描述: 表示需要将widgetA中的点击改变内容传递到widgetB中的widgetC中展示: 需要通过设置widgetB的构造函数,接收对应参数,再传递给widgetC展示: class Inheritedwidget extends StatefulWidget { @override _InheritedW

使用Java的方式模拟Flutter的Widget实现多层括号嵌套

我已经研究Flutter很长时间了.我就想既然Flutter用的Dart语言,而且括号又是嵌套多层,很多人都表示不是很理解,也不是很喜欢那么多层括号嵌套.其实完全不用担心,既然选择了它,就要接受它,当然是选择原谅它.废话少说,其实Java也是可以实现类似的语法的,下面带领大家作死的尝试一下使用Java模拟Flutter的Widget,欢迎各类开发人员前来观战. Flutter最重要的是 Widget ,首先我们来写一个类 Widget ,然后有一个 build 函数.如下所示: Tips: (我

Flutter底部不规则导航的实现过程

前言 本文主要介绍的是关于Flutter实现底部不规则导航的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 实现方法: 1.main.dart文件 import 'package:flutter/material.dart'; import 'bootom_appBar.dart'; void main () =>runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(B

flutter BottomAppBar实现不规则底部导航栏

本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 /** * 有状态StatefulWidget * 继承于 StatefulWidget,通过 State 的 build 方法去构建控件 */

如何在Flutter中嵌套Android布局

效果 本文具体demo效果如下 开发 1.首先创建flutter项目,在项目中定义好flutter需要展示布局: @override Widget build(BuildContext context) { return Scaffold( body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Expanded( child: Center( child: Text( 'Android按钮

Flutter中嵌入Android 原生TextView实例教程

前言 本篇文章 中写到的是 flutter 调用了Android 原生的 TextView 案例 添加原生组件的流程基本上可以描述为: 1 android 端实现原生组件PlatformView提供原生view 2 android 端创建PlatformViewFactory用于生成PlatformView 3 android 端创建FlutterPlugin用于注册原生组件 4 flutter 平台嵌入 原生view 1 创建原生组件 创建在fLutter工程时会生成几个文件夹,lib是放fl

探讨:如何在ScrollView中嵌套ListView

一.分析 1.最简单的布局:只有一个ListView 如果整个页面只有一个ListView的话,那么由于ListView本身带有滚动效果,所以当加载的数据超过页面显示的范围时,可以通过上下滑动来查看所有的item.因此这种情况下,不需要添加ScrollView. 2.其它布局A+ListView 这种情况下,如果布局A定义在ListView的前面,那么当布局A所占的比例较大,或者ListView加载的数据较多时,都会导致ListView显示不完全.同样,由于ListView自身可以滚动,因此仍然

Android开发实现ScrollView中嵌套两个ListView的方法

本文实例讲述了Android开发实现ScrollView中嵌套两个ListView的方法.分享给大家供大家参考,具体如下: 做的项目中要使用两个ListView在同一个页面上下显示,因为数据源不同,不能通过在Adapter中设置标志位去区分显示,最后只能硬着头皮做一个ScrollView嵌套两个ListView,但按正常情况是不能同时显示的,会出现上面的ListView完全显示,下面的只显示一个Item,查了一些资料终于成功了 主要有一个ListViewUtility ,代码如下: import

Android中ListView Item布局优化技巧

本文实例讲述了Android中ListView Item布局优化技巧.分享给大家供大家参考,具体如下: 之前一直都不知道ListView有多种布局的优化方法,只能通过隐藏来实现,自己也知道效率肯定是很低的,但是也不知道有什么方法,这些天又查了一些资料,然后知道 其实google早就帮我们想好了优化方案了. 假设你的ListView Item有三种布局样式的可能:就比如很简单的显示一行字,要靠左,居中,靠右. 这时我们就可以在BaseAdapter里面重写两个方法: private static

Android笔记之:在ScrollView中嵌套ListView的方法

前几天因为项目的需要,要在一个ListView中放入另一个ListView,也即在一个ListView的每个ListItem中放入另外一个ListView.但刚开始的时候,会发现放入的小ListView会显示不完全,它的高度始终有问题.上网查了下,发现别人也有遇到这样的问题,而大多数人都不推荐这样的设计,因为默认情况下Android是禁止在ScrollView中放入另外的ScrollView的,它的高度是无法计算的. 又搜索了一下,发现有StackOverflow上的牛人已经解决了这个问题,经过

Android ListView的item中嵌套ScrollView的解决办法

前沿:有时候,listview 的item要显示的字段比较多,考虑到显示问题,item外面不得不嵌套ScrollView来实现,于是问题来了,当listview需要做点击事件时,由于ScrollView的嵌套使用,拦截了listvew点击事件:只好重写listview来实现了. /** * * @author 作者:易皇星 * * @da2016年10月24日 时间: * * @toTODO 类描述: 解决 ListView中嵌套ScrollView,ScrollView拦截ListView的I

Android中的LinearLayout布局

LinearLayout : 线性布局 在一般情况下,当有很多控件需要在一个界面列出来时,我们就可以使用线性布局(LinearLayout)了,  线性布局是按照垂直方向(vertical)或水平方向(horizontal)的顺序依次排序子元素,每一个子元素都位于前一个元素之后,下面我们就简单的了解一下吧 在XML布局文件中会遇到如下一些单位 px:是屏幕的像素点   dp:一个基于density的抽象单位,屏幕的物理尺寸   sp:同dp相似,但会根据用户的字体大小进行缩放 XML代码如下:改

Android 布局中的android:onClick的使用方法总结

Android 布局中的android:onClick的使用方法总结 Android布局中的 android:onClick="..."属性设置点击时从上下文中调用指定的方法.该属性值和要调用的方法名称完全一致.一般在Activity定义符合如下参数和返回值的函数并将方法名字符串指定为该属性值即可: public void onClickButton(View view) android:onClick="onClickButton" 功能类似于Button的监听器

基于android布局中的常用占位符介绍

大家在做布局文件是肯定会遇到过下面的这种情况 填充出现问题,所以需要用到占位符规范填充 汉字常用占位符: <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是测试:" android:textSize="22sp" /> <TextView android:layo

Android布局案例之人人android九宫格

人人android是人人网推出的一款优秀的手机应用软件,我们在使用的时候发现他的首页布局是九宫格模式的,让人觉得很别致,因为现在很多的 android软件很少使用这种布局模式,人人android使用的很成功,使人觉得简洁大方美观,下面我们来看看人人android的布局 其实这种布局是使用了一种叫"GridView"的表格布局,下面我来给大家讲一下: 首先,请大家理解一下"迭代显示"这个概念,这个好比布局嵌套,我们在一个大布局里面重复的放入一些布局相同的小布局,那些重