Flutter组件-Material属性

Material属性和说明

 MaterialApp封装了应用程序实现Material Design所需要的一些Widget,实际是一种设计风格,里面会有已有的一些组件(thmem).

常用的属性:

属性详解

1.navigatorKey

navigatorKey 相当于 Navigator.of(context) ，如果应用程序想实现无 context 跳转，那么可以通过设置该key, 通过 navigatorKey.currentState.overlay.context 获取全局context。

GlobalKey _navigatorKey = GlobalKey();
 
MaterialApp(
  navigatorKey: _navigatorKey,
);

2.scaffoldMessengerKey

scaffoldMessengerKey 主要是管理后代的 Scaffolds，可以实现无 context 调用 snack bars

GlobalKey _scaffoldKey = GlobalKey();
 
MaterialApp(
  scaffoldMessengerKey: _scaffoldKey,
);
 
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("show SnackBar")));

3.home

程序进入后的第一个界面，传入一个 Widget

...
MaterialApp(
  home: Scaffold(...),
);
...

4.routes

生成路由表，以键值对形式传入 key 为路由名字， value 为对应的Widget

MaterialApp(
  routes: {
    "/home": (_) => Home(),
    "/my": (_) => My()
    //....
  },
);

5.initialRoute

初始路由，如果设置了该参数并且在 routes 找到了对应的key，将会展示对应的 Widget ，否则展示 home

 MaterialApp(
   routes: {
     "/home": (_) => Home(),
     "/my": (_) => My()
   },
   initialRoute: "/home",
 )

6.onGenerateRoute

当跳转路由时，如果在 routes 找不到对应的 key ，会执行该回调，会调用会返回一个 RouteSettings，该对象中有 name 路由名称、 arguments 路由参数。

 MaterialApp(
   routes: {
     "/home": (_) => Home(),
     "/my": (_) => My()
     },
   initialRoute: "/home",
   onGenerateRoute: (setting) {
     // 这里可以做进一步的逻辑处理
     return MaterialPageRoute(builder: (_) => Home());
   },
)

7.onGenerateInitialRoutes

如果提供了 initialRoute ，则用于生成初始路由的路由生成器回调，如果未设置此属性，则底层 Navigator.onGenerateInitialRoutes 将默认为 Navigator.defaultGenerateInitialRoutes。

MaterialApp(
  initialRoute: "/home",
  onGenerateInitialRoutes: (initialRoute) {
    return [
      MaterialPageRoute(builder: (_) => Home()),
      MaterialPageRoute(builder: (_) => My()),
    ];
  }
 )

8.onUnknownRoute

效果和 onGenerateRoute 一样，只是先走 onGenerateRoute ，如果无法生成路由时则在调用 onUnknownRoute 。

MaterialApp(
   routes: {
     "/home": (_) => Home(),
     "/my": (_) => My()
     },
   initialRoute: "/home",
   onGenerateRoute: (setting) {
     return null;
   },
   onUnknownRoute: (setting) {
     return MaterialPageRoute(builder: (_) => Home());
   },
)

9.navigatorObservers

路由监听器，主要是就是监听页面路由堆栈的变化，当页面进行 push pop remove replace 等操作时会进行监听

MaterialApp(
 	navigatorObservers: [
    MyObserver()
  ],
)
  
 class MyObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    print(route);
    print(previousRoute);
    super.didPush(route, previousRoute);
  }
}

 

10.builder

当构建 Widget 前调用，主要用于字体大小、主题颜色等配置

MaterialApp(
   routes: {
     "/home": (_) => Home(),
     "/my": (_) => My()
     },
   initialRoute: "/home",
   onGenerateRoute: (setting) {
     return null;
   },
   onUnknownRoute: (setting) {
     return MaterialPageRoute(builder: (_) => Home());
   },
 	 builder: (_, child) {
     return Scaffold(appBar: AppBar(title: Text("build")), body: child,);
   },
)

11.title

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

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

12.onGenerateTitle

如果非空，则调用此回调函数以生成应用程序的标题字符串，否则会使用 title 。每次重建页面是该方法就会回调执行

MaterialApp(
   title: 'Flutter应用',
   onGenerateTitle: (_) {
     return "我的天";
   },
 );

13.color

设置该值的在程序切换时应用图标的背景颜色，当应用图标为透明时

MaterialApp(
  color: Colors.blue,
)

14.theme

