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

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

作者:Rocky_ruan原文地址:https://segmentfault.com/a/1190000042531691

%s 个评论

要回复文章请先登录注册