flutter 五：MaterialApp

2024-01-05 19:28
文章标签 flutter materialapp

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/573912。

相关文章

Flutter打包APK的几种方式小结

Flutter打包APK的几种方式小结

《Flutter打包APK的几种方式小结》Flutter打包不同于RN,Flutter可以在AndroidStudio里编写Flutter代码并最终打包为APK,本篇主要阐述涉及到的几种打包方式,通... 目录前言1. android原生打包APK方式2. Flutter通过原生工程打包方式3. Futte
阅读更多...
Flutter监听当前页面可见与隐藏状态的代码详解

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态，也可以监听当http://www.cppcn
阅读更多...
四种Flutter子页面向父组件传递数据的方法介绍

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1：使用 GlobalKey 和 State 调用子组件方法方法 2：通过回调函数（Callb
阅读更多...
鸿蒙开发搭建flutter适配的开发环境

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web，通过发布到GitHu
阅读更多...
Flutter 中的低功耗蓝牙概述

Flutter 中的低功耗蓝牙概述

随着智能设备数量的增加，控制这些设备的需求也在增加。对于多种使用情况，期望设备在需要进行控制的同时连接到互联网会受到很大限制，因此是不可行的。在这些情况下，使用低功耗蓝牙（也称为 Bluetooth LE 或 BLE）似乎是最佳选择，因为它功耗低，在我们的手机中无处不在，而且无需连接到更广泛的网络。因此，蓝牙应用程序的需求也在不断增长。 通过阅读本文，您将了解如何开始在 Flutter 中开
阅读更多...
flutter开发多端平台应用的探索 下 （跨模块、跨语言通信之平台通道）

flutter开发多端平台应用的探索 下 （跨模块、跨语言通信之平台通道）

前文 Flutter 是一个跨平台的开发框架，它允许开发者使用相同的代码库来构建 iOS、Android、Web 和桌面应用程序。 上文flutter开发多端平台应用的探索 上（基本操作）-CSDN博客列举了一些特定平台的case（桌面端菜单，鼠标快捷键）的使用方法，有些是flutter提供了对应能力，只需要学习如何调API，有些事三方库支持，本文要探讨的平台通道是更为强大的工具，很多三方插件
阅读更多...
Flutter-使用dio插件请求网络（get ,post,下载文件）

Flutter-使用dio插件请求网络（get ,post,下载文件）

引入库：dio: ^2.1.13可直接运行的代码：包含了post，get 下载文件import 'package:flutter/material.dart';import 'package:dio/dio.dart';void main() {runApp(new MaterialApp(title: 'Container demo',home: new visitNetPage(),)
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2