flutter 五：MaterialApp

MaterialApp

 const MaterialApp({super.key,this.navigatorKey,   //导航键this.scaffoldMessengerKey,   //scaffold管理this.home,   //首页Map<String, WidgetBuilder> this.routes = const <String, WidgetBuilder>{},  //路由this.initialRoute,  //初始路由this.onGenerateRoute,  //路由生成器this.onGenerateInitialRoutes, //生成初始化路由this.onUnknownRoute,  //onGenerateRoute 无法生成路由时调用List<NavigatorObserver> this.navigatorObservers = const <NavigatorObserver>[],   //导航观察者this.builder,   //页面构建者this.title = '',  //标题this.onGenerateTitle, //不为空则调用此回调函数生成标题  为空则使用titlethis.color,  //主色this.theme,  //主题this.darkTheme,  //暗色主题this.highContrastTheme,  //高对比度 主题this.highContrastDarkTheme, //高对比度 暗色主题this.themeMode = ThemeMode.system,  //主题模式  默认跟随系统this.themeAnimationDuration = kThemeAnimationDuration, //主题动画时长this.themeAnimationCurve = Curves.linear,  //主题动画曲线this.locale,      //app语言支持this.localizationsDelegates,   //多语言代理this.localeListResolutionCallback,this.localeResolutionCallback, //监听系统语言切换事件this.supportedLocales = const <Locale>[Locale('en', 'US')],  //多语言支持this.debugShowMaterialGrid = false,   //显示网格this.showPerformanceOverlay = false,   //是否打开性能监控this.checkerboardRasterCacheImages = false,this.checkerboardOffscreenLayers = false,this.showSemanticsDebugger = false,   //打开一个覆盖图，显示框架报告的可访问性  显示边框this.debugShowCheckedModeBanner = true,  //右上角的 debug图标this.shortcuts,this.actions,this.restorationScopeId,this.scrollBehavior,@Deprecated('Remove this parameter as it is now ignored. ''MaterialApp never introduces its own MediaQuery; the View widget takes care of that. ''This feature was deprecated after v3.7.0-29.0.pre.')this.useInheritedMediaQuery = false,})

routes 配置路由跳转

routes 配置路由跳转页面
initialRoute 初始化显示路由页面

以下例子实现点击B跳转B页面点击C跳转C页面

import 'package:flutter/material.dart';void main() {     //程序入口runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),initialRoute: '/A',   //初始显示的页面routes: {   //配置页面路由"/A": (context) => A(),"/B": (context) => B(),"/C": (context) => C(),},);}
}class A extends StatefulWidget{@overrideState<StatefulWidget> createState() => AState();
}class AState extends State<A>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text("AAAAAAAAAAAAAAAAAAAAAAA"),TextButton(child: Text("jump to BBBB"),onPressed: _onPressedB,),TextButton(child: Text("jump to CCCC"),onPressed: _onPressedC,)],)),);}//点击跳转B_onPressedB(){//   Navigator.of(context).pushNamed('/B');Navigator.pushNamed(context, '/B');}
//点击跳转C_onPressedC(){// Navigator.of(context).pushNamed('/C');Navigator.pushNamed(context, '/C');}
}//页面A
class B extends StatefulWidget{@overrideState<StatefulWidget> createState() => BState();
}class BState extends State<B>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"),),);}
}//页面C
class C extends StatefulWidget{@overrideState<StatefulWidget> createState() => CState();
}class CState extends State<C>{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text("CCCCCCCCCCCCCCCCCCCCCCCCC"),),);}
}

结果：
请添加图片描述

navigatorKey

navigatorKey 可以获取context 从而在外部实现页面跳转

以下例子启动app5s后自动跳转到C页面

在MaterialApp 下添加navigatorKey 属性
并添加以下代码启动项目后5s自动跳转到C页面

GlobalKey<NavigatorState> _navigatorKey = GlobalKey();void main() {     //程序入口runApp(const MyApp());//5s后自动跳转到CFuture.delayed(Duration(seconds: 5)).then((value){var context = _navigatorKey.currentState?.overlay?.context; //也可以使用_navigatorKey.currentContext!Navigator.pushNamed(context!, "/C");});
}

运行结果请添加图片描述

scaffoldMessengerKey

管理scaffold 可以实现无context 显示SnackBar

