Material Design是由Google推出的全新设计语言，这种设计语言旨在为手机、平板电脑等平台提供更一致、更广泛的外观和感觉。Material Design是一种有质感的设计风格，还会提供一些默认的交互动画。
MaterialApp
MaterialApp代表使用Material设计风格的应用，里面包含了其所需要的基本控件。一个完整的Flutter项目是由这个主组件开始的。
MaterialApp属性详解
| 属性名 | 类型 | 简介 |
|---|---|---|
| home | Widget 主页。 | 用于指定当前App打开时显示的页面 |
| routes | Map<String, WidgetBuilder> | 路由表，定义页面跳转规则 |
| initialRoute | String | 初始路由名称 |
| onGenerateRoute | RouteFactory | 通过pushNamed跳转路由页面时，在routes查找不到时回调 |
| onUnknownRoute | RouteFactory | onGenerateRoute 无法生成路由时调用 |
| navigatorObservers | List<NavigatorObserver> | 导航的监听器列表 |
| builder | TransitionBuilder | 构建Widget前调用， 一般做字体大小，方向，主题颜色等配置 |
| title | String | 应用标题。出现在Android任务管理器的程序快照之上 ，或iOS的程序切换管理器中 |
| onGenerateTitle | GenerateAppTitle | 与title一样，但含有一个context参数用于做本地化 |
| theme | ThemeData | 应用程序的主题，各种的定制颜色都可以设置，用于程序主题切换 |
| darkTheme | ThemeData | 深色模式下的主题 |
| themeMode | ThemeMode | 用于设定主题模式 |
| color | Color | 应用的主颜色值 |
| locale | Locale | 用于本地化。如果为null则使用当前系统区域 |
| localizationsDelegates | Iterable<LocalizationsDelegate<dynamic>> | 本地化委托，用于更改Widget默认的提示语，按钮text等 |
| localeListResolutionCallback | LocaleListResolutionCallback | 该回调负责在应用启动时以及用户更改设备的区域设置时选择应用的区域设置 |
| localeResolutionCallback | LocaleResolutionCallback | 当传入的是不支持的语种，可通过该回调做相应处理 |
| supportedLocales | Iterable<Locale> | 传入支持的语种列表 |
| showPerformanceOverlay | bool | 用于性能测试。 |
| checkerboardRasterCacheImages | bool | 为true时，打开光栅缓存图像的棋盘格 |
| checkerboardOffscreenLayers | bool | 为true时，打开棋盘格层 |
| showSemanticsDebugger | bool | 为true时，打开Widget边框，显示布局边界 |
| debugShowCheckedModeBanner | bool | 为true时，在debug模式下显示右上角的debug横幅 |
| debugShowMaterialGrid | bool | debug模式下是否显示Material网格 |
Scaffold
Scaffold是App的页面框架，将整个页面分为如下的几个部分
Scaffold属性
| 属性 | 类型 | 简述 |
|---|---|---|
| appBar | PreferredSizeWidget |
界面顶部的一栏控件，相当于 Android 中的 ActionBar |
| body | Widget |
当前页面所显示的主要内容 |
| floatingActionButton | Widget |
Material中所定义的FAB，是一个悬浮的功能按钮 |
| floatingActionButtonLocation | FloatingActionButtonLocation |
设定悬浮按钮的位置 |
| floatingActionButtonAnimator | FloatingActionButtonAnimator |
悬浮按钮动画 |
| persistentFooterButtons | List<Widget> |
在底部显示的一组按钮 |
| drawer | Widget |
开始部分的（左边）抽屉菜单 |
| endDrawer | Widget |
结束部分的（右边）抽屉菜单 |
| drawerScrimColor | Color |
打开侧滑菜单时遮盖在主要内容区的蒙层颜色 |
| backgroundColor | Color |
内容的背景颜色。默认为 ThemeData.scaffoldBackgroundColor
|
| bottomNavigationBar | Widget |
显示在底部的导航栏 |
| bottomSheet | Widget |
底部永久性显示的提示框 |
| resizeToAvoidBottomInset | bool |
页面浮动控件部分自动调整，以避免被弹出键盘所遮盖，默认为true
|
| primary | bool |
是否填充顶部栏，默认为true
|
| drawerDragStartBehavior | DragStartBehavior |
处理拖动开始行为的方式 |
| drawerEdgeDragWidth | double |
水平滑动将要打开侧滑菜单的区域的宽度 |
| extendBody | bool |
若为true且指定了bottomNavigationBar或者persistentFooterButtons则body将延伸到Scaffold的底部 |
| extendBodyBehindAppBar | bool |
作用类似extendBody，但延伸的位置是AppBar |
AppBar
AppBar可以显示顶部leading、title和actions等内容（当actions的内容过多时会挤压titile不展示）。
底部通常为选项卡TabBar。flexibleSpace显示在AppBar的下方，高度和AppBar高度一样，可以实现一些特殊的效果
20220424113837.jpg
🔗中文文档
BottomAppBar
BottomAppBar 是一个不规则底部工具栏，它比BottomNavigationBar 灵活，可以放置文字和图标等等控件。
本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~
网友评论