Flutter MaterialApp和Scaffold

一、MaterialApp

为了继承主题数据，widget需要位于MaterialApp内才能正常显示， 因此我们使用MaterialApp来运行该应用。所以MaterialApp是Flutter  App开发中的界面设计入口，

MaterialApp({
  Key key,
  this.title = '', // 切换应用程序时的标题描述
  this.home, // 所要显示的界面Widget
  this.color, // 应用程序中使用的主题颜色。
  this.theme, // 应用程序的主题样式
  this.routes = const <String, WidgetBuilder>{}, // 路由列表
  this.navigatorKey, // 导航器键。
  this.initialRoute, // 如果设置了路由，则初始默认显示的路由
  this.onGenerateRoute, // 通过RouteFactory创建路由
  this.onUnknownRoute, // 当 onGenerateRoute 无法生成路由(initialRoute除外)时调用
  this.navigatorObservers = const <NavigatorObserver>[], // 导航栏的观察者列表
  this.builder, // 通过builder模创：如dialog，menu等一些小部件。
  this.onGenerateTitle, // 与title一样，只是使用回调函数来生成应用程序的标题字符串
  this.locale, // 初始区域设置，用来做语言。
  this.localizationsDelegates, //本地化委托，用于更改Flutter Widget默认的提示语，按钮text等
  this.localeListResolutionCallback, // 这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
  this.localeResolutionCallback, //  当传入的是不支持的语种，可以根据这个回调，返回相近,并且支持的语种
  this.supportedLocales = const <Locale>[Locale('en', 'US')], // 传入支持的语种数组
  this.debugShowMaterialGrid = false, // 打开绘制基线网格材质应用程序的网格纸覆盖
  this.showPerformanceOverlay = false, // 当为true时应用程序顶部覆盖一层GPU和UI曲线图，可即时查看当前流畅度情况
  this.checkerboardRasterCacheImages = false, // 打开栅格缓存图像的棋盘格
  this.checkerboardOffscreenLayers = false, // 打开渲染到屏幕外位图的图层的棋盘格
  this.showSemanticsDebugger = false, // 当为true时，打开Widget边框，类似Android开发者模式中显示布局边界
  this.debugShowCheckedModeBanner = true, // 当为true时，在debug模式下显示右上角的debug字样的横幅，false即为不显示
}) 

 1、直接在main()方法中声明使用

void main() => runApp(new MaterialApp(
  title: 'My App',
  home: new MyAppBar(
    title: new Text("dkdsssskdk"),
  ),
));

2、定义一个class，在build方法中返回

void main(){
    runApp(new MainApp());
}
class MainApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Container(
            width: 300,
            height: 300,
            color: Colors.red,
            child: new Text('MainApp'),
          ),
        ),
      ),
    );
  }
}

二、Scaffold

scaffold实现了最基本的页面布局结构

const Scaffold({
    Key key,
    this.appBar, //示在界面顶部的一个 AppBar，也就是 Android 中的 ActionBar 、Toolbar
    this.body,   //当前界面所显示的主要内容 Widget
    this.floatingActionButton,// 在右下角浮动在页面上的Widget按钮。
    this.floatingActionButtonLocation,//浮动在页面上的Widget的显示位置
    this.floatingActionButtonAnimator,//创建新的浮动在页面上的Widget的动画
    this.persistentFooterButtons,//固定在下方显示的按钮，比如对话框下方的确定、取消按钮
    this.drawer,//滑出的抽屉菜单
    this.endDrawer,//隐藏的抽屉菜单，用户手动打开
    this.bottomNavigationBar,//底部导航栏
    this.bottomSheet,//底部滑出Widget
    this.backgroundColor, //背景颜色
    this.resizeToAvoidBottomPadding,//类似于 Android 中的 android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
    this.resizeToAvoidBottomInset,//如果为true，则body和scaffold的浮动窗口小部件应自行调整大小，以避免屏幕键盘的高度由环境MediaQuery的MediaQueryData.viewInsets bottom属性定义。
    this.primary = true,//此Widget是否显示在屏幕顶部。
    this.drawerDragStartBehavior = DragStartBehavior.start,//抽屉拖动开始行为
    this.extendBody = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
  })