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,
  })