首页 > 编程学习 > Flutter组件-Material属性

Flutter组件-Material属性

发布时间:2022/11/19 22:16:21

Material属性和说明

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

常用的属性:

序列号字段属性描述
1navigatorKeyGlobalKey导航键
2scaffoldMessengerKeyGlobalKey脚手架键
3homeWidget主页,应用打开时显示的页面.这是在应用程序正常启动时首先显示的Widget,除非制定了initialRoute.如果initialRoute显示失败,也该显示该Widget
4routesMap<String, WidgetBuilder>应用程序顶级路由表.当使用Navigator.pushNamed进行命名路由的跳转时,会在此表中进行查找并跳转
5initialRouteString如果构建了导航器,则会显示第一个路由的名称.初始化路由
6onGenerateRouteRouteFactory路由管理拦截器/回调(Navigator.of(content).pushNamed跳转的时候,如果routes查找不到会调用这个方法)
7onGenerateInitialRoutesInitialRouteListFactory生成初始化路由
8onUnknownRouteRouteFactory当onGenerateRoute无法生成路由时调用
9navigatorObserversList创建导航器的观察者列表
10builderTransitionBuilder在导航器上面插入小部件
11titleString程序切换时显示的标题.该属性会在安卓应用管理器APP上方显示,对于ios设备是没有效果的
12onGenerateTitleGenerateAppTitle程序切换时生成标题字符串
13colorColor程序切换时应用图标背景颜色(仅安卓有效)
14themeThemeData定义应用所使用的主题颜色,可以指定一个主题中每个控件的颜色.
15darkThemeThemeData暗黑模式主题颜色
16highContrastThemeThemeData系统请求“高对比度”使用的主题
17highContrastDarkThemeThemeData系统请求“高对比度”暗黑模式下使用的主题颜色
18themeModeThemeMode使用哪种模式的主题(默认跟随系统)
19localeLocale初始区域设置
20localizationsDelegatesIterable<LocalizationsDelegate>本地化代理
21localeListResolutionCallbackLocaleListResolutionCallback失败或未提供设备的语言环境
22localeResolutionCallbackLocaleResolutionCallback负责计算语言环境
23supportedLocalesIterable本地化地区列表
24debugShowMaterialGridbool绘制基线网格叠加层(仅debug模式)
25showPerformanceOverlaybool显示性能叠加
26checkerboardRasterCacheImages(做性能测试的时候才会用到)bool打开栅格缓存图像的棋盘格。
27checkerboardOffscreenLayers(做性能测试的时候才会用到)bool打开渲染到屏幕外位图的层的棋盘格。
28showSemanticsDebugger(控件的占位面积,有助于页面布局)bool打开显示可访问性信息的叠加层
29debugShowCheckedModeBannerbool调试显示检查模式横幅
30shortcutsMap<LogicalKeySet, Intent>应用程序意图的键盘快捷键的默认映射。
31actionsMap<Type, Action>包含和定义用户操作的映射
32restorationScopeIdString应用程序状态恢复的标识符
33scrollBehaviorScrollBehavior可滚动小部件的行为方式

属性详解

1.navigatorKey

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

GlobalKey<NavigatorState> _navigatorKey = GlobalKey();

MaterialApp(
  navigatorKey: _navigatorKey,
);

2.scaffoldMessengerKey

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

GlobalKey<ScaffoldMessengerState> _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<Locale> locales, Iterable<Locale> supportedLocales) {
    // 系统切换语言时调用
    return Locale("zh", 'CN');
  },
)

23.supportedLocales

监听系统语言切换事件

MaterialApp(
  locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [
    Locale('en', 'US'), //美国英语
    Locale("zh", 'CN'), //中文简体
  ],
  localeResolutionCallback: (Locale locale, Iterable<Locale> 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;
  }
}

 

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式