Flutter学习第八课：组件学习之MaterialApp和控件之Material

一：MaterialApp组件
MaterialApp组件位于app.dart文件下

 const MaterialApp({    Key? key,    this.navigatorKey,//导航键    this.scaffoldMessengerKey,//脚手架键    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,//程序切换时生成题目字符串    this.color,//程序切换时利用图标背景色彩（仅安卓无效）    this.theme,//主题色彩    this.darkTheme,//暗黑模式主题色彩    this.highContrastTheme,//零碎申请“高对比度”应用的主题    this.highContrastDarkTheme,//零碎申请“高对比度”暗黑模式下应用的主题色彩    this.themeMode = ThemeMode.system,//应用哪种模式的主题（默认追随零碎）    this.locale,//初始区域设置    this.localizationsDelegates,//本地化代理    this.localeListResolutionCallback,//失败或未提供设施的语言环境    this.localeResolutionCallback,//负责计算语言环境    this.supportedLocales = const <Locale>[Locale('en', 'US')],//本地化地区列表    this.debugShowMaterialGrid = false,//绘制基线网格叠加层（仅debug模式）    this.showPerformanceOverlay = false,//显示性能叠加    this.checkerboardRasterCacheImages = false,//关上栅格缓存图像的棋盘格    this.checkerboardOffscreenLayers = false,//关上渲染到屏幕外位图的层的棋盘格。    this.showSemanticsDebugger = false,//关上显示可拜访性信息的叠加层    this.debugShowCheckedModeBanner = true,//调试显示查看模式横幅    this.shortcuts,//应用程序用意的键盘快捷键的默认映射    this.actions,//蕴含和定义用户操作的映射    this.restorationScopeId,//应用程序状态复原的标识符    this.scrollBehavior,//可滚动小部件的行为形式    this.useInheritedMediaQuery = false,  }) : assert(routes != null),       assert(navigatorObservers != null),       assert(title != null),       assert(debugShowMaterialGrid != null),       assert(showPerformanceOverlay != null),       assert(checkerboardRasterCacheImages != null),       assert(checkerboardOffscreenLayers != null),       assert(showSemanticsDebugger != null),       assert(debugShowCheckedModeBanner != null),       routeInformationProvider = null,       routeInformationParser = null,       routerDelegate = null,       backButtonDispatcher = null,       super(key: key);

个别应用：

 return MaterialApp(      title: "Flower示例",      theme: ThemeData(primarySwatch: Colors.blue),      home: TestSheng(),    );相似于：return MaterialApp(      title: "Flower示例",      theme: ThemeData(primarySwatch: Colors.blue),      home: Scaffold(//这是另一个组件Scaffold),    );

主页中
title
Android：工作管理器的程序快照之上
IOS: 程序切换管理器中

theme
指定整个App主题色彩

home
传入Widget组件,显示第一个页面

二：Material控件
是一个没有实际效果的控件，也是个底层的控件，能够用来设置暗影，形态，色彩，文字格局等等

Material负责：
1.Clipping: Material将小部件裁剪为指定的形态，资料的形态是由: [shape], [type], [borderRadius] 这三个属性确定的。
2.Elevation: 通过elevation像素值在Z轴晋升子树，并绘制适当的暗影。
3.水波纹水墨成果

  const Material({    Key? key,    this.type = MaterialType.canvas,//指定的type类型有MaterialType.canvas，MaterialType.card,MaterialType.circle,MaterialType.button,MaterialType.transparency    this.elevation = 0.0,//决定了暗影的大小和程序    this.color,//填充色彩    this.shadowColor,//暗影色彩    this.textStyle,    this.borderRadius,    this.shape,//形态    this.borderOnForeground = true,    this.clipBehavior = Clip.none,    this.animationDuration = kThemeChangeDuration,    this.child,//子控件  }) : assert(type != null),       assert(elevation != null && elevation >= 0.0),       assert(!(shape != null && borderRadius != null)),       assert(animationDuration != null),       assert(!(identical(type, MaterialType.circle) && (borderRadius != null || shape != null))),       assert(borderOnForeground != null),       assert(clipBehavior != null),       super(key: key);

例如：栗子斜角矩形边框

return      new Center(        child: Material(          color: Colors.blue,          shape: new BeveledRectangleBorder(            //斜角矩形边框            side: new BorderSide(                width: 3, color: Colors.red, style: BorderStyle.solid),            // borderRadius: new BorderRadius.circular(50.0),          ),          //borderRadius: new BorderRadius.circular(2),//如果指定了type,那么borderRadius属性必须为null//提醒：Failed assertion: line 193 pos 15: '!(shape != null && borderRadius != null)': is not true          child: new Container(            padding: EdgeInsets.all(20.0),            child: new Text('斜角矩形边框'),          ),        ),      );

留神：如果指定了Shape，那么borderRadius属性必须是null,并且type属性不能是MaterialType.circle。

Material成员变量shape：
shape的类型是ShapeBorder，其子类如下：
BeveledRectangleBorder//斜直角矩形边框
BoxBorder 实现的子类 >>>> Border 和 BorderDirectional
CircleBorder//圆形边框
InputBorder >>>本篇暂不解说
RoundedRectangleBorder//圆角矩形边框
StadiumBorder