如果指定了 darkTheme ，那么用于提供用户界面的深色版本。如果提供了 darkTheme ， themeMode 将控制将使用哪个主题。默认值是 ThemeData.light() 应用程序的主题颜色

MaterialApp(
  theme: ThemeData(
    // 主要颜色
    primaryColor: Colors.red
  ),
)

15.darkTheme

应用程序深色主题颜色

MaterialApp(
  theme: ThemeData(
    // 主要颜色
    primaryColor: Colors.red
  ),
)

16.highContrastTheme

当系统请求“高对比度”时使用的 ThemeData ，当该值为空时会用 theme 应用该主题

MaterialApp(
  highContrastTheme: ThemeData(
    primaryColor: Colors.pink
  ),
)

17.highContrastDarkTheme

当系统再暗黑模式下请求“高对比度”时使用的 ThemeData ，当该值为空时会用 darkTheme 应用该主题

MaterialApp(
  highContrastDarkTheme: ThemeData(
    primaryColor: Colors.green
  ),
)

18.themeMode

白天模式和暗黑模式模式切换，默认值为 ThemeMode.system

MaterialApp(
  themeMode: ThemeMode.dark
)

19.locale

主要用于语言切换时，如果为 null 时使用系统区域

MaterialApp(
  locale: Locale('zh', 'CN') // 中文简体
)

20.localizationsDelegates

本地化委托

MaterialApp(
  locale: Locale('zh', 'CN') // 中文简体
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
)

21.localeListResolutionCallback

当前应用支持的 Locale 列表

MaterialApp(
  locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [
    Locale('en', 'US'), //美国英语
    Locale("zh", 'CN'), //中文简体
  ]
)

22.localeResolutionCallback

监听系统语言切换事件，一些安卓系统特性，可设置多语言列表，默认以第一个列表为默认语言

MaterialApp(
  locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [
    Locale('en', 'US'), //美国英语
    Locale("zh", 'CN'), //中文简体
  ],
  localeListResolutionCallback: (List locales, Iterable supportedLocales) {
    // 系统切换语言时调用
    return Locale("zh", 'CN');
  },
)

23.supportedLocales

监听系统语言切换事件

MaterialApp(
  locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [
    Locale('en', 'US'), //美国英语
    Locale("zh", 'CN'), //中文简体
  ],
  localeResolutionCallback: (Locale locale, Iterable supportedLocales) {
    return Locale("zh", 'CN');
  },
)

24.debugShowMaterialGrid

在 debug 模式下展示基线网格

MaterialApp(
  debugShowMaterialGrid: true
)

25.showPerformanceOverlay

显示性能叠加，开启此模式主要用于性能测试

MaterialApp(
  showPerformanceOverlay: true
)

26.checkerboardRasterCacheImages

打开栅格缓存图像的棋盘格

MaterialApp(
  checkerboardRasterCacheImages: true
)

27.checkerboardOffscreenLayers

打开渲染到屏幕外位图的层的棋盘格

MaterialApp(
  checkerboardOffscreenLayers: true
)

28.showSemanticsDebugger

打开显示可访问性信息的叠加层，展示组件之间的关系、占位大小

MaterialApp(
  showSemanticsDebugger: true
)

29.debugShowCheckedModeBanner

调试显示检查模式横幅

MaterialApp(
  debugShowCheckedModeBanner: false
)

30.shortcuts

shortcuts 和 actions 是将物理键盘事件绑定到用户界面中的操作。 比如，要在您的应用程序中定义键盘快捷键

31.actions

shortcuts 和 actions 是将物理键盘事件绑定到用户界面中的操作。 比如，要在您的应用程序中定义键盘快捷键

32.restorationScopeId

定义一个应用程序状态恢复的标识符，提供标识符会将 RootRestorationScope 插入 widget 层次结构，从而为后代 widget 启用状态恢复。还可以通过标识符使 WidgetsApp 构建的导航器恢复其状态（即恢复活动路由的历史堆栈

33.scrollBehavior

统一滚动行为设置，设置后子组件将返回对应的滚动行为

MaterialApp(
  scrollBehavior: ScrollBehaviorModified()
)
  
class ScrollBehaviorModified extends ScrollBehavior {
  const ScrollBehaviorModified();
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
      case TargetPlatform.android:
        return const BouncingScrollPhysics();
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return const ClampingScrollPhysics();
    }
    return null;
  }
}