目 录CONTENT

文章目录

Flutter 容器控件篇-->MaterialApp

俊阳IT知识库
2023-02-23 / 0 评论 / 0 点赞 / 534 阅读 / 2,752 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903956234141704
欢迎访问😃,有任何问题都可留言评论哦~

Flutter 控件中的 MaterialApp 作为App的顶层主页入口,一般是用来配置主题、语言、页面跳转等…

MaterialApp属性

参数 类型
navigatorKey(导航键) GlobalKey
home(主页) Widget
routes(路由) Map<String, WidgetBuilder>
initialRoute(初始路由) String
onGenerateRoute(生成路由) RouteFactory
onUnknownRoute(未知路由) RouteFactory
navigatorObservers(导航观察器) List
builder(建造者) TransitionBuilder
title(标题) String
onGenerateTitle(生成标题) GenerateAppTitle
color(颜色) Color
theme(主题) ThemeData
locale(地点) Locale
localizationsDelegates(本地化委托) Iterable<LocalizationsDelegate>
localeResolutionCallback(区域分辨回调) LocaleResolutionCallback
supportedLocales(支持区域) Iterable
debugShowMaterialGrid(调试显示材质网格) bool
showPerformanceOverlay(显示性能叠加) bool
checkerboardRasterCacheImages(棋盘格光栅缓存图像) bool
checkerboardOffscreenLayers(棋盘格层) bool
showSemanticsDebugger(显示语义调试器) bool
debugShowCheckedModeBanner(调试显示检查模式横幅) bool

源码示例

构造函数如下:

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.darkTheme,
    this.locale,
    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,
})

属性解释

1.navigatorKey

navigatorKey.currentState 相当于 Navigator.of(context)

使用:

GlobalKey<NavigatorState> _navigatorKey=new GlobalKey();

new MaterialApp(
  navigatorKey: _navigatorKey,
);

2.home

进入程序后显示的第一个页面,传入的是一个Widget,但实际上这个Widget需要包裹一个Scaffold以显示该程序使用Material Design风格

使用:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}
//这是一个可改变的Widget
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('Title'),
      ),
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

3.routes

声明程序中有哪个通过Navigation.of(context).pushNamed跳转的路由
参数以键值对的形式传递 key:路由名字 value:对应的Widget

使用:

new MaterialApp(
  routes: {
   '/home':(BuildContext context) => HomePage(),
   '/home/one':(BuildContext context) => OnePage(),
    //....
  },
);

4.initialRoute

初始路由,当用户进入程序时,自动打开对应的路由。

使用:

new MaterialApp(
  routes: {
   '/home':(BuildContext context) => HomePage(),
   '/home/one':(BuildContext context) => OnePage(),
   //....
  },
  initialRoute: '/home/one',
);

5.onGenerateRoute

当通过Navigation.of(context).pushNamed跳转路由时, 在routes查找不到时,会调用该方法

使用:

new MaterialApp(
  routes: {
   '/home':(BuildContext context) => HomePage(),
   '/home/one':(BuildContext context) => OnePage(),
   //....
  },
  onGenerateRoute: (setting){
	//setting.isInitialRoute; bool类型 是否初始路由
	//setting.name; 要跳转的路由名key
	return new PageRouteBuilder(
		pageBuilder: (BuildContext context, _, __) {
	//这里为返回的Widget
		  return HomePage();
		},
		opaque: false,
	//跳转动画
		transitionDuration: new Duration(milliseconds: 200),
		transitionsBuilder:
			(___, Animation<double> animation, ____, Widget child) {
		  return new FadeTransition(
			opacity: animation,
			child: new ScaleTransition(
			  scale: new Tween<double>(begin: 0.5, end: 1.0)
				  .animate(animation),
			  child: child,
			),
		  );
		});
  }
);

6.onUnknownRoute

效果跟onGenerateRoute一样 调用顺序为onGenerateRoute --> onUnknownRoute

7.navigatorObservers

路由观察器,当调用Navigator的相关方法时,会回调相关的操作

