Material Design是由Google推出的全新設(shè)計(jì)語(yǔ)言羹幸，這種設(shè)計(jì)語(yǔ)言旨在為手機(jī)催束、平板電腦等平臺(tái)提供更一致澎现、更廣泛的外觀和感覺(jué)。Material Design是一種有質(zhì)感的設(shè)計(jì)風(fēng)格押赊，還會(huì)提供一些默認(rèn)的交互動(dòng)畫饺藤。
??Material Design設(shè)計(jì)風(fēng)格參考
MaterialApp
MaterialApp代表使用Material設(shè)計(jì)風(fēng)格的應(yīng)用，里面包含了其所需要的基本控件流礁。一個(gè)完整的Flutter項(xiàng)目是由這個(gè)主組件開始的程剥。
MaterialApp屬性詳解
| 屬性名 | 類型 | 簡(jiǎn)介 |
|---|---|---|
| home | Widget 主頁(yè)晶伦。 | 用于指定當(dāng)前App打開時(shí)顯示的頁(yè)面 |
| routes | Map<String, WidgetBuilder> | 路由表蔗喂，定義頁(yè)面跳轉(zhuǎn)規(guī)則 |
| initialRoute | String | 初始路由名稱 |
| onGenerateRoute | RouteFactory | 通過(guò)pushNamed跳轉(zhuǎn)路由頁(yè)面時(shí)胳岂，在routes查找不到時(shí)回調(diào) |
| onUnknownRoute | RouteFactory | onGenerateRoute 無(wú)法生成路由時(shí)調(diào)用 |
| navigatorObservers | List<NavigatorObserver> | 導(dǎo)航的監(jiān)聽(tīng)器列表 |
| builder | TransitionBuilder | 構(gòu)建Widget前調(diào)用， 一般做字體大小找御，方向元镀，主題顏色等配置 |
| title | String | 應(yīng)用標(biāo)題。出現(xiàn)在Android任務(wù)管理器的程序快照之上 霎桅，或iOS的程序切換管理器中 |
| onGenerateTitle | GenerateAppTitle | 與title一樣栖疑，但含有一個(gè)context參數(shù)用于做本地化 |
| theme | ThemeData | 應(yīng)用程序的主題，各種的定制顏色都可以設(shè)置滔驶，用于程序主題切換 |
| darkTheme | ThemeData | 深色模式下的主題 |
| themeMode | ThemeMode | 用于設(shè)定主題模式 |
| color | Color | 應(yīng)用的主顏色值 |
| locale | Locale | 用于本地化遇革。如果為null則使用當(dāng)前系統(tǒng)區(qū)域 |
| localizationsDelegates | Iterable<LocalizationsDelegate<dynamic>> | 本地化委托，用于更改Widget默認(rèn)的提示語(yǔ)揭糕，按鈕text等 |
| localeListResolutionCallback | LocaleListResolutionCallback | 該回調(diào)負(fù)責(zé)在應(yīng)用啟動(dòng)時(shí)以及用戶更改設(shè)備的區(qū)域設(shè)置時(shí)選擇應(yīng)用的區(qū)域設(shè)置 |
| localeResolutionCallback | LocaleResolutionCallback | 當(dāng)傳入的是不支持的語(yǔ)種萝快，可通過(guò)該回調(diào)做相應(yīng)處理 |
| supportedLocales | Iterable<Locale> | 傳入支持的語(yǔ)種列表 |
| showPerformanceOverlay | bool | 用于性能測(cè)試。 |
| checkerboardRasterCacheImages | bool | 為true時(shí)插佛，打開光柵緩存圖像的棋盤格 |
| checkerboardOffscreenLayers | bool | 為true時(shí)杠巡，打開棋盤格層 |
| showSemanticsDebugger | bool | 為true時(shí)，打開Widget邊框雇寇，顯示布局邊界 |
| debugShowCheckedModeBanner | bool | 為true時(shí)，在debug模式下顯示右上角的debug橫幅 |
| debugShowMaterialGrid | bool | debug模式下是否顯示Material網(wǎng)格 |
Scaffold
Scaffold是App的頁(yè)面框架蚌铜，將整個(gè)頁(yè)面分為如下的幾個(gè)部分
Scaffold屬性
| 屬性 | 類型 | 簡(jiǎn)述 |
|---|---|---|
| appBar | PreferredSizeWidget |
界面頂部的一欄控件锨侯，相當(dāng)于 Android 中的 ActionBar |
| body | Widget |
當(dāng)前頁(yè)面所顯示的主要內(nèi)容 |
| floatingActionButton | Widget |
Material中所定義的FAB，是一個(gè)懸浮的功能按鈕 |
| floatingActionButtonLocation | FloatingActionButtonLocation |
設(shè)定懸浮按鈕的位置 |
| floatingActionButtonAnimator | FloatingActionButtonAnimator |
懸浮按鈕動(dòng)畫 |
| persistentFooterButtons | List<Widget> |
在底部顯示的一組按鈕 |
| drawer | Widget |
開始部分的（左邊）抽屜菜單 |
| endDrawer | Widget |
結(jié)束部分的（右邊）抽屜菜單 |
| drawerScrimColor | Color |
打開側(cè)滑菜單時(shí)遮蓋在主要內(nèi)容區(qū)的蒙層顏色 |
| backgroundColor | Color |
內(nèi)容的背景顏色冬殃。默認(rèn)為 ThemeData.scaffoldBackgroundColor
|
| bottomNavigationBar | Widget |
顯示在底部的導(dǎo)航欄 |
| bottomSheet | Widget |
底部永久性顯示的提示框 |
| resizeToAvoidBottomInset | bool |
頁(yè)面浮動(dòng)控件部分自動(dòng)調(diào)整囚痴，以避免被彈出鍵盤所遮蓋，默認(rèn)為true
|
| primary | bool |
是否填充頂部欄审葬，默認(rèn)為true
|
| drawerDragStartBehavior | DragStartBehavior |
處理拖動(dòng)開始行為的方式 |
| drawerEdgeDragWidth | double |
水平滑動(dòng)將要打開側(cè)滑菜單的區(qū)域的寬度 |
| extendBody | bool |
若為true且指定了bottomNavigationBar或者persistentFooterButtons則body將延伸到Scaffold的底部 |
| extendBodyBehindAppBar | bool |
作用類似extendBody深滚，但延伸的位置是AppBar |
AppBar
AppBar可以顯示頂部leading奕谭、title和actions等內(nèi)容（當(dāng)actions的內(nèi)容過(guò)多時(shí)會(huì)擠壓titile不展示）。
底部通常為選項(xiàng)卡TabBar痴荐。flexibleSpace顯示在AppBar的下方血柳，高度和AppBar高度一樣，可以實(shí)現(xiàn)一些特殊的效果
??中文文檔
BottomAppBar
BottomAppBar 是一個(gè)不規(guī)則底部工具欄生兆，它比BottomNavigationBar 靈活难捌，可以放置文字和圖標(biāo)等等控件。
本地Flutter 2.10.1鸦难，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子根吁，初學(xué)Flutter ，文章會(huì)根據(jù)學(xué)習(xí)進(jìn)度不定時(shí)更新合蔽，請(qǐng)多多指教~~
