共计 3838 个字符,预计需要花费 10 分钟才能阅读完成。
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
正文完