使用:

new MaterialApp(
      navigatorObservers: [
        MyObserver(),
      ],
    );
//继承NavigatorObserver
class MyObserver extends NavigatorObserver{
  @override
  void didPush(Route route, Route previousRoute) {
    // 当调用Navigator.push时回调
    super.didPush(route, previousRoute);
    //可通过route.settings获取路由相关内容
    //route.currentResult获取返回内容
    //....等等
    print(route.settings.name);
  }
}

8.builder

当构建一个Widget前调用 一般做字体大小,方向,主题颜色等配置

使用:

new MaterialApp(
  builder: (BuildContext context, Widget child) {
	return MediaQuery(
	  data: MediaQuery.of(context).copyWith(
		//字体大小
			textScaleFactor: 1.4,
		  ),
	  child: child,
	);
  },
);

9.title

该标题出现在 :

  • Android:任务管理器的程序快照之上
  • IOS: 程序切换管理器中

使用:

new MaterialApp(
  title: 'Flutter应用',
);

10.onGenerateTitle

跟上面的tiitle一样,但含有一个context参数 用于做本地化

使用:

new MaterialApp(
  onGenerateTitle: (context){
	return 'Flutter应用';
  },
);

11.color

该颜色为Android中程序切换中应用图标背景的颜色

使用:

new MaterialApp(
  color: Colors.blue,
)

12.theme

应用程序的主题,各种的定制颜色都可以设置,用于程序主题切换

使用:

new MaterialApp(
  theme: new ThemeData(
   //主题色
	primarySwatch: Colors.blue,
  ),
);

13.locale

当前区域,如果为null则使用系统区域 一般用于语言切换

使用:

//传入两个参数,语言代码,国家代码
new MaterialApp(
      Locale('yy','zh'),
    );
