Flutter學習-4（Material及Scaffold ）

Flutter可一步一步寫程式，建構畫面，但這樣的速度過慢，因此可透過已經有的架構加速這個過程，而最常用的架構就是Material這個官方預設的Components widgets。

Material 下提供了很多已經寫好的小組件，在寫的時候，可以透過組合將App完成。若想知道Material中有那些組件可以參考官方的網頁：https://docs.flutter.dev/development/ui/widgets/material

。

Scaffold是Material 中的一個部件，主要控制視覺佈局結構，它提供了一個可置部件的架子，你可以把需要的東西都依序放置在Scaffold上面。


Scaffold的屬性方法，大概有appBar、body、floatingActionButton、floatingActionButtonLocation、floatingActionButtons、drawer、onDrawerChanged、endDrawer、onEndDrawerChanged、bottomNavigationBar、bottomSheet、backgrondColor。⋯⋯

this.appBar, //應用中頂部的欄位
this.body, //應用程式的內容主體
this.floatingActionButton, //飄浮按鈕
this.floatingActionButtonLocation, //飄浮按鈕位置
this.floatingActionButtonAnimator, //飄浮按鈕出現及消失動畫
this.persistentFooterButtons, //body、bottomNavigationBar中間的部份
this.drawer, //左滑動欄，
this.onDrawerChanged, //當左滑動欄改變時的回調
this.endDrawer, //右滑動欄
this.onEndDrawerChanged, //當右滑動欄改時時的回調
this.bottomNavigationBar, //下方導覽欄
this.bottomSheet, //底部欄
this.backgroundColor, //背景顏色
this.resizeToAvoidBottomInset, //當有鍵盤出現時，是否調整scaffold的大小，以免被按鍵阻擋
this.primary = true, //是否填充頂部
this.drawerDragStartBehavior = DragStartBehavior.start, //滑動欄的滑進方式，預設為左進
this.extendBody = false,
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
this.drawerEnableOpenDragGesture = true,
this.endDrawerEnableOpenDragGesture = true,
this.restorationId,

它的位置如下圖：

MaterialApp裡的屬性說明：

http://www.liujunmin.com/flutter/material_app.html

scaffold 的屬性說明：

https://ithelp.ithome.com.tw/articles/10311603