2021-03-09

Flutter 学习笔记 01_MaterialApp

navigatorKey 导航键 GlobalKey< NavigatorState >
home 主页 Widget
routes 路由 Map< String, WidgetBuilder >
initialRoute 初始路由 String
onGenerateRoute 生成路由 RouteFactory
onUnknownRoute 未知路由 RouteFactory
avigatorObservers 导航观察器 List< NavigatorObserver >
builder 建造者 TransitionBuilder
title 标题 String
onGenerateTitle 生成标题 GenerateAppTitle
color 颜色 Color
theme 主题 ThemeData
locale 地点 Locale
localizationsDelegates 本地化委托 Iterable< LocalizationsDelegate< dynamic >>
localeResolutionCallback 区域分辨回调 LocaleResolutionCallback
supportedLocales 支持区域 Iterable< Locale >
debugShowMaterialGrid 调试显示材质网格 bool
showPerformanceOverlay 显示性能叠加 bool
checkerboardRasterCacheImages 棋盘格光栅缓存图像 bool
checkerboardOffscreenLayers 棋盘格层 bool
showSemanticsDebugger 显示语义调试器 bool
debugShowCheckedModeBanner 调试显示检查模式横幅 bool

解析

MaterialApp({
  Key key,
  this.title = '', // 设备用于为用户识别应用程序的单行描述
  this.home, // 应用程序默认路由的小部件,用来定义当前应用打开的时候，所显示的界面
  this.color, // 在操作系统界面中应用程序使用的主色。
  this.theme, // 应用程序小部件使用的颜色。
  this.routes = const <String, WidgetBuilder>{}, // 应用程序的顶级路由表
  this.navigatorKey, // 在构建导航器时使用的键。
  this.initialRoute, // 如果构建了导航器，则显示的第一个路由的名称
  this.onGenerateRoute, // 应用程序导航到指定路由时使用的路由生成器回调
  this.onUnknownRoute, // 当 onGenerateRoute 无法生成路由(initialRoute除外)时调用
  this.navigatorObservers = const <NavigatorObserver>[], // 为该应用程序创建的导航器的观察者列表
  this.builder, // 用于在导航器上面插入小部件，但在由WidgetsApp小部件创建的其他小部件下面插入小部件，或用于完全替换导航器
  this.onGenerateTitle, // 如果非空，则调用此回调函数来生成应用程序的标题字符串，否则使用标题。
  this.locale, // 此应用程序本地化小部件的初始区域设置基于此值。
  this.localizationsDelegates, // 这个应用程序本地化小部件的委托。
  this.localeListResolutionCallback, // 这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
  this.localeResolutionCallback, // 
  this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此应用程序已本地化的地区列表 
  this.debugShowMaterialGrid = false, // 打开绘制基线网格材质应用程序的网格纸覆盖
  this.showPerformanceOverlay = false, // 打开性能叠加
  this.checkerboardRasterCacheImages = false, // 打开栅格缓存图像的棋盘格
  this.checkerboardOffscreenLayers = false, // 打开渲染到屏幕外位图的图层的棋盘格
  this.showSemanticsDebugger = false, // 打开显示框架报告的可访问性信息的覆盖
  this.debugShowCheckedModeBanner = true, // 在选中模式下打开一个小的“DEBUG”横幅，表示应用程序处于选中模式
}) 

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget{
	@override
	Widget build(BuildContext context) {
		// .....
		// 下面所有代码介是在此处 类除外
	}
	HomeApp() {}
}

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "此处为 资源管理器显示标题",
      onGenerateTitle: (BuildContext context) => "测试", // 生成标题
      color: Colors.red, // 切换中应用图标背景的颜
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ), // 主题色
      home: Scaffold(
        appBar: new AppBar(
          leading: GestureDetector(
            child: Icon(Icons.home),
            onTap: () => Navigator.pop(context),
          ), // 左边图标
          title: Text("此处为 标题栏 标题"), // 标题
          actions: [
            IconButton(icon: Icon(Icons.add), onPressed: () {}),
            IconButton(icon: Icon(Icons.dashboard), onPressed: () {}),
            IconButton(icon: Icon(Icons.cached), onPressed: () {}),
          ],
          automaticallyImplyLeading: true, // bool类型 没有leading，为true，默认返回箭头
          flexibleSpace: Text("flexibleSpace test"), // 可折叠的应用栏 在标题栏背后
          backgroundColor: Color.fromRGBO(154, 76, 230, 0.5), // 设置背景
          elevation: 0, // 阴影高度
          shadowColor: Color.fromRGBO(255, 0, 0, 0), // 阴影色彩
          brightness: Brightness.light, // 状态栏的亮度 dark 黑底白字 light 白底黑字
          iconTheme: IconThemeData(
            color: Color.fromRGBO(36, 136, 72, 0.5),
            size: 16,
            opacity: 0.7,
          ), // 图标样式
          centerTitle: true, // 标题居中
          titleSpacing: 10, // 标题两边空白区域
          textTheme: TextTheme(),
          primary: true, // appBar 是否显示在最上方
        ),
        body: new Center(
          child: Container(
            width: 100.0, // 宽度
            height: 100.0, // 高度
            color: Colors.red, // 背景色
            alignment: Alignment.center, // 文字排序
            margin: EdgeInsets.only(top: 50, left: 20), // 外边距
            padding: EdgeInsets.only(top: 10), // 内边距
            transform: Matrix4.rotationZ(0.4), // 变形
            constraints: BoxConstraints.tightFor(width: 100), //容器大小的限制条件
            // 前景装饰
            foregroundDecoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.black, Colors.orange],
                  center: Alignment.bottomRight,
                  radius: 4.0,
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.blueAccent,
                    offset: Offset(2.0, 2.0),
                    blurRadius: 4.0,
                  )
                ]),
            child: DecoratedBox(
              // 背景装饰
              decoration: BoxDecoration(
                // 背景渐变
                gradient: RadialGradient(
                  colors: [Colors.red, Colors.orange],
                  center: Alignment.topCenter,
                  radius: 0.98,
                ),
                boxShadow: [
                  //卡片阴影
                  BoxShadow(
                    color: Colors.blueAccent,
                    offset: Offset(2.0, 2.0),
                    blurRadius: 4.0,
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      routes: {
        '/index': (BuildContext context) => HomeApp(),
      }, // 路由
      initialRoute: '/index', // 初始路由
      // 找不到路由执行
      onGenerateRoute: (RouteSettings settings) => null,
      // 未知路由 调用顺序 onGenerateRoute ==> onUnknownRoute
      onUnknownRoute: (RouteSettings settings) => null,
      // 路由观察器 调用Navigator的相关方法时，会回调相关的操作
      navigatorObservers: [
        new MyNavServer(),
      ],
    );
  }

  HomeApp() {}
}

class MyNavServer extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    // 当调用Navigator.push时回调
    super.didPush(route, previousRoute);
    // 可通过route.settings获取路由相关内容
    // route.currentResult获取返回内容
    print(route.settings.name);
  }
}