Flutter组件-Material属性

最新推荐文章于 2024-06-06 18:28:52 发布

~废弃回忆 �༄

最新推荐文章于 2024-06-06 18:28:52 发布

阅读量1.6k

点赞数

分类专栏： Flutter 文章标签： flutter Material属性

本文链接：https://blog.csdn.net/eastWind1101/article/details/127934761

版权

Flutter 专栏收录该内容

67 篇文章 19 订阅

订阅专栏

Material属性和说明

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

常用的属性:

序列号	字段	属性	描述
1	navigatorKey	GlobalKey	导航键
2	scaffoldMessengerKey	GlobalKey	脚手架键
3	home	Widget	主页，应用打开时显示的页面.这是在应用程序正常启动时首先显示的Widget,除非制定了initialRoute.如果initialRoute显示失败,也该显示该Widget
4	routes	Map<String, WidgetBuilder>	应用程序顶级路由表.当使用Navigator.pushNamed进行命名路由的跳转时,会在此表中进行查找并跳转
5	initialRoute	String	如果构建了导航器，则会显示第一个路由的名称.初始化路由
6	onGenerateRoute	RouteFactory	路由管理拦截器/回调(Navigator.of(content).pushNamed跳转的时候,如果routes查找不到会调用这个方法)
7	onGenerateInitialRoutes	InitialRouteListFactory	生成初始化路由
8	onUnknownRoute	RouteFactory	当onGenerateRoute无法生成路由时调用
9	navigatorObservers	List	创建导航器的观察者列表
10	builder	TransitionBuilder	在导航器上面插入小部件
11	title	String	程序切换时显示的标题.该属性会在安卓应用管理器APP上方显示,对于ios设备是没有效果的
12	onGenerateTitle	GenerateAppTitle	程序切换时生成标题字符串
13	color	Color	程序切换时应用图标背景颜色（仅安卓有效）
14	theme	ThemeData	定义应用所使用的主题颜色,可以指定一个主题中每个控件的颜色.
15	darkTheme	ThemeData	暗黑模式主题颜色
16	highContrastTheme	ThemeData	系统请求“高对比度”使用的主题
17	highContrastDarkTheme	ThemeData	系统请求“高对比度”暗黑模式下使用的主题颜色
18	themeMode	ThemeMode	使用哪种模式的主题（默认跟随系统）
19	locale	Locale	初始区域设置
20	localizationsDelegates	Iterable<LocalizationsDelegate>	本地化代理
21	localeListResolutionCallback	LocaleListResolutionCallback	失败或未提供设备的语言环境
22	localeResolutionCallback	LocaleResolutionCallback	负责计算语言环境
23	supportedLocales	Iterable	本地化地区列表
24	debugShowMaterialGrid	bool	绘制基线网格叠加层（仅debug模式）
25	showPerformanceOverlay	bool	显示性能叠加
26	checkerboardRasterCacheImages(做性能测试的时候才会用到)	bool	打开栅格缓存图像的棋盘格。
27	checkerboardOffscreenLayers(做性能测试的时候才会用到)	bool	打开渲染到屏幕外位图的层的棋盘格。
28	showSemanticsDebugger(控件的占位面积,有助于页面布局)	bool	打开显示可访问性信息的叠加层
29	debugShowCheckedModeBanner	bool	调试显示检查模式横幅
30	shortcuts	Map<LogicalKeySet, Intent>	应用程序意图的键盘快捷键的默认映射。
31	actions	Map<Type, Action>	包含和定义用户操作的映射
32	restorationScopeId	String	应用程序状态恢复的标识符
33	scrollBehavior	ScrollBehavior	可滚动小部件的行为方式

属性详解

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;
  }
}