MaterialApp 增加
scaffoldMessengerKey:_scaffoldMessengerKey,

GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey = GlobalKey();void main() {     //程序入口runApp(const MyApp());//5s后自动跳转到CFuture.delayed(Duration(seconds: 5)).then((value){_scaffoldMessengerKey.currentState?.showSnackBar(SnackBar(content: Text("wo li ge qu")));  //5S后显示SnackBar});}

请添加图片描述

home initialRoute

home 显示首页weight
initialRoute 显示初始化的页面
两个属性同时存在时都会执行 home优先执行且页面可以回退到home页

   home: B(),   //使用B页面   initialRoute: '/A',  //使用A页面

A B 页面构造函数打印页面信息
结果

B页面启动！
A页面启动！

只有home

     home: B(),// initialRoute: '/A',

结果

B页面启动！

只有initialRoute

// home: B(),initialRoute: '/A',

结果

A页面启动！

onGenerateRoute

页面跳转时如果找不到页面会执行该回调，返回一个RouteSettings
添加参数

  onGenerateRoute: _onGenerateRoute,

RouteFactory _onGenerateRoute = (settings){print(settings.name);print(settings.runtimeType);print(settings.arguments);
};

添加点击事件跳转到D routes中无 ‘/D’

在这里插入图片描述
结果且会报错

/D
RouteSettings
null======== Exception caught by gesture ===============================================================
The following assertion was thrown while handling a gesture:
Could not find a generator for route RouteSettings("/D", null) in the _WidgetsAppState.

onGenerateRoute可用于页面跳转错误时的纠错处理

RouteFactory _onGenerateRoute = (settings){print(settings.name);print(settings.runtimeType);print(settings.arguments);return MaterialPageRoute(builder: (context)=>C());   //返回要跳转的页面路由
};

结果

/D
RouteSettings
null
B页面启动！

onGenerateInitialRoutes

final InitialRouteListFactory? onGenerateInitialRoutes;
typedef InitialRouteListFactory = List<Route> Function(String initialRoute);
initialRoute 设置了，生成initialRoute时回调

 onGenerateInitialRoutes: (initialRoute){print("initialRoute>>${initialRoute}");return [MaterialPageRoute(builder: (context) => B()),MaterialPageRoute(builder: (context) => C()),MaterialPageRoute(builder: (context) => A()),];},

结果

initialRoute>>/A
B页面启动！
A页面启动！

请添加图片描述

onUnknownRoute

final RouteFactory? onUnknownRoute;
typedef RouteFactory = Route? Function(RouteSettings settings);
路由页面不存在时 onGenerateRoute 不返回指定路由页面时回调
作用基本与onGenerateRoute 的回调一样

在这里插入图片描述

onUnknownRoute: (settings){print("onUnknownRoute>>${settings.name}");print("onUnknownRoute>>${settings.runtimeType}");print("onUnknownRoute>>${settings.arguments}");},

结果

/D
RouteSettings
null
onUnknownRoute>>/D
onUnknownRoute>>RouteSettings
onUnknownRoute>>null
======== Exception caught by gesture ===============================================================
The following assertion was thrown while handling a gesture:
The onUnknownRoute callback returned null.

添加： return MaterialPageRoute(builder: (context)=>B()); 亦可跳转到Bye

navigatorObservers

List this.navigatorObservers = const [],
路由跳转监听


class _NavigatorObserver extends NavigatorObserver{@overridevoid didStartUserGesture(Route route, Route? previousRoute) {print("didStartUserGesture>>route:${route}  previousRoute:${previousRoute}");super.didStartUserGesture(route, previousRoute);}@overridevoid didPop(Route route, Route? previousRoute) {print("didPop>>route:${route}  previousRoute:${previousRoute}");super.didPop(route, previousRoute);}@overridevoid didPush(Route route, Route? previousRoute) {print("didPush>>route:${route}  previousRoute:${previousRoute}");super.didPush(route, previousRoute);}@overridevoid didRemove(Route route, Route? previousRoute) {print("didRemove>>route:${route}  previousRoute:${previousRoute}");super.didRemove(route, previousRoute);}@overridevoid didReplace({Route? newRoute, Route? oldRoute}) {print("didReplace>>newRoute:${newRoute}  oldRoute:${oldRoute}");super.didReplace(newRoute:newRoute, oldRoute:oldRoute);}@overridevoid didStopUserGesture() {print("didStopUserGesture>>");super.didStopUserGesture();}
}navigatorObservers: [_NavigatorObserver()],

结果

didPush>>route:MaterialPageRoute<dynamic>(RouteSettings("/A", null), animation: AnimationController#239da(⏭ 1.000; paused; for MaterialPageRoute<dynamic>(/A)))  previousRoute:null
A页面启动！//点击跳转B
didPush>>route:MaterialPageRoute<dynamic>(RouteSettings("/B", null), animation: AnimationController#d51ac(▶ 0.000; for MaterialPageRoute<dynamic>(/B)))  previousRoute:MaterialPageRoute<dynamic>(RouteSettings("/A", null), animation: AnimationController#239da(⏭ 1.000; paused; for MaterialPageRoute<dynamic>(/A)))
B页面启动！//返回A
didPop>>route:MaterialPageRoute<dynamic>(RouteSettings("/B", null), animation: AnimationController#d51ac(◀ 1.000; for MaterialPageRoute<dynamic>(/B)))  previousRoute:MaterialPageRoute<dynamic>(RouteSettings("/A", null), animation: AnimationController#239da(⏭ 1.000; paused; for MaterialPageRoute<dynamic>(/A)))

builder

页面构建着在Weight前调用
返回一个Weight 一般时参数 child的包装Wight
返回脚手架Scaffold 用于初始化一些基础配置比如字体大小主题色

 builder: (context,child){return child!;},

 builder: (context,child){return Scaffold(appBar: AppBar(title: Text("实例"),backgroundColor: Colors.green,),body: child,);},

在这里插入图片描述

title

title: 'Flutter',

在这里插入图片描述

     title: 'Hellow',

在这里插入图片描述

onGenerateTitle

final GenerateAppTitle? onGenerateTitle;
typedef GenerateAppTitle = String Function(BuildContext context);
重建页面时改函数回调例如重新运行程序

var pageChange = 1;onGenerateTitle: (context){pageChange++;return "页面重建${pageChange}";},

在这里插入图片描述

flutter 五：MaterialApp

MaterialApp

routes 配置路由跳转

以下例子实现点击B跳转B页面点击C跳转C页面

navigatorKey

以下例子启动app5s后自动跳转到C页面

scaffoldMessengerKey

home initialRoute

onGenerateRoute

onGenerateRoute可用于页面跳转错误时的纠错处理

onGenerateInitialRoutes

onUnknownRoute

navigatorObservers

builder

title

onGenerateTitle

相关文章

Oracle START WITH 递归语句的使用方法及示例

【SpringMVC】常用注解

Leetcode2966. 划分数组并满足最大差限制

专业实习day3、4（路由器做内网访问公网）

matplotlib 虚战1

科普小米手机、华为手机、红米手机、oppo手机、vivo手机、荣耀手机、一加手机、realme手机如何设置充电提示音

字节填充与0比特填充以及数据链路的基本问题

AntV-G6 -- 将G6图表应用到项目中

MySQL-约束

Wrk压测发送Post请求的正确姿势

多内层神经网络具有先天的不可解释性

数据结构学习 jz60 n个骰子的点数

uView NoticeBar 滚动通知

mysql函数和存储过程

【AI视野·今日Sound 声学论文速览第三十九期】Tue, 2 Jan 2024

Windows BAT脚本 | 定时关机程序

Vue入门一（前端发展史｜Vue介绍｜Vue插值语法｜Vue指令｜style与class使用｜条件渲染）

状态机（有限状态机（Finite State Machine, FSM）、推进自动机（Pushdown Automata）、并发状态机、分层状态机）

使用 dbgate 在 sealos 上完美管理 mysql pgsql 等数据库

excel统计分析——两因素无重复方差分析

flutter 五：MaterialApp

MaterialApp

routes 配置路由跳转

以下例子实现点击B跳转B页面 点击C跳转C页面

navigatorKey

以下例子 启动app5s后自动跳转到C页面

scaffoldMessengerKey

home initialRoute

onGenerateRoute

onGenerateRoute可用于页面跳转错误时的纠错处理

onGenerateInitialRoutes

onUnknownRoute

navigatorObservers

builder

title

onGenerateTitle

相关文章

以下例子实现点击B跳转B页面点击C跳转C页面

以下例子启动app5s后自动跳转到C页面