//源码纠正,一些曾经用过的代码(注释后面的日期为不再使用的日期),源码会自动纠正
//来看一下源码
//languageCode 第一个参数
switch (languageCode) {
      case 'in': return 'id'; // Indonesian; deprecated 1989-01-01
      case 'iw': return 'he'; // Hebrew; deprecated 1989-01-01
      case 'ji': return 'yi'; // Yiddish; deprecated 1989-01-01
      case 'jw': return 'jv'; // Javanese; deprecated 2001-08-13
      case 'mo': return 'ro'; // Moldavian, Moldovan; deprecated 2008-11-22
      case 'aam': return 'aas'; // Aramanik; deprecated 2015-02-12
      case 'adp': return 'dz'; // Adap; deprecated 2015-02-12
      case 'aue': return 'ktz'; // =/Kx'au//'ein; deprecated 2015-02-12
      case 'ayx': return 'nun'; // Ayi (China); deprecated 2011-08-16
      case 'bgm': return 'bcg'; // Baga Mboteni; deprecated 2016-05-30
      case 'bjd': return 'drl'; // Bandjigali; deprecated 2012-08-12
      case 'ccq': return 'rki'; // Chaungtha; deprecated 2012-08-12
      case 'cjr': return 'mom'; // Chorotega; deprecated 2010-03-11
      case 'cka': return 'cmr'; // Khumi Awa Chin; deprecated 2012-08-12
      case 'cmk': return 'xch'; // Chimakum; deprecated 2010-03-11
      case 'coy': return 'pij'; // Coyaima; deprecated 2016-05-30
      case 'cqu': return 'quh'; // Chilean Quechua; deprecated 2016-05-30
      case 'drh': return 'khk'; // Darkhat; deprecated 2010-03-11
      case 'drw': return 'prs'; // Darwazi; deprecated 2010-03-11
      case 'gav': return 'dev'; // Gabutamon; deprecated 2010-03-11
      case 'gfx': return 'vaj'; // Mangetti Dune !Xung; deprecated 2015-02-12
      case 'ggn': return 'gvr'; // Eastern Gurung; deprecated 2016-05-30
      case 'gti': return 'nyc'; // Gbati-ri; deprecated 2015-02-12
      case 'guv': return 'duz'; // Gey; deprecated 2016-05-30
      case 'hrr': return 'jal'; // Horuru; deprecated 2012-08-12
      case 'ibi': return 'opa'; // Ibilo; deprecated 2012-08-12
      case 'ilw': return 'gal'; // Talur; deprecated 2013-09-10
      case 'jeg': return 'oyb'; // Jeng; deprecated 2017-02-23
      case 'kgc': return 'tdf'; // Kasseng; deprecated 2016-05-30
      case 'kgh': return 'kml'; // Upper Tanudan Kalinga; deprecated 2012-08-12
      case 'koj': return 'kwv'; // Sara Dunjo; deprecated 2015-02-12
      case 'krm': return 'bmf'; // Krim; deprecated 2017-02-23
      case 'ktr': return 'dtp'; // Kota Marudu Tinagas; deprecated 2016-05-30
      case 'kvs': return 'gdj'; // Kunggara; deprecated 2016-05-30
      case 'kwq': return 'yam'; // Kwak; deprecated 2015-02-12
      case 'kxe': return 'tvd'; // Kakihum; deprecated 2015-02-12
      case 'kzj': return 'dtp'; // Coastal Kadazan; deprecated 2016-05-30
      case 'kzt': return 'dtp'; // Tambunan Dusun; deprecated 2016-05-30
      case 'lii': return 'raq'; // Lingkhim; deprecated 2015-02-12
      case 'lmm': return 'rmx'; // Lamam; deprecated 2014-02-28
      case 'meg': return 'cir'; // Mea; deprecated 2013-09-10
      case 'mst': return 'mry'; // Cataelano Mandaya; deprecated 2010-03-11
      case 'mwj': return 'vaj'; // Maligo; deprecated 2015-02-12
      case 'myt': return 'mry'; // Sangab Mandaya; deprecated 2010-03-11
      case 'nad': return 'xny'; // Nijadali; deprecated 2016-05-30
      case 'nnx': return 'ngv'; // Ngong; deprecated 2015-02-12
      case 'nts': return 'pij'; // Natagaimas; deprecated 2016-05-30
      case 'oun': return 'vaj'; // !O!ung; deprecated 2015-02-12
      case 'pcr': return 'adx'; // Panang; deprecated 2013-09-10
      case 'pmc': return 'huw'; // Palumata; deprecated 2016-05-30
      case 'pmu': return 'phr'; // Mirpur Panjabi; deprecated 2015-02-12
      case 'ppa': return 'bfy'; // Pao; deprecated 2016-05-30
      case 'ppr': return 'lcq'; // Piru; deprecated 2013-09-10
      case 'pry': return 'prt'; // Pray 3; deprecated 2016-05-30
      case 'puz': return 'pub'; // Purum Naga; deprecated 2014-02-28
      case 'sca': return 'hle'; // Sansu; deprecated 2012-08-12
      case 'skk': return 'oyb'; // Sok; deprecated 2017-02-23
      case 'tdu': return 'dtp'; // Tempasuk Dusun; deprecated 2016-05-30
      case 'thc': return 'tpo'; // Tai Hang Tong; deprecated 2016-05-30
      case 'thx': return 'oyb'; // The; deprecated 2015-02-12
      case 'tie': return 'ras'; // Tingal; deprecated 2011-08-16
      case 'tkk': return 'twm'; // Takpa; deprecated 2011-08-16
      case 'tlw': return 'weo'; // South Wemale; deprecated 2012-08-12
      case 'tmp': return 'tyj'; // Tai Mène; deprecated 2016-05-30
      case 'tne': return 'kak'; // Tinoc Kallahan; deprecated 2016-05-30
      case 'tnf': return 'prs'; // Tangshewi; deprecated 2010-03-11
      case 'tsf': return 'taj'; // Southwestern Tamang; deprecated 2015-02-12
      case 'uok': return 'ema'; // Uokha; deprecated 2015-02-12
      case 'xba': return 'cax'; // Kamba (Brazil); deprecated 2016-05-30
      case 'xia': return 'acn'; // Xiandao; deprecated 2013-09-10
      case 'xkh': return 'waw'; // Karahawyana; deprecated 2016-05-30
      case 'xsj': return 'suj'; // Subi; deprecated 2015-02-12
      case 'ybd': return 'rki'; // Yangbye; deprecated 2012-08-12
      case 'yma': return 'lrr'; // Yamphe; deprecated 2012-08-12
      case 'ymt': return 'mtm'; // Mator-Taygi-Karagas; deprecated 2015-02-12
      case 'yos': return 'zom'; // Yos; deprecated 2013-09-10
      case 'yuu': return 'yug'; // Yugh; deprecated 2014-02-28
      default: return languageCode;
    }

//_countryCode 第二个参数
switch (_countryCode) {
  case 'BU': return 'MM'; // Burma; deprecated 1989-12-05
  case 'DD': return 'DE'; // German Democratic Republic; deprecated 1990-10-30
  case 'FX': return 'FR'; // Metropolitan France; deprecated 1997-07-14
  case 'TP': return 'TL'; // East Timor; deprecated 2002-05-20
  case 'YD': return 'YE'; // Democratic Yemen; deprecated 1990-08-14
  case 'ZR': return 'CD'; // Zaire; deprecated 1997-07-14
  default: return regionCode;
} 

14.localizationsDelegates

本地化委托,用于更改Flutter Widget默认的提示语,按钮text

使用:

new MaterialApp(
      localizationsDelegates: [
          MyLocalizationsDelegates(),
      ],
      locale: Locale('zh','cn'),
    );

class MyLocalizationsDelegates extends LocalizationsDelegate
<MaterialLocalizations>{
  @override
  bool isSupported(Locale locale) {
//是否支持该locale,如果不支持会报异常
    if(locale == const Locale('zh','cn')){
      return true;
    }
    return false;
  }
  @override//是否需要重载
  bool shouldReload(LocalizationsDelegate old)  => false;

  @override
  Future<MaterialLocalizations> load(Locale locale) {
//加载本地化
    return new SynchronousFuture(new MyLocalizations(locale));
  }
}
//本地化实现,继承DefaultMaterialLocalizations
class MyLocalizations extends DefaultMaterialLocalizations{
  final Locale locale;
  MyLocalizations(this.locale, );
  @override
  String get okButtonLabel {
    if(locale == const Locale('zh','cn')){
      return '好的';
    }else{
      return super.okButtonLabel;
    }
  }
  @override
  String get backButtonTooltip {
    if(locale == const Locale('zh','cn')){
      return '返回';
    }else{
      return super.okButtonLabel;
    }
  }
}

15.localeResolutionCallback

当传入的是不支持的语种,可以根据这个回调,返回相近,并且支持的语种

使用:

new MaterialApp(
  localeResolutionCallback: (local,support){
	if(support.contains(support)){
	  print('support');
	  return local;
	}
	print('no_support');
	return const Locale('us','uk');
  },
  locale: Locale('zh-Hans','zh-Hant'),
);

16.supportedLocales

传入支持的语种数组

new MaterialApp(
  supportedLocales: [
	const Locale('uok'),
	const Locale('meg'),
  ],
);

17.debugShowMaterialGrid

debug模式下是否显示材质网格,传入bool类型,一般不适用

18.showPerformanceOverlay

当为true时应用程序顶部覆盖一层GPUUI曲线图,可即时查看当前流畅度情况

19.checkerboardRasterCacheImages

当为true时,打开光栅缓存图像的棋盘格

20.checkerboardOffscreenLayers

当为true时,打开呈现到屏幕位图的层的棋盘格

21.showSemanticsDebugger

当为true时,打开Widget边框,类似Android开发者模式中显示布局边界

22.debugShowCheckedModeBanner

当为true时,在debug模式下显示右上角的debug字样的横幅,false即为不显示


+_+

0